I have followed the exact steps given on facebook developer website, which is to add JS sdk after opening body tag(ideally) and placing the div at the desired place where button should appear.
<body>
<!-- Facebook like button js -->
<div id="fb-root"></div>
<script>
(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#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Add this where you want the button to appear -->
<div class="fb-like" data-href="https://www.facebook.com/myWebsite" data-width="400" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</body>
After doing this, it would still not show up.
If you don´t run this code on a server (localhost or remote), you need to change the following line:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
..to this one:
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
I highly suggest NOT doing that though, and using a server on localhost for testing/development.
If that code change does not work, upload it to a real server (without the code change). I just tested it and it works perfectly fine. You should really consider using a real server (or a local one) for development.
Use an editor like Brackets or Webstorm, they all include a server. For example, Brackets is pretty easy for "live editing".
Related
I'm creating a Facebook page plugin using the tool here, and I was lead to believe I would have the option of selecting HTML5 from a drop down box.
However, there are no options to select from.
I only see:
Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
<div id="fb-root"></div>
<script>(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_GB/sdk.js#xfbml=1&version=v2.5&appId=171705736232531";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Place the code for your plugin wherever you want the plugin to appear on your page.
<div class="fb-page" data-href="https://www.facebook.com/example.com" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/example.com">Example</blockquote></div></div>
Is this code HTML5 by default?
Is this code HTML5 by default?
Yes, HTML5 would seem to be the default (and only) option these days.
Previously, there were additional options for "XFBML", "IFRAME" and "URL". But these would have resulted in very different plugin code to copy 'n' paste.
I came across something strange; the Facebok Page Plugin doesn't load on mobile only if it's for a specific Facebook page.
My code:
<div id="fb-root"> </div>
<script>
(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#xfbml=1&version=v2.4&appId=1591121954498982";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-adapt-container-width="true" data-height="350" data-hide-cover="false" data-href="https://www.facebook.com/pages/סיפורי-פירות-Fruit-Story/410067012494711?fref=ts" data-show-facepile="true" data-show-posts="true" data-small-header="false"> </div>
Changing just this line:
data-href="https://www.facebook.com/pages/סיפורי-פירות-Fruit-Story/410067012494711?fref=ts"
to another page's URL such as:
data-href="https://www.facebook.com/CocaColaUnitedStates?fref=ts"
...makes the plugin load fine.
Is it because the page URL contains Hebrew? Is there a relevant page setting?
I set up a small demo page:
http://s-fruit.co.il/facebook-test.html
Found the cause!
This is an intentional (though peculiar) behavior of Facebook when dealing with age-restricted pages and guest users (not logged in, as it often happens on mobile browsers as most use the app).
Why not simply display a login prompt? Some paraphrased info? Who knows. At least the mystery is solved.
An official response can be found here:
https://developers.facebook.com/bugs/828224027247232/
I am using facebooks's share button, exactly as specified in https://developers.facebook.com/docs/plugins/share-button/.
I tried the HTML5 and XFBML versions, but both generate the link below, which returns http error 500 when the user submits. If I manually remove the app_id parameter (which I did not inform anywhere), it works perfectly.
https://www.facebook.com/sharer/sharer.php?app_id=309437425817038&sdk=joey&u=http%3A%2F%2Fg1.globo.com%2Feconomia%2Fnoticia%2F2014%2F05%2Fministro-da-fazenda-diz-que-nao-vai-faltar-energia-no-pais.html&display=popup
I am using this from my company's intranet, to share a link from the company's external website.
This is my code:
<!-- Facebook -->
<div id="fb-root"></div>
<script>(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/pt_BR/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<fb:share-button href="<SHARED_URL>" type="button_count"></fb:share-button>
<!-- <div class="fb-share-button" data-href="<SHARED_URL>" data-type="button_count"></div>-->
So where does this app_id comes from? How do I get rid of it? I want to use the button with the share count, therefore I wouldn't like to call sharer.php directly.
It is possible to test "Like" button on localhost?
Not really; facebook has to crawl your site to pull in the title, description, and thumbnail. It can't get to your site if it's on localhost.
Dave's answer is correct, however, I just discovered a workaround: You can make your local machine accessible by using http://localtunnel.me . You'll need to (temporarily) change some URLs used in your app code / html so links point to the temporary domain, but at least facebook can reach your machine.
It is possible to perform limited testing on the facebook like button on localhost. It renders properly on my machine. The trick is using a live, non-localhost URL on the data-href attribute (I used Google in the sample below):
<div id="fb-root"></div>
<script>(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/pt_BR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.google.com" data-width="450" data-layout="button_count" data-show-faces="false" data-send="false"></div>
If you're developing the likebutton for www.xyz.com, just add in your hosts file:
127.0.0.1 www.xyz.com
Hooray, no more 500s.
I'm trying to add a facebook like button to my extension.
I've already added a google +1 button but I seem to be having some trouble with the facebook button.
This is the code generated by https://developers.facebook.com/docs/reference/plugins/like/
(Modified the source of the all.js file to be local instead)
<div id="fb-root"></div>
<script>(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 = "all.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://chrome.google.com/webstore/detail/bkonffiagffjhnihbboojciggcplmobc" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div>
It doesn't show up at all on my extension, and I'm not exactly sure why.
Any tips would be great!
Thanks
The original src value for my like button was something like //connect.facebook.net/en_US/all.js#appId=<number>&xfbml=1. In a chrome extension, this url is extended to chrome-extension://connect.facebook.net/en_US/all.js#appId=<number>&xfbml=1, which will 404. The simple fix is to prepend the original src value with the http protocol, http://connect.facebook.net/en_US/all.js#appId=<number>xfbml=1.
I do not know the specifics of all.js, I can't say if embedding it in your extension will be useful.
(I ran into this same issue and thought I would leave my answer here for others.)