How to create a Facebook Share button with counter

So Facebook is focusing more on Like these days and adding some of the features previously dedicated to Share. That doesn’t mean Share doesn’t work anymore however, and because of the ability it gives you to target where content goes (your wall, your friend’s wall or a group of friends) it can be very useful.

If you’re trying to get Share working properly and coming up short this code should be a starting place and hopefully help you get the share button working along with the little counter bubble that shows how many times the item has been shared.

Example Code (replace the st_url, st_title and background-image url with your site):

<!– Facebook share button Start –>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<div style=’float:left;padding:5px 5px 5px 0;’><a expr:share_url=’data:post.url’ href=’http://www.facebook.com/sharer.php’ name=’fb_share’ type=’button_count’>Share</a><script src=’http://static.ak.fbcdn.net/connect.php/js/FB.Share’ type=’text/javascript’></script>
</div>
</b:if>
<!– Facebook share button End –>

Output of the code from above:

 

So that’s it! You can also adjust the way that the button displays using the following parameters: box_count (for the big counter above the share button), button_count (for the small bubble conter next to share), button (no counter) or icon (small square f)

If you want to use multiple share buttons on a page, just replace the “data:post.url” with the URL of your choice including an anchor tag to that section of the page. For example share_url=”http://tutorialsave.com/facebook-share-with-counter/#offer1″