Thursday, May 20, 2010

:: [ Tutorial ] Add the Facebook Like button in Blogger using iFrame or XFBML

Basically , there are two methods that are allowed by Facebook to add Like button  to your blog.

  1. If you prefer the basic Like button, you can use a simple iframe method. 
  2. If you prefer a fuller-featured Like button, it is available via the

    XFBML tag. This version enable users to add a comment to their like as it is posted back to Facebook.

1. Please back-up your template first before doing any changes.

2. To copy the code, just press Ctrl-A ( or highlight the code ) + Ctrl-C 
(Right-click is disabled in this blog )

iframe method
  1. Go to Layout  > Edit HTML
  2. Then, mark the Expand Widget Templates checkbox
  3. Press Ctrl-F, then find

  4. Then, paste this code  either before or after it

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <iframe allowTransparency='true' expr:src='&quot;; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Hint #1: Paste it before the code if you want to put the Like button at the top of your post entry,

Hint #2 : Paste it after the code if you want to put the Like button at the bottom of your post entry,

XFBML method
    First, you need to set up a new application via Facebook:

    1. Go to:

    2. Click on the + Set Up New Application button (at the top right of the page)

    3. Type your Application Name (example: Mysite-Name Likes) and select Agree, then click on Create Application

    4. Go to the Connect tab (on the left tabs-list)

    5. Enter your blog url with an ending slash in Connect URL
    6. You must enter this in the Base Domain field: , and click on Save Changes
    7. You will see your Application ID number

    Next , login to your blogger site

    8. Go to Layout > Edit HTML, and mark the Expand Widget Templates checkbox.

    9. Find:

    Copy this code

    then paste it between word expr' and tag >

    It should be like this :
    <html expr:dir='data:blog..............2005/gml/expr' xmlns:fb=''>

    10. Find

    Then, copy the following code and paste before it
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageTitle' property='og:title'/>
    <meta expr:content='data:blog.url' property='og:url'/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta expr:content='data:blog.homepageUrl' property='og:url'/>
    <meta content='MY-SITE-NAME' property='og:site_name'/>
    <meta content='' property='og:image'/>
    <meta content='YOUR-APP-ID' property='fb:app_id'/>
    <meta content='YOUR-FACEBOOK-PROFILE-ID' property='fb:admins'/>
    <meta content='article' property='og:type'/>


    Edit MY-SITE-NAME with the one you want to appear when a user likes a page.
    Edit http://google.../blogger_logo.gif with your blog logo, or remove the all tag if you don't want it.
    Edit YOUR-APP-ID with your application ID number.
    Edit YOUR-FACEBOOK-PROFILE-ID with your own facebook user profile ID. You can find your user profile ID at your profile page url address , e.g , then copy  the whole numbers.

    11. Find:

    Then, copy the following code and paste after it.
    <div id="fb-root"></div>
      window.fbAsyncInit = function() {
          appId  : 'YOUR APP ID',
          status : true, // check login status
          cookie : true, // enable cookies to allow the server to access the session
          xfbml  : true  // parse XFBML
      (function() {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//';
        e.async = true;

     Note: Edit YOUR APP ID with your Application ID number.

     12. Find: 

    Then, copy the following before it if you want to place the Like button between the title and body of post entry ( This blog, Being Coach Potato use this method)

    <div><fb:like expr:href='data:post.url'/><br/></div>

    or after it , if you want the Like button display after the post entry.

    13. Then, click on Save Template.

    Credit to :

    1 comment:

    wawan said...

    kalau yg guna [dot]com cane ek?