Friday, December 24, 2010

Facebook Like on Blogger


Add facebook "like" on every post of your blogger blog


Where-ever you go today, you see facebook! Even, it might happen that, you have gone to market to buy some fish, and you see here and there, "Like"s are hanging aroung... People today are too much eager to be "Like"d on facebook or "Follow"ed on twitter. However, this is actually an experiment with blogger widget template, who cares if anyone likes or not on facebook. So, lets start.
If you look around on google, you will see many tutorials for this... however, here is the summery and some more detailed view.

Button Code: This is pretty much the button code:

<iframe
allowTransparency='true' frameborder='0' scrolling='no'
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=500&amp;height=35&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;'
style='border:none; overflow:hidden; width:500px; height:35px;'
/>

Customizing the button: There is nothing much to customize, however, the options are shown below:
If you look closely the expr:src tag, you will see the parameters, you can customize. These are:




















































layout=standard show_faces=false action=like font=arial colorscheme=light
standard false like arial light
button_count true recommend lucida+grande evil
box_count     segoe+ui dark
      tahoma  
      trebuchet+ms  
      verdana  

Placing the button: Go to "Design" from your dashboard and click on "Edit Html". Then you can see the template code of your blog. Check the "Expand Widget Templates". Now, before proceeding anymore, first take a backup of your template so that if anything happens, you can again revert it.
In your template, find the line:
<div class='post-header-line-1'/>

Then you can paste the above code (or modified one according to the above table). Then the "Like" button will appear just below the post header of every post.
Now, if you like to add it in/after post body, the next section is for you which looks like:
<div class='post-body entry-content'>

Or you can also scroll down to next section which looks like
<div class='post-footer'>
If you want to put it in footer of the post.

Preview: So, by exploring the template, you can put it anywhere... but, make sure you keep backup version of every working template.
Have fun and see the preview below when the above code is used in
<div class='post-body entry-content'>
after the
<data:post.body/>
Have fun!

2 comments:

  1. Ever give a thought about a custom printing button ?? I mean not the code part but the entire post will be printable ??

    ReplyDelete
  2. ahh, thanks, I was getting bored and you have just given me something to work on. I always publish the entire post within a div tag, so I think it will not be hard, I am working on it... :D

    ReplyDelete