I have a facebook like button in my blog using html5 but it doesn't display the count for visitors who didn't like. When someone hits the button, it displays 1 like (even though I tested with multiple facebook users liking it. (the like works, and it does appear on facebook.com)
tested in 3 different browsers.
this is the code I used:
<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/all.js#xfbml=1&appId=xxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style="float: left;margin-left: 40px;" class="fb-like" data-href="http://www.xxxxxx.com/?p=<?php the_ID(); ?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="true" data-font="segoe ui"></div>
EDIT: I think the problem is with firefox. when i like the page from firefox - doesn't show in other browsers. when i like from chrome or safari - shows in all except firefox.
I had the same issue, but what I figured out is, its because of caching of FB as when I like anything from Firefox then at the same time it dosent shows the count, but next day you will see all the shares and like. Am on wordpress.
Related
I have share buttons on every article on my page which just stopped counting shares since yesterday.
Pages gets normally shared on facebook, but share counter does not get incremented.
Old posts are displaying correct counts, but any new share is not accounted.
Code for my share button is generated on their page
https://developers.facebook.com/docs/plugins/share-button
and it looks like this:
<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.9&appId=APPID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="URL" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=URL&src=sdkpreparse">Share</a></div>
Am I doing something wrong, or facebook went nuts?
EDIT:
Social button increments properly if there is 1 or more share on it (older articles). Ones with 0 shares are shared properly, but not counted/incremented.
It was an issue with facebook itself.
I've reported it and their developers have resolved it.
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".
I've some trouble with the Like Button. I would like to like a specific post like this one from a external website but it doesn't work:
https://www.facebook.com/236086869778323/posts/597301643656842
For this button I used the following code, which is given by Facebook Developers
<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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/236086869778323/posts/597302473656759" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
When you read the documentation about the Like Button it states
A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.
These pieces of content are external. That is the Like Button is intended to be used for webpages outside of Facebook to share in Facebook.
You will need to use Embedded Posts instead https://developers.facebook.com/docs/plugins/embedded-posts/
I have added the Facebook button "LIKE" code 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/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="https://www.facebook.com/mypageinfacebook?sk=myappId" data-send="false" data-layout="button_count" data-width="21" data-show-faces="true"></div>
But the like count is not seen on my site, it could be seen only after login in to Facebook account.
How to fix it?
your code wise no wrong..,
Check your data-href link has valid one,
data-href="https://www.facebook.com/mypageinfacebook?sk=myappId"
i tried this code with my fans page url its shown the like counts perfectly..
otherwise,
the page which users wants to like might having '0' likes.
if that case means count wont show.
I think you better to use this one this reference is working..
http://developers.facebook.com/docs/reference/plugins/like-box/
Posting this response for other users that come across this post.
"It seems you are using restriction on "minimum age" or "country" on your page.
That mean facebook can't display a like box, without knowing who is connected, because he can't know the age or the country of the current user."
All credit to AHWEBDEV
Link
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.)