How to add Facebook Share button to Blogger Post

How to add Facebook Share button to Blogger Post
Nowadays social media like Facebook plays an important role to generate new traffic leads to our blog. It would be nice to add Facebook share button to Blogger Post so that our content can be easily share on the Facebook.

We'll be customizing our Blogger Template in order to add the Facebook share button automatically on the top or bottom of every single of our posts.

The visitors can then share the blog post on their Facebook by just hitting on the share button without have to do it manually.

Step 1:
Login to your Blogger account, and click on the Template link on the left
Blogger Template



Step 2:
From the Blogger Template, click on Edit HTML button.
Blogger Edit Html











Step 3:
To add Facebook share button on the bottom of Blogger post, click on the editor text area, and hit on Ctrl + F. This will open the find tool on your browser. Enter the following code on the search box:

 <div class='post-footer-line post-footer-line-1'>

It should return only one result for mobile view. Hit search again to skip to the second result for normal blog view. Paste the following codes above searched codes:

<div class="facebook-share">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>

Step 4:
If you would like to add Facebook share button on the top of the Blogger Post instead of bottom, click on the editor text area, and hit on Ctrl + F. This will open the find tool on your browser. Enter the following code on the search box:

<data:post.body/>

Find for the second result, and paste the Facebook share button codes above the searched codes.

Step 5:
Save your template.






Post a Comment