OpenGraph values - facebook-javascript-sdk

I'm sorry, I have searched for a day and a half but I can't find the specific answer I'm looking for.
My Facebook Like button doesn't appear on IE, Chrome or Firefox. I am using Javascript.
I have the required HTML addition.
I need to put in the Meta Tag
meta property="og:tag name" content="tag value"
COULD I GET AN EXAMPLE FOR THE "TAG NAME" AND "TAG VALUE"?
I don't know what to fill in!
I am supposed to have the Javascript SDK right after the body; however, I don't know what to put for an APP_ID as in:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
//CAN I GET AN EXAMPLE OF YOUR_APP_ID, please?
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
//is channel.html the page it's on?
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
I am getting so frustrated! Please help me!

The YOUR_APP_ID is the ID of your Facebook Application. If you haven't created a App, you can do so here.
However, you don't need to use an app to use the Like Button plugin. You should be able to use the Plugin just by copy-and-pasting the plugin code from the developer website. If that doesn't work, use the debug tool to see what's going wrong.

Well, I recommend you to read more carefully the documentation of the Facebook's JS SDK, but also the "Getting Started" and the "Core Concepts". There you will find a lot of very useful information.
I'll try to explain what the App_id is. When you want to do some more funcional applications, that interact with user information from facebook, you need to create a Facebook's app. To do that log into your account and go to https://developers.facebook.com/apps. There you need to tell your app's name, URL, and some other things. When you save you'll see an app_id, that is an unique number that identifies your app on Facebook. Is this number that you have to put in your script (surrounded by quotes, don't forget).
The channel file is a single line html file that you have to put in your server, at the same domain of your app. The content of this file is:
<script src="//connect.facebook.net/en_US/all.js"></script>
Replace the "en_US" by your app locale.
You questioned about the meta tags of the OpenGraph. Well, when you click "like" for a URL, the Facebook-bot navigates to your page and reads the meta information. When it finds OpenGraph meta tags, the information posted at the user wall is more personalized. You'll have to spent a little time to understand more what kind of OpenGraph meta tags you will need, once every site has different information to share.

Related

How to trigegr a "Share Dialog", using facebook SDK for Javascript?

Here I have a very, very noob question. I'm trying to create a web facebook app, using Javascript SDK. I have never done any website, any app, etc. So very basic, excuse me in advance..
Basically, I'm following the steps decribed in the quickstart: https://developers.facebook.com/docs/javascript/quickstart
I created a html file, and copy-pasted exactly what is described on this page:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
I changed "your-app-id" with the id I was provided.
Then I just open my html file with my web browser, which is showing a blank page, I guess it's normal at that point.
Then, I go to the next step, that is supposed to "trigger a share dialog" (see: https://developers.facebook.com/docs/javascript/examples). Again, I copy-paste the provided snipped starting with FB.UI(... and paste it after the FB.init() call, which is just before the "FB.AppEvents.logPageView();" line, if I'm not mistaken (?).
And then I reload my html file with my browser.
According to the "examples" page, "Now when you reload your page, you'll see a Share dialog appear over the top of the page."
Well, it's still a blank page.
So, I guess my approach is very naive.. is it supposed to work just like that? Or if not, what am I doing wrong? Am I supposed to download something before?
Thanks in advance for any help! :)
You have to test this on a real server, not just by opening the html file in a browser. Either upload it to an external server or start one on localhost. You can also try adding the protocol:
js.src = "https://connect.facebook.net/en_US/sdk.js";
...but i would recommend using a server on localhost and NOT adding the protocol.

Google plus share

I use Muse and I want to be able to share the current URL dynamically. I have achieved this with Facebook and Twitter. However Google Plus is still evading me.
This is the JS code I have been working with.
<script language="javascript">
function gplussharecurrentpage() {
sharelink = "https://plus.google.com/share?url={URL}"+url;
newwindow=window.open(sharelink,'name','height=400,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
var url="www.google.co.uk";
googleplusbtn(url);
</script>
I have a button linked to activate the script however it comes back with a this link is not valid.
Any ideas?

Google+ share button with preview text + image

I try to add a Google+ button to my page. The button itself works, but the text and the image are always empty. I annotated my body and some elements with the schema.org tags, but it is not working. What am I doing wrong here?
<body itemscope itemtype="http://schema.org/Article">
<div itemprop="name">This is the article name</div>
<img itemprop="image" src="thumbnail.jpg" />
<p itemprop="description">This is the description of the article.</p>
<g:plus action="share" href="testUrl"></g:plus>
<script type="text/javascript">
window.___gcfg = {
lang: 'en-US'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</body>
You can debug what microdata is getting parsed by using the Google Structured Data Testing Tool. This can help you to understand what Google is seeing on your microdata annotations.
Try removing the URL from your share / +1. The target Url will fallback to the current page, which I'm assuming is you want people to share.
If that's not the problem, there are a few other things that might help:
Your snippet:
Did you use the Google+ Snippet generator? It tends to work pretty well. Also, if you have a complex page, it can help to use meta tags in the <header> section to begin with for debugging.
Proxies:
Which brings me to the next point, if there is a proxy blocking your page or security that prevents people from accessing it, that will block the share preview renderer. Make sure your page (share target) is publicly accessible.
Another possibility: if your page is cached in your server's proxy, this will prevent the page from being updated by the share preview renderer.
If you add an anchor link or query string to the end of the url, e.g. foo.com/index.html vs foo.com/index.html#test vs foo.com/index.html?test=yes it should ensure that a cached version without microdata will be included.
It might be the href attribute on your g:plus tag. Instead, change it to data-href.

Meta refreshing on the iTunes Store

Recently Apple has unified its affiliate management by providing links with target "itunes_store' of the kind:
In Arrivo! HD - Rome's and Milan's buses, taxi and metros, and trip sharing for the conscious visitor to the Ethernal city - Fabrizio Bartolomucci
Yet, in order to simplify its management, I would like to call it by means of a meta refresh from a page on my site only I have no hint about how the handle the target thing. The Windows open command just handles standard targets and if I enter 'itunes-store', I get an empty page.
Thanks for your help.
I'm pretty sure you can't specify a target on a meta refresh, but here is some JavaScript that does what you want. Just place this block somewhere on your page.
<script type="text/javascript">
var url = "https://itunes.apple.com/it/app/in-arrivo-hd-i-tempi-di-arrivo/id409812280?mt=8&uo=4&at=11l5Jz%22";
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('target', 'itunes_store');
link.click();
</script>
Funnily combining your solution with the normal meta refresh does the trick. This is the full code working both on the web, on the iPhone, on Facebook and by the QR code. Great!
<script type="text/javascript">
var url = "itmss://itunes.apple.com/it/app/in-arrivo-hd-i-tempi-di-arrivo/id409812280?mt=8&uo=4&at=11l5Jz%22";
var link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('target', 'itunes_store');
link.click();
</script>
<meta http-equiv="refresh" content="0; url=https://itunes.apple.com/us/app/in-arrivo!-hd-romes-milans/id409812280?mt=8&uo=4">

IE 9 Security Warning for Facebook - Related Files When Viewing Page Tab

I have a page tab app. The site that has my app hosted has SSL enabled. When I view the page tab using IE9 I get an insecure content error and in my console I can see:
HTTPS security is compromised by http://static.ak.facebook.com/connect/xd_arbiter.php?version=11
this is only when I view the page tab using regular http protocol e.g:
http://www.facebook.com/mypage/myapp
if I am viewing Facebook securely it does not happen, e.g:
https://www.facebook.com/mypage/myapp
The app uses the JavaScript SDK but I am doing things to ensure it uses the secure version such as:
FB._https = true;
before
FB.init()
when I link to the SDK I am sure I am using the secure connection:
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "https://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
} (document));
I do not get these errors if I view the pages directly on my server , it only happens when viewed inside of the page tab. I'm thinking that Facebook is generating this call to unsecure resources. I've done allot of searching but can't find a way to fix this. Could anyone recommend a way to deal with this? Any help would be very much appreciated. Thanks!