Add Facebook Like Button To Blogger Posts

How To Add Facebook Like Button To Blogger Posts?

Go to Blogger Dashboard > Design > Edit HTML

First take a backup of your template

Tick  the expand widget check box

Find for below code in your template

<data:post.body/>

If you wish to add like button just below of post title the add the below code just before of<data:post.body/>




and if you wish to add this like button just below of your post then add below code justbelow of <data:post.body/>




Facebook Like Button Styles

You can add like button in three styles :

1. Vertical Count
2. Horizontal Count
3. Without Count

4. 1. Vertical Count

   
   
   

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

   2. Horizontal Count

   

   
   

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

   
   

   3. Without Count

   
   
   

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

   
   

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →