Multiple ways of how to add facebook like button to your blog blogger (blogspot)

learn how to add facebook like button to your blog blogger (blogspot) in multiple ways and the easy ways.

The first way

how to add a simple button like to your blog ? 

By following these steps

• Sign in to your Blogger > Dashboard > your blog’s Design > Edit HTML

• check “Expand Widget Templates

• save the template your blog

•  Find this line of code inside the template box (Click on the key f3 ).

<data:post.body/>

• just after this line past the facebook like code (next code)

• if you want the button in all pages except the home page 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &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:40px;'/>
</b:if>

• if you want the button in the home page 

<b:if cond='data:blog.url == data:blog.homepageUrl'>



<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &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:40px;'/>

</b:if>

code for add button like and send 

• If you want to make it appear on your homepage as well

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding: 10px 0px 0px 0px;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
</div>
</b:if>

code for add Facebook like button with Button Count 

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

code for Facebook like button Box Count

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

second way

Add FaceBook Like Button For Blogger

• Go To Blogger > Design > Edit HTML

• Backup your template

• Click the "Expand Widgets Templates" Box

• and find the next code 

<div class='post-header-line-1'/>

•     Just above it paste the code below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &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:40px;'/>
</b:if>

save the template .

 تم النشر يوم  الخميس، 11 يوليو 2013 ' الساعة  11:21 م

Facebook Twitter Google+ Linkedin Digg Print