The Facebook Share Widget in Action
I recently discovered the official Facebook Share Widget, which allows your website or blog content to be shared on Facebook, and added it to a website I am developing. See the picture at the right, it’s a very cool widget and easy for readers to use.
The problem I ran into, which is very annoying to a perfectionist like myself, is that the little box showing the count is only displayed after the page has been shared 3 or more times. Until then all you see is the small dark blue button below it. This can really throw off your page layout and ruin the aesthetics of your page when you’re expecting to have the full widget displayed.
Fortunately, there is an easy solution to the problem which involves performing a simple edit to the javascript file.
Here is the HTML that is generated when you use the Facebook Share code generator:
<a name="fb_share"
type="box_count"
share_url="http://my-domain/my-page-to-share"
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 problem lies within the FB.Share script used by the widget, so the first thing you need to do is download a local copy of this script from the URL below (right-click and Save Link As…):
http://static.ak.fbcdn.net/connect.php/js/FB.Share
Next, replace the text
this.displayBox(a,3);
with
this.displayBox(a,0);
This changes the default value for the minimum display count from 3, to 0; effectively forcing the count box to always be displayed.
Finally, update the script reference in your code to use your local copy like in the code below.
<a name="fb_share"
type="box_count"
share_url="http://my-domain/my-page-to-share"
href="http://www.facebook.com/sharer.php">Share</a>
<script
src="http://my-domain/scripts/FB.Share.js"
type="text/javascript">
</script>
For those of you using ASP.NET 4, you will gain better performance if you allow the asp:ScriptManager control to efficiently manage downloading of all javascript files; this will greatly improve your site’s responsiveness.
For example, create a custom script manager control and include it in your site’s master page file:
<asp:ScriptManager ID="ScriptManager1" EnableCdn="true" EnablePartialRendering="true" LoadScriptsBeforeUI="true" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/FB.Share.js" />
</Scripts>
</asp:ScriptManager>
The only thing to be careful of is that you are using a static copy of the Facebook javascript file and you won’t get the benefit of automatic updates so you’ll have to manage those manually until Facebook fixes their script.
Please leave a comment and share this with your friends if you found this useful.
Cheers!
###
