JavaScript Test Console

Kode JavaScript SDK Facebook

July 8, 2012 · by · in , ,

JavaScript SDK Facebook adalah skrip yang berguna untuk melakukan panggilan dari berbagai Facebook API, termasuk fitur dalam REST API, Graph API, dan Dialogs. JavaScript SDK Facebook juga merupakan mekanisme untuk melakukan render versi XFBML pada plugin sosial yang telah disediakan oleh Facebook, serta menghubungkan canvas halaman situs dengan Facebook.

Untuk menggunakan Kode JavaScript SDK Facebook ini, Anda membutuhkan sebuah App ID Facebook yang dapat diperoleh melalui halaman developer Facebook.

Berikut adalah beberapa Kode JavaScript SDK Facebook

Social Plugin Facebook JavaScript SDK

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=APP_ID_FACEBOOK";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Standar JavaScript SDK Facebook

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'APP_ID_FACEBOOK', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
 
    // Additional initialization code here
  };
 
  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Canvas Width JavaScript SDK Facebook

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function()
      {
        FB.init( {appId: 'APP_ID_FACEBOOK', status: true, cookie: true, xfbml: true} );
        alert( FB.Canvas.getPageInfo()["clientWidth"] );
 
      };
      (function() 
          {
            var e = document.createElement('script'); 
            e.async = true;
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            document.getElementById('fb-root').appendChild(e);
 
          }());
 
</script>

Send a FB request JavaScript SDK Facebook

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'APP_ID_FACEBOOK', // App ID
            channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
        });
 
        sendRequestToRecipients("USER_ID");
    };
 
    // Load the SDK Asynchronously
    (function(d){
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));
 
    function sendRequestToRecipients(user_id) {
        FB.ui({method: 'apprequests',
            message: 'My Great Request',
            to: user_id, 
        }, requestCallback);
    }
</script>

Anda bisa memodifikasi sendiri Kode JavaScript SDK Facebook tersebut sesuai dengan dokumentasi yang ada di http://developers.facebook.com/docs/reference/javascript/. Adapun tool yang bisa Anda gunakan untuk melihat tampilan Kode JavaScript SDK Facebook yaitu:

  • Facebook JavaScript Test Console http://developers.facebook.com/tools/console/
  • jsFiddle http://jsfiddle.net/
UPDATED - July 18, 2012
Tags:

Ikuti artikel JEVUSKA di Google+Facebook

comments