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.
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