Skip to main content

How To: Add Facebook Like Button On Your Blogger Blog

facebook-like-tumb
Now You Can Easily Add Facebook Like Button On Your Blogger Blog. In This Post, I
Will Show You The Way To Install The Facebook Like Button On Your Blog.
Follow These Procedures:
  1. Go to Dashboard > Design > Edit HTML.
  2. Back up your template.
  3. Tick the  Expand Widget Templates check box on top right of the HTML window.
  4. Find the following code in your HTML, this is the code for your post content:
    <data:post.body/>
  5. Paste the Facebook button code immediately below (after) it:
    <!-- Facebook Like button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div style='float:left;padding:5px 5px 5px 0;'>
    <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=450&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
    </div>
    </b:if>
    <!-- Facebook Like button End -->
  6. Configure button Choose the type of button by changing the value of query parameters in line 4.
     

  7. Like button type Query Value
     standard like button layout standard
    facebook count like button layout button_count
    standard like button dark colorscheme dark
    standard like button recommend action recommend
  8. Button repositioning
    The steps above positioned the button on bottom left of each post. You can change the position if you wish:
    • Position it on top of post
      Place the button code before <data:post.body/>, instead of after.
    • Position it on the right
      Change the float in line 3 from left to right.
    • To also display the button in static pages, remove the conditional tag -code line 1 and 6.
  9. Preview, you should see the button appear in each post.
  10. Click Save if you like what you see.
  11. Done!


Popular posts from this blog

Something More About Nexus One

In A Previous Post, I Have Mentioned About " Nexus One " Mobile Phones. But You May Not Got A Detailed Review On It. Therefore I'm Going To Show You A 10 Min Review On Nexus One, So Enjoy The Video. alsoread: Cool Applications For Your Android Device

25+ Link Shortening Services

In This Post I Am Providing Some Of The Good Link Shortening Services Available On The Net. You Can Use These Services For Compressing Your Ugly URL's Into A Small And Good Looking Ones So That You Can Share It Online. alsoread: 10 Reason - Why PC Crashes?

Sachin Tendulkar's Twitter Account

Sachin Tendulkar Has Started Tweeting Since Yesterday, Now We Can Caught The Updates Of The Little Master Via Twitter.