How to Add Facebook Share Button in Blogger/Blogspot Posts

How to Add Facebook Share Button in Blogger/Blogspot Posts

Social media sites like Facebook & Twitter could be great source of quality traffic for any blog. You can also add a Facebook share button in each of your posts. This button will allow users to quickly share a post on Facebook.

Steps to Add Facebook Share Button Below Post Title

To add Facebook share button below post title, simply follow these steps:

1. Back up your layout/template.
2. Go to Layout then Edit HTML tab.
3. Check Expand Widget Templates. The page will automatically refresh.
4. Now find this code:
   

   <data:post.body/>

5. Place the following code right before the code found in step 4:
   

   <!-- Facebook Button -->
   <div style='float: left; padding: 5px; '>
   <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
   <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
   </div>
   <!-- Facebook Button -->

   
   The result should look something like this:
   

   <!-- Facebook Button -->
   <div style='float: left; padding: 5px; '>
   <a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
   <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
   </div>
   <!-- Facebook Button -->
   <data:post.body/>

6. Click Preview button to see the result and then save your template.

Add Facebook Share Button Below Post Body

To place the Facebook share button under each post, you have to follow the exact steps given above but step 5 is a little changed.

5- Place the following code right below the code found in step 4:

<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

The result would look something like this:

<data:post.body/>
<!-- Facebook Button -->
<div style='float: left; padding: 5px; '>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='TYPE OF BUTTON'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Button -->

Button Modifications

You can also change the button type like adding a counter with the button. All you need is to replace TYPE OF BUTTONfrom the above code with:

button for a button like this:


button_count for a button like this:


box_count for a button like this:


icon for a button like this: