How to Add a Facebook Share Button to Blogger Posts
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!
:max_bytes(150000):strip_icc():format(webp)/Modo-Seguro-Windows10-56aa12af3df78cf772ac45f3.png)