How To Add A Facebook Like Button to Blogger Posts
Yes, social media. It’s always important to provide your readers with 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:
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:
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='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' 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='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=box_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' 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='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' 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!
Comments
Post a Comment