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.
[...] ¿Ya se imaginan que quiere decir ese 3? Entonces, hay que cambiar al 3 por un 0, guardar, subir el .js a nuestro servidor, y hacer la llamada localmente. Esta solución está publicada en Patrick M. Kelly’s Bulletin Board. [...]
Thank you for finally figuring this out!!!
[...] opción para habilitarlo de manera oficial, pero finalmente, después de buscar un buen rato, hemos encontrado la solución a nuestro problema. Si utilizas el botón clásico de Facebook, tendrás un código parecido a este: Y deberás usar [...]
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!
Thank you sooooo much for posting this great solution out, you’ve made someone in Italy v happy tonight
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.
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.
tnx a bunch! this really helps a lot!
Thanks very much from Italy, you save me!
Thanks you SO much!! i’ve been searching for this for like 4 hours??!
THANKS THANKS THANKS THANKS MAN!
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
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.
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!
thank u! ich will post this on our page and link to your tutorial!
greets grizz
[...] 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 [...]
After reload the page the count back to 0 (zero), why?
Someone know?
How to do it for like button?
[...] منبع: Patrick M. Kelly [...]
After reload the page the count back to 0 (zero), pls say any solution for this pls i am trying it for more than a week
This is not working in IE 8. Please help me to solve this problem.
Thanks
Binny
Any progress on the issue of losing shares over changes to a WordPress page? Why does WordPress.com have an easy solution?
Hi Patrick,
How can add title, description, image ,caption with counter share on facebook. Is it possible or not??