How to Add a Facebook Share Button to Blogger

There is an easy way to add a Facebook Share Button to your Blogger blog (Blogspot blog) and have your readers share your articles on Facebook. Putting a Facebook share button onto a Blogger blog only takes a few minutes and is worth the time investment to improve the exposure of your blog. In this Blogger Tutorial I discuss the 3 different ways to put a Facebook Share button or icons on a Blogger blog from using Blogger built-in Share Buttons feature to hard coding a Facebook share button manually for greater flexibility.

Last Update: Updated 26 February 2022

Why Add a Facebook Share Button to Blogger

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 Dedicated Facebook Share Buttons described in Method 3 allows a visitor to add a personalized message to a link to a blog post they want to share before sharing on their timeline, in groups, or to their friends via a Facebook Message.

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

How to Add a Facebook Share Button to Blogger

Method 1 - Add a Facebook Share Button Using Blogger Built-in Share Buttons

The following method will reactivate disabled Blogger share buttons which have Facebook share capabilities. IFor older templates the share buttons are added at the foot of posts. In newer Blogger themes share links are added to posts usually near the top of the page.

1. Sign in to Blogger
2. At the Dashboard go to Layout
3. Find the Main Section sometimes called Post Body Section or something similar
4. Choose the Blog Posts Gadget
5. Choose Edit or the pencil icon on the right-hand side of the gadget





6. In the dialog box that appears scroll down until you see Show Share Buttons
7. Toggle the switch to the on position. When turned on the switch is green
8. Click Save





9. Click on View Blog to see a bank of buttons (typically in older templates Email This, Blog This, Twitter, Facebook and Pinterest has been added to the blog post footer area. Newer Blogger themes like Notable will have a link icon on the homepage at the foot of the post snippet and a link at the foot of the post which when clicked on will reveal links to Facebook, Pinterest, Twitter and Email.
   
   

Method 2 - Add a Facebook Share Button on Blogger (Blogspot) Using a HTML gadget

This method involves copying and pasting Facebook Share Button code into an HTML/Javascript gadget. It is possible to add it above and below blog posts but placement is problematic which is why I recommend hard coding into your Blogger template as you can then control the exact placement.

Another option if you don't want to hard code is to go a free social bookmarking service like AddThis or ShareThis and add a bank of social sharing buttons similar to what you see on the left side of this blog post. These services provide a range of placement options and only require a bit of code to be added to Blogger via a widget.

Method 3 - Steps to Put a Facebook Share Button on Blogger (Blogspot) Under the Blog Post Title (Hard-Code Method)

Facebook offers 2 different Facebook Share Button sizes to choose from: a large button and a small button. There are also three different layouts options: Button, Button Count and Box Count.

The following codes will place the Facebook Share Button just under the post title on the post page only. 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>

It is strongly advised that you back up (Theme >> Customize Down Arrow >> Backup) before changing your Blogger template.

1. Login to Blogger
2. At the Dashboard go to Theme and then click on the down arrow on the Customize Tab and select Edit HTML. Make sure you have backed up your template first (by clicking on Back up_ before proceeding
3. Click in the template code and then CTRL + F on a PC and (CMD + F on a Mac) to bring up the search box on a PC or
4. Enter this term in the search box and find this code: <data:post.body/>
5. Click enter in the search box to find the second incidence of this code of the following code block:
   
   

   <div class='post-header'/>
   <div class='post-header-line-1'/>
   <data:post.body/>
   

   
   The code goes immediately below the line:
   
   <div class='post-header-line-1'/>
   
   and before:
   
   <data:post.body/>
   
   Therefore the code goes in between the two lines as demonstrated below. If you find there is other code then make sure the code you paste in goes immediately below this line:
   
   <div class='post-header-line-1'/>
   
   You are wanting to achieve the following code placement:

   <div class='post-header'/>
   <div class='post-header-line-1'/>
   Facebook code goes here
   <data:post.body/>
   

   
   
   

   Please Note
   The picture of the Facebook Share Buttons in the following examples show the old style buttons but the code will insert new style buttons as pictured above in six different Facebook buttons to add to Blogger.
   
   The following examples show the box count option.
   If you want just the Facebook Share Button with no count then change the type to:
   from type='box_count' to type='button'
   
   If you want the Facebook Button Count Share Buttons then change the type as follows:
   from type='box_count' to type='button_count'
   
   

   
   
   Large Facebook Share Button (right aligned)
   
   
   
   <!-- Facebook Share Button -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right;padding:4px;'>
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v13.0" nonce="EAQ6pQXK"></script> <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
</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='https://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div></b:if>
<!-- End Facebook Share Button -->
   
   
   Small 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='https://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div></b:if>
<!-- End Facebook Share Button -->
   
   
   Small 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='https://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

Method 4 - How to Put a Facebook Share Button in the Blogger Post Footer (Hard Code Method)

In this method you will learn how to put a Facebook Share Button at the foot of a Blogger Post.

1. Login to Blogger
2. From the Dashboard click Theme
3. Choose Backup to download a copy of your blog template before you make any changes (Strongly Advised)
4. Choose Edit HTML from the dropdown menu
5. Click inside the template and then CTRL + F (PC) or CMD + F for (Mac)
6. Search for the following:

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


7. Place the following code immediately above this line


<!-- Facebook Share Button -->
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script src='https://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

<!-- End Facebook Share Button -->


8. Click Save
9. View blog and admire your new Facebook Share Button at the foot of your Blogger posts

Summary

Today you have learned how to add a Facebook Share Button to your Blogger blog using three different ways. The Facebook Share Button will allow your readers to share your content which will attract new visitors to your blog. Adding a Facebook Share Button to your post pages only takes a few minutes.

Related Links

Add a Follow Me Twitter Icon Button to Blogger
How to Remove the Blogger Navbar
How to Change the Color of the Blogger Navbar
How to Increase the Image Size in a Blogger Blogspot Blog
How to Add a Print Friendly Button to Blogger
How to Change the Date of a Blogger Post
How to Remove Blogger Labels Counter
Make Money From Affiliate Banner Ads and Links with Blogger
How to Get More Adsense Clicks with Blogger
Easy Ways to Put Banners on Blogger




Subscribe to Blogspot Blogger Guide by Email