How to Add a Facebook Share Button to Blogger Posts

By: | Updated: January 31, 2021

Our website is supported by our users. We sometimes earn affiliate links when you click through the affiliate links on our website.

Allowing others to easily share your content on social media is something that is always important. Thankfully, many of the services we use for our online promotion have social sharing buttons that we can implement into our websites. Adding a Facebook Share button to Blogger is a little different than some other sites because we want the button to automatically insert the URL of the page the visitor is currently on, or the post they want to share, without having to update this link manually.

Adding a Share button to your blog’s template will ensure that it stays in place at the bottom of every post, and with the code below, the link will be automatically inserted into the button.

Let’s get started

Login to your Blogger account and backup your template in case something goes wrong. You can do this by clicking the Backup/Restore button in the top corner and saving the file to your computer.

Go to Template > Edit HTML.

Click inside the editor text area and press CTRL + F (or CMD + F if you’re on a Mac) to open up the “find” search box in the top right corner.

In the search box, paste this code and press enter:

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

It should find one instance of it, but that will be for mobile view. Press enter again to skip to the second instance of it instead. This is your normal blog view.

Directly above that line of code, paste this code:

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

If you want it to appear at the top of your post instead, jump back to the top of the editor and search for the SECOND instance of:

<data:post.body/>

Insert the code above that.

Choosing the button type

Facebook has 6 types of buttons that you can choose from. You can see them here in the “Layout” dropdown. In the “BUTTON-TYPE” part of the code above, enter one of the following as shown:

  • box_count
  • button_count
  • button
  • icon_link
  • icon
  • link

Save your template

The script will not appear in Preview mode, so save your template and check your live blog for your new Share button!

by Brett Helling
Brett has been starting, growing, and monetizing websites since 2014. While in college, he began to learn about digital marketing. After graduating, he continued to build a diverse portfolio of websites while working a full time job. After years of building the portfolio on the side, he made the jump to run his websites full time.