Add a Facebook Share Button to Blogger

By: Unknown on 5:29:00 م

Share it Please

Tweet

An easy way to have your readers share your articles on Facebook is to add a Facebook Share Button to your Blogger blog (Blogspot blog). It only takes a few minutes to put a Facebook Share Button on your Blogger blog. 

Sharing your content on Facebook is an excellent way to attract many more visitors to your Blogger blog. By adding a Facebook Share Button to Blogger you will allow your content to be shared with all the friends of your blog visitor through their Facebook account.

When a visitor to your blog clicks on the Facebook Share Button Facebook collects post details like your blog name, post title and the first few lines of the content including the images and other media. 

The Facebook Share Buttons look and act very similar to the Twitter Retweet buttons by Tweetmeme.

Steps to Put a Facebook Share Button on Blogger (Blogspot)

There are 2 different Facebook Share Button styles to choose from: a large button and a compact button. The following codes will place the Facebook Share Button at the top of the post only on the post page. If you wish to have the button appear on the homepage as well you will need to remove the if statement.

<b:if cond='data:blog.pageType == "item"'>

Facebook Share Button Code

</b:if>

1. Login to Blogger
2. At the Dashboard go to Layout >> Edit HTML
3. Check the Expand Widget Templates box on the right
4. Using CTRL + F find this code: <data:post.body/>
5. Copy and paste the following codes depending on your choice of Facebook Share Button style immediately before the line <data:post.body/> 
   
   
   Note: If you have trouble finding <data:post.body/> alternatively you can paste the code directly below: 
   <div class='post-header-line-1'/>
   
   
   Large Facebook Share Button (right aligned)
   
   
   
   <!-- Facebook Share Button -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;padding:4px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div></b:if>
<!-- End Facebook Share Button -->
   
   
   
   
   Large Facebook Share Button (left aligned)
   
   
   
   <!-- Facebook Share Button -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left;padding:4px;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div></b:if>
<!-- End Facebook Share Button -->
   
   
   
   
   Compact Facebook Share Button (right aligned)
   
   
   
   <!-- Facebook Share Button -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;padding:4px;'>
<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></b:if>
<!-- End Facebook Share Button -->
   
   
   
   
   Compact Facebook Share Button (left aligned)
   
   
   
   <!-- Facebook Share Button -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float:left;padding:4px;'>
<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></b:if>
<!-- End Facebook Share Button -->
   
   
6. Click Save
7. View a blog post to see your new Facebook Share Button in action