Saturday, July 31, 2010

How to add Facebook Recommend and Like button on Blogger

Well, I'm a bit left behind regards to this article but either way I'm writing this article after a few research and try and error on this blog and finally I managed to came out something like you've seen the button positioning.

It just how to arrange it and play around with the CSS positioning. Lets us begins with the codes to be embedded.

First, you need to go to your Dashboard > Design > Edit HTML. Then using your browser search tool (Ctrl + f / Command + f), and search for this tag:

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

or

<data:post.body/>

then, paste these codes just after it.

<div style='float:left;margin-right:10px;padding:1px 0;'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>  
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<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=recommend&amp;font=lucida+grande&amp;colorscheme=light&
quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:250px; 
height:40px;float:left;'/>

<div style='clear:both;'/>


You could do some changes on the settings, like:


  1. layout=standard to layout=button_count
  2. show_faces=false to show_faces=true
  3. action=like to action=recommend
  4. color_scheme=light to color_scheme=dark
Well, wallah!!! You have Facebook Recommend / Like button on your page. So for further reading, you could have a look at these site:


No comments:

Post a Comment