Friday, April 29, 2011

How To Add Facebook Like Button To Blogger

Facebook is so dominant right now that all of us bloggers should add their Facebook propriety "like" button to our blogs. Even Google has to acknowledge Facebook astronomical rise in a virtual playground once ruled by Google themselves. Google has a lot of work to be done before they can even match Facebook's popularity amongst the netizens with their new +1 service. This post is created to share with you guys how you can add Facebook Like button to each of your blog post. It is very important that you integrate this Facebook like button to make your blog more "transparent" and social.

Photobucket
All blogs should have Facebook Like button.

You may ask, "Why should I stuff Facebook Like button to my beautiful blog?"  Well...if your blog is just a normal, private blog which you don't wish to let the whole world know...or if you are a social networking recluse, then yeah...you don't have to read on. But if you wish to increase your blog traffic and be more visible in the internet...you definitely has got to have Facebook Like button. For those uninitiated, Facebook Like Button is just one of the handful of Social Plugins that Facebook has rolled out recently. Altogether there are 10 different Social Plugins that Facebook is offering. However I believe the 2 most important ones are their Like and Send buttons.

Photobucket

Altogether there are 3 different styles of Facebook Like button. One is the rudimentary Like button without any count, and the other two comes with box count and button count respectively. On top of that you can choose whether you want to add the Facebook Send button alongside your Facebook Like button. IMHO it is recommended that you add the Send button as it allows you to send your post directly to your selected friends. Meaning that it will be sent and posted onto their walls. So are you ready to make your blogs more Facebook Like-able?

Standard Facebook Like Button For Blogger
Step 1: Go to your blogger Dashboard-->Design-->Edit HTML and check "Expand Widget Templates"
Step 2: Find <data:post.body/> or <div class='post-body entry-content'> and immediately after it add the following script:

<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;send=true&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>

If you just want the Like and not the Send button, then your code will be:

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


Facebook Like Button With Box Counter For Blogger
Follow step 1 and 2 as mentioned above and paste the following script:

<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;send=true&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=85&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:85px;'/>

</b:if>

Again, if you just want the Like button and not the Send button, then your should paste this code:

<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;send=false&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;'/>

</b:if>

Facebook Like Button With Button Counter
Follow step 1 and 2 again and paste the following script:

<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;send=true&amp;layout=button_count&amp;show_faces=false&amp;width=150&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:150px; height:21px;'/>

</b:if>
If you just want the Like button and not the Send button, use the following code:
<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;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>

How To Customize Your Facebook Like Button
I'm sure you have noticed that some of the codes are coloured green right? You can actually changed your Facebook Like button's so-called "properties" by changing the green codes. For example, if you want to change the style of your font, then locate font=arial and change it into one of the font styles below:

  • font=lucida%2Bgrande
  • font=segoe%2Bui
  • font=tahoma
  • font=trebuchet%2Bms
  • font=verdana

Beside the styling of the font you can also change:

  • The color by changing colorscheme=light to colorscheme=dark
  • The width and height of your Like Button as shown above.
  • You can also change the default "Like" word to "Recommended" by making changes from action=like to action=recommend
  • You can also disable your Send option by changing send=true to send=false.

Well there you have it folks, how to add the must-have Facebook Like button to your blogger. Remember Facebook Like button is not just a luxury anymore; it is a necessity for you to strive and survive in the blogosphere. It's either you adapt or you will be left behind in this ever-evolving virtual world where social media rules. It is time for you and your blog to be more Like-able. Hopefully more people will know how to add Facebook Like button to their blog.

*Pst! Pst* Don't forget to like my blog and post ok. :p
Photobucket
Give all your blog posts a Facebook Like button. Ha :D

About Tekkaus
Tekkaus is the founder and editor of Tekkaus and World Lense. I am a lifestyle blogger who write just about anything, emphasizing on blogging tips, social media, gadgets, music, my family and more. Learn more about me here. Subscribe to my feed and my facebook page. Do connect with me on Twitter

 

Blog Archive

Get Email Updates

Enter your email address:

Delivered by FeedBurner

The Man Behind Tekkaus

Tekkaus
My name is Christopher aka Tekkaus and I am a part-time blogger. I am passionate about blogging and social media. I love to share just about anything that grasp my attention or yours. Come join me. Read more about me-the author, about this blog or you can contact me.

Control Panel

Tekkaus Copyright © 2007-2016 Tekkaus.com