Facebook Share Button – Always Display Count

 
UPDATE (February 10, 2011) — I have posted a followup article ( Facebook Share Button Revisited ) that provides links to an alternative solution for this problem, and also discusses the fact that facebook is apparently “discouraging” further use of the share button.
 

The share button provided by facebook is an excellent tool for blog owners and website managers. It provides an easy way for your readers to share their favorite content, and it automatically displays the number of times a given page has been posted to facebook. Unfortunately, when configured with the counter display above the button, the count is not initially displayed if the page has been shared fewer than three times (by design). And when the count is not displayed, the button size is smaller than normal, causing a lot of web-page design frustrations. For this reason, I set out to find a way to “force” the share button to always display the count, even when the value is less than three.

One solution to this problem is to make your own copy of facebook’s javascript code and make a single-character edit to the file. The HTML provided by facebook’s share-button generator looks like this (line breaks added for readability):

<a name="fb_share" 
   type="box_count" 
   href="http://www.facebook.com/sharer.php">
   Share
</a>
<script 
   src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"  
   type="text/javascript">
</script>

The first step is to download a copy of FB.Share from the facebook servers. You should be able to do this by typing the following URL into your web browser:

http://static.ak.fbcdn.net/connect.php/js/FB.Share

Use a text editor to modify this file. Search for the following string in the code (embedded in the middle of long code lines):

this.displayBox(a,3);

Change the “3” to a “0”:

this.displayBox(a,0);

That’s pretty much the only functional change you need to make. You can now store your new FB.Share file somewhere on your website (perhaps in a directory named scripts), and change the button code to point at this new javascript:

<a name="fb_share" 
   type="box_count" 
   href="http://www.facebook.com/sharer.php">Share
</a>
<script 
   src="http://your-server-name/scripts/FB.Share"  
   type="text/javascript">
</script>

Of course, your code will be vulnerable to facebook system changes. If (when) they modify their underlying code for share buttons, your local copy of their javascript code will be out of date and need to be updated.

NOTE — I ran into one obscure difficulty that I should warn you about. The program I use to transfer files from my local computer to my web server ended up changing “Share” to “share” in the filename… that is, it considers .Share to be an extension and it quietly made all of the letters lower-case. It took me a few minutes to figure out why my new button code couldn’t find the new javascript file, and this silent change was the culprit.

23 Responses

  1. YES!! Thank you for figuring this out. Those idiots over at Facebook at still twiddling their thumbs months after people started complaining about it and you have it worked out perfectly. It worked great for my site. Thank you so much!

  2. Hi Patrick

    I’ve tried your suggestion and I don’t see the button on my page.

    I also notice you do not use this solution on your site; did you discover a problem with this method?

    Thanks in advance.

    1. Hi John. I’m not sure why it isn’t working for you. But I am indeed using this technique on my site here. If you view the source for this page, scroll down near the bottom and you should be able to find it.

  3. Hello Patrick

    Any idea if this fix is still valid.
    The counter doesnt appear at all on my blog, also, when i share a post, the like counter in the one incremented where as the share counter in not displayed at all.

    Im using simple FB code no changes, any idea why the counter is not working for FB share.
    I see that you were working with FB share for a while, maybe you have an idea of whats going on…

    Thanks
    Maher

    1. There were several days over this past week where it wasn’t working for me either, but it appears to be up and running again. My assumption is the facebook servers were were not cooperating with share buttons for a while.

  4. YES!! Thank you for figuring this out. Those idiots over at Facebook at still twiddling their thumbs months after people started complaining about it and you have it worked out perfectly. It worked great for my site. Thank you so much!

  5. Hello man. How code use you for share button social media at posts, in single.php? Please help me. I like it and I want put on my website.

Leave a Reply