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

    <fb:like>
    XFBML tag. This version enable users to add a comment to their like as it is posted back to Facebook.
Note: 

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



    <data:post.body/>
  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;http://www.facebook.com/plugins/like.php?href=&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;'/>
    </b:if>

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: http://www.facebook.com/developers

    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: blogspot.com , 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:
    <html

    Copy this code
    xmlns:fb='http://www.facebook.com/2008/fbml

    then paste it between word expr' and tag >

    It should be like this :
    <html expr:dir='data:blog..............2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml'>


    10. Find
    </head>

    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'/>
    <b:else/>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta expr:content='data:blog.homepageUrl' property='og:url'/>
    </b:if>
    <meta content='MY-SITE-NAME' property='og:site_name'/>
    <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' 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'/>

    Note: 

    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 http://www.facebook.com/profile.php?id=123457890 , then copy  the whole numbers.

    11. Find:
    <body>

    Then, copy the following code and paste after it.
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          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 + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
      }());
    </script>

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

     12. Find: 
    <data:post.body/> 

    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 :  
    http://forum.developers.facebook.com/viewtopic.php?pid=227562 
    http://www.allblogtools.com/tricks-and-hacks/add-facebook-like-button-for-blogger-blogspot-and-customize-it/

    1 comment:

    wawan said...

    kalau yg guna [dot]com cane ek?