How To Add Facebook Like Button to Blogger (Blogspot)

Sunday, October 06, 2013

The Facebook like button is probably the most important and the most used social button on the world wide web today. With its recent upgrade (Facebook sort of merged it with the share to Facebook button, so liking a web page or content you just found would automatically be posted/shared on your Facebook wall, instead of just the normal you liked this __ link wall status), it became a more powerful tool for sharing content. So why not add it to your blogger blogs. It’s simple. Here’s how:

UPDATE (May 05, 2011): The Send button is now added next to the Like button (standard button only). The Send button allows your users to easily share your content and send a short private message to the people that would be most interested or to the group wall of any Facebook group they are member of. It also allows your users to send your content as an email to any email address.

Click here for more Blogger Widgets and Blogger Tips

The Code:

Here’s the code for the standard Facebook like button.

NOTE: This will display the like button on post pages only.

1

2

3

4

5

<b:if cond='data:blog.pageType == &quot;item&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>

Installation:

STEP 1: Sign in to your Blogger > Dashboard > your blog’s Design > Edit HTML, and check “Expand Widget Templates”

Backup. It is always a good idea to back your template before making any changes to it. To save a copy, click the “Download Full Template” under Backup / Restore Template. Save it in a folder on your computer.
STEP 2: Find this line of code inside the template box:

<data:post.body/>

Quick Search. Use the Search or Find feature of your browser. Just press Crtl+F (or Command+F) and paste <data:post.body/> in the find box then press enter. It will take you to that line instantly.

STEP 3:…Then paste the Facebook like button code just right below that line, so that it would look like this:

1

2

3

4

5

6

7

<data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&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>

Click SAVE TEMPLATE. That’s it!

Like and Send Button DEMO

Like me!

How to make it appear on the homepage

If you want to make it appear on your homepage as well, use this code instead:

NOTE: This will display the like and send buttons (standard) on the homepage andpost pages only.

1

2

3

4

5

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

Other layout options

The Facebook like button comes in 3 layout styles: standard (above), button count and box count. Here are the codes for the other 2 layout styles. Installation: Follow steps 1 and 2 above. Then follow step 3 but use any of the two codes below:

Facebook like button with Button Count

NOTE: This will display the like button on the homepage and post pages only.

?http://technobraker.blogspot.in/2013/10/the-facebook-like-button-is-probably.html

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

Facebook like button Box Count