Add Facebook Like Button To Blogger


This tutorial will show you how to add a Facebook Like button to each blog post in Blogger. Clicking this button will like the containing post. It should work on all pages -home page, individual/post page or any other pages.
The Like button lets your readershare your content with his/her friends on Facebook. When clicked, a story appears in his/her friends' News Feed with a link back to your blog.
facebook like button
Now let us proceed:
  1. Go to Template > Edit HTML > Proceed (old interface: 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:
    1<data:post.body/>
  5. Paste the Facebook button code immediately below (after) it:
    view sourceprint?
    1<!-- Facebook Like button Start -->
    2<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    3<div style='float:left;padding:5px 5px 5px 0;'>
    4<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:440px; height:35px;'/>
    5</div>
    6</b:if>
    7<!-- Facebook Like button End -->
  6. Configure button
    Choose the type of button and set the appropriate width and height by changing the values of query parameters in line 4.
    Like button typeQueryValueWidth & Height
     standard like buttonlayoutstandard
    W: 450px
    H: 35px (80px w photos)
    facebook like button countbutton_count
    W: 90px
    H: 20px
    facebook like box countbox_count
    W:55px
    H: 65px
    standard like button darkcolorschemedark
    n.a.
    standard like button recommendactionrecommend
    n.a.
  7. 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 display the button on static pages, remove the conditional tag -code line 2 and 6.
  8. Preview, you should see the button appear in each post.
  9. Click Save if you like what you see.
  10. Enjoy!

No comments:

Post a Comment