Add a Facebook share button to every post on Blogger blog

Facebook logoThe new Facebook Share button let your blog posts to be shared on Facebook. Sharing your articles on websites like Facebook can bring lot of genuine traffic to your blog.

You can encourage your readers to share your articles on Facebook by adding a Facebook share button on your blog. A user can click that button and share the article details on their Facebook profile which can be viewed by their friends.

The button also shows real-time count of how many times your article has been shared throughout Facebook. This button is just similar to Tweetmeme button for Twitter and it has two styles of Sharing buttons as Tweetmeme button.

Demo










Normal button
Compact button

Adding a Facebook share counter on Blogger


First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'download full template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML and check the "Expand Widget Templates" option.
2. Press CTRL+F to find the code which looks like <data:post.body/>
3. Copy the below code

<!--FACEBOOOK SHARE BUTTON BEGINS-->
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
<!--FACEBOOOK SHARE BUTTON ENDS-->


4. Paste it on top of <data:post.body/> this code.
5. Preview your template and if everything works fine, then save it.

Compact Button


Facebook also offer a compact version of the share button, with the same options as the larger button. For the compact button, use the following code instead of the above.

<!--FACEBOOOK SHARE COMPACT BUTTON BEGINS-->
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
<!--FACEBOOOK SHARE COMPACT BUTTON ENDS-->


Now you can see a Facebook share button to the next of your post paragraph.

{ 3 comments }

Yogi, Wednesday, September 29, 2010

How do I add a like button of FB on my blog...??

Can you please create a post for this as well?

Sohail Viruss Khan, Wednesday, February 16, 2011

Nice :-) I thought that its a facebook like button but anywayz its g00d :-)

Yusmi, Saturday, August 13, 2011

nice post...

We'd love to hear from you — Leave us a comment!