13 June 2016

How To Add A Facebook Like Button to Blogger Posts


Add-facebook-like-button-blogger

Adding a Facebook Like button to your Blogger website lets readers share your content with their Facebook friends. Clicking the Like button posts a link to your blog post on the visitor’s Facebook wall and news feed. Blogger doesn’t offer a Facebook Like button widget, but you can add the Like feature to each blog post by pasting the Like button code into your blog’s template.

Add A Facebook Like Button to Blogger Posts

Step 1. Go to your Blogger dashboard

Step 2. Click on Template in the sidebar, then Edit HTML

Step 3. Click inside of the text area and press CTRL + F (or CMD + F on a Mac) to open up the “Find” text box.
 

Step 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/>

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;'/>

Step 6.  click “Save Template.

Bottom Line

   Adding the Facebook Like button code to the template adds the button to all existing blogs posts in addition to new posts when you create them.
    

  Before saving the template, click the "Preview" button to check how the Facebook Like button displays on your posts.

Read Also:
How to Add Floating Social Media Sharing Buttons to Blogger
,

1 comment:

  1. If you have experience of using Facebook, then you will want to know all
    about this. I have just come across a company that is actively hiring
    experienced Facebook users. You can get paid great money doing this, too.
    Check out all the details here…it’s well worth a
    look: https://socialsalerep.com?hyden4475

    ReplyDelete