How To Add A Facebook Like Button to Blogger Posts

By: | Updated: February 21, 2021

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

Ah, yes, social media. It’s always important to provide your readers a way to promote your blog using social media – easy access to share and like your content.

In this post I will teach you how to easily add one of Facebook’s ever-so-popular “Like” buttons to each post on your Blogger blog. It’s really easy, follow along below.

How To Add A Facebook Like Button To Blogger

1. Go to your Blogger dashboard
2. Click on Template in the sidebar, then Edit HTML
3. Click inside of the text area and press CTRL + F (or CMD + F on a Mac) to open up the “Find” text box.
4. Inside the “find” box in the top right corner of the text area, enter this code and press enter TWICE. You want to work with the second instance of it:

<data:post.body/>

This code acts like the placeholder for all of your post content.

If you want to add your Like button to the top of your posts, add one of the following Facebook codes ABOVE this code.

If you want the Like button on the bottom of your posts, add it UNDER this code.

Copy this Facebook button code below for a Horizontal count style:

<br/><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>

Or, copy this code for a Vertical count style:

<br/><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/>

If you prefer it without the count, use this Standard code:

<br/><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>

Give it a try! As always, feedback is welcome below! You can also submit a topic suggestion through the Contact page at the top of the site!

Tip: We’d also suggest adding a YouTube Subscribe button to your blog as well.

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.