Facebook share button shows no count

Share

I was working on adding a Facebook Share button to blog posts at work and I couldn't seem to get it to display the speech bubble with the number of shares without clicking on the icon.

I did a whole bunch of searching and it turned out that it was caused by some Javascript from Facebook that only displays the count if it's more than 3. I don't really like the inconsistency of that, so I looked for a way to get it displayed even if it's zero. A guy named Patrick Kelly suggests getting your own local copy of the Facebook Javascript (FB.Share) and modifying the displayBox() function call so it shows any number. This is fine for now in that it will work, but as Patrick points out on his blog, it will potentially break if Facebook update their API, or make other changes to the underlying code.

I decided to pick apart the code and come up with a solution that doesn't involve the same issues. The fix is fairly basic. You just need to include the share button in the same way as Facebook tells you, and then insert the following Javascript after that:

<script type="text/javascript">
var buttons = document.getElementsByName('fb_share');
var count = buttons.length;
for(var i = 0; i<count; i++) {
  var data = FB.Share.getUrl(buttons[i]);
  if(FB.Share.results[data]) {
    buttons[i].fb_count = FB.Share.results[data].total_count;
  }
  FB.Share.displayBox(buttons[i], 0);
}
</script>

Hopefully that's a bit tidier than copying and editing the FB.Share file. It also means that you'll benefit from a cached version of the code being presented to the user if they've been on any other site with that button. A fairly tiny benefit, but every little helps. 🙂

26 thoughts on “Facebook share button shows no count

  1. That’s no use if you want the count to show up by default when fewer than 3 people have shared it. That’s the very nature of the problem the code fixes. I don’t want to have to share something to see how many other people have shared it before, even if that number is 2 or below. 🙂

  2. Thanks very much for this – exactly what I was looking for, until I tried to use it in WordPress and it only seems to work for the first entry with ‘0’ shares.

  3. That’s strange, it should loop through however many you have on a page and work for them… Are they all on the same page or do you mean that it only works for the very first one regardless of what page they’re on?

  4. I can’t get this to work right. This is my current FB share code that I have on my page:

    – – – – – – – – – – – – – – – – – –

    Can you display exactly what you mean when you say “You just need to include the share button in the same way as Facebook tells you, and then insert the following Javascript after that”.

    Thank you!

  5. You need to put the code in exactly as Facebook tells you to. Below the Facebook code you put the code mentioned in my post.

  6. Hi Stu,

    Thanks for getting back to me so fast. I really want this to work for me, but I still cannot get it to work correctly. What I am doing is this:

    1) I am placing the <a tag where I want the FB button to be located
    2) Directly after that I am replacing FB's <script tag with the one you have provided above.

    I am guessing this is not correct since it still is not working.

    Can you email me at haloossim[at]gmail[dot]com with what the code should look like to work properly including both the FB <a tag and the <script tag.

    Sorry for all the trouble, but I really appreciate your help on this one.

  7. Hi Jason, you shouldn’t be replacing anything from Facebook’s code. My code should be added after it, as mentioned in the post and my previous comment.

  8. Thank you!
    Ok I found an issue which you can improve on – If the share is a 1 or a 2 (not a ZERO), the share box will not show a number – Can you re-make the script so that it will also show when there is 1 or 2 shares as well, otherwise it is not showing a number for 1 or 2 shares.

  9. I believe the second parameter to FB.Share.displayBox is the minimum number to display… I might be wrong about that if what you say is true. Do you have any examples you can show me?

    I wrote this nearly a year ago, so I may be incorrect about how it works, or it could have changed.

  10. Interesting…. but when I tried, and want to preview, there is a xml code error: “count must be close with”>” or “/>”
    can you help me…?

  11. Hi Stu,

    So the script is working, but it does not work ALL the time and in certain browsers.

    Look in the right-sidebar of this page, you will see the FB share button. You can also click on the “NEXT” link below to view additional pages.

    [Link removed]

    For some reason it is not consistent and only works when it wants to. Can you figure out what is creating this type of behavior?

  12. Jason, I went to the page in your link but I don’t see the Javascript I put in my post anywhere in the source. Are you definitely including it? Is it in another .js file?

  13. Can I send you an email to show you exactly what may code is…thank you!

  14. Not unless it’s in a .js file or something… What line number does my code appear on? I don’t see it in the source at all.

  15. Line 409 of the page you sent me to is this:

    <option style="color:black;" value="113">Senior Living Design</option>

  16. Yes, the page you linked me to before. Line 409 is smack inside a <select> and if I do a quick search for “displayBox” it finds 0 results. The code in my post above does not appear on the page as far as I can see. Perhaps there’s some caching issue with the page, or perhaps you’re looking at a dev version.

  17. Stu… thank you for the fix! My only problem is that I still can’t get it to work. Can you paste an example of what code you used exactly? (include both FB default code and yours right under)

  18. Hi Stu, I’m have the same problem as Mas_Rey with the xml code error: “count must be close with”>” or “/>”. Would you mind emailing me if you have a second? Thanks so much!!

Leave a Reply

Your email address will not be published. Required fields are marked *