Home » , » How to Add Facebook share button with counter In Blogger

How to Add Facebook share button with counter In Blogger

This tutorial will show you how to add a Facebook share button to every blog post in Blogger. You will have an option whether to include a counter or not. The counter will show a live count of how many times a post has been shared -a way to gauge the post popularity.

This button (when clicked) will share the containing post. It will detect the correct post URL regardless of the type of page you are at -be it home page, individual/post page or any other pages.

There are Two ways to Get Facebook Share Button
1.  http://developers.facebook.com/docs/reference/plugins/like/
2. other way is Under Here :  < Source >

Follow These Steps :
Step1. Go to Dashboard > Design > Edit HTML.
Step2. Back up your template.
Step3. Tick the Expand Widget Templates check box on top right of the HTML window.
Step4. Find the following code in your HTML, this is the code for your post content:
<data:post.body/> 
Step5. Paste the Facebook button code immediately below (after) it:
<!-- Facebook share button Start -->
<b:if cond='data:blog.pageType != "static_page"'>
<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='box_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 -->
Step6. Configure button

Choose the type of button by replacing the value of type attribute (in line 4) with the corresponding code below.
FB button Code
fb share box count box_count
Share button count button_count
facebook share button button
facebook share icon icon
Note: The counter will only show up after the count reaches 3.
Step7. Button repositioning
The steps above positioned the button on bottom left of each post. You can change the positioning if you like:
-) Position it on top of post
Place the button code before (instead of after)
<data:post.body/> 
-) Position it on the right
Change the float in line 3 from left to right.
Step8. Displaying button on static pages

To also display the button in static pages, remove the conditional tag -code line 2 and 6.
Step9. Preview, you should see the button appear at the end each post.If you like what you see then Save.
Enjoy
Share this article :

+ comments + 1 comments

December 23, 2013 at 11:06 PM

It’s actually a great and helpful piece of information. I’m satisfied that you simply
shared this useful info with us. Please keep us up to date like this.
Thank you for sharing.
website design

Post a Comment