Add Facebook Connect to Your Blog in 6 Minutes Add Facebook Connect to Your Blog in 6 Minutes

Berdasarkan Breaking Change: JavaScript SDK to oauth:true on December 13th,

FB.init({appId:YOUR_APP_ID, status:true, cookie:true, xfbml:true, oauth:true});



Perubahan berpengaruh ke CALLBACK dari API:

session.uid menjadi authResponse.userID

session.access_token menjadi authResponse.accessToken

session menjadi authResponse


FB.login(tulisDitelLoginAing,{perms: ...

menjadi..

FB.login(tulisDitelLoginAing,{scope: ...

Ini script standard yang biasa gw pake diBlog.

Yang paling penting dari Connect Facebook ke blog yaitu
Setting Site Domain Applikasi facebook ke blogspot.com


Yang perlu lo rubah dari Script dibawah, cuman..
var idAplikasi = '178951672213578';
Sisanya terserah ..

CSS

<style type="text/css"><!--
.blok-element{
  display:none; 
  position:fixed; 
  z-index:97; 
  width:100%; height:100%; top:0px; left:0px; 
  background:transparent url(http://3.bp.blogspot.com/_bBL9ze_JZsw/TULZLR21ZxI/AAAAAAAAANM/AR5zmvKZrPc/s1600/white25.png) repeat scroll top left; 
  cursor:pointer;
}
.blok-element-dalem{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYVpWL1Uw6kPoqyCJkPJ070pLI4wafJnYx0PK_l-xoI1PgbM4S9RZDeKVOGur6QqzExCpqV94V76DeFCfI-JNSj5BHUHmkevmNnzBgnefSRWNioDFuXlgQB7Xxt7_FZHJU13sL2nShzls/s1600/punk-boy.png) no-repeat scroll bottom right; 
  position:relative; 
  z-index:99; 
  width:100%; height:100%; 
}
--></style>

Block Element

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYVpWL1Uw6kPoqyCJkPJ070pLI4wafJnYx0PK_l-xoI1PgbM4S9RZDeKVOGur6QqzExCpqV94V76DeFCfI-JNSj5BHUHmkevmNnzBgnefSRWNioDFuXlgQB7Xxt7_FZHJU13sL2nShzls/s1600/punk-boy.png" style="display:none;"/>

<script type="text/javascript">

<!--
//jaga-jaga kalo elements gak ada..
  if(!document.getElementById('fb-root')){
    document.write('<div id="fb-root"></div>');
  }
  if(!document.getElementById('facebook-propic')){
    document.write('<img id="facebook-propic" src="" style="display:none;"/>');
  }
  if(!document.getElementById('block-login-aing')){
    document.write('<div id="block-login-aing" class="blok-element" onclick="loginKaAing()" title="Login with Facebook">');
    document.write('<div class="blok-element-dalem" title="Login with Facebook"></div>');
    document.write('</div>');
  }

//Global Variable..
  var idAplikasi = '178951672213578';
  var idUserYgLogin = '';

  var blokLoginElment = document.getElementById('block-login-aing');
  var tempatGambarPropil = document.getElementById('facebook-propic');
//-->
</script>

Functions

<script type="text/javascript">
<!--
function loadAplikasiAing(appid){
  window.fbAsyncInit = function() {
    FB.init({appId: appid, status: true, cookie: true, xfbml: true, oauth: true});
    var getLoginGagal = setTimeout("titahLoginHeula()",30000);

    FB.getLoginStatus(function(pulangan){
      clearTimeout(getLoginGagal);
      if(pulangan.authResponse && pulangan.authResponse.userID){
        idUserYgLogin = pulangan.authResponse.userID;
      }else{
        titahLoginHeula();
      }
      tulisDitelLoginAing(pulangan);
    });
  };
  (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);
  }());
}

function titahLoginHeula(){
  blokLoginElment.style.display='block';
}

function loginKaAing(){
  FB.login(tulisDitelLoginAing,{scope:'status_update,user_status,friends_status,read_stream,publish_stream,share_item,publish_actions'});
}

function tulisDitelLoginAing(tahMere){
  if(tahMere.authResponse){
    if(tahMere.authResponse.userID){
      idUserYgLogin = tahMere.authResponse.userID;
      tempatGambarPropil.src='http://graph.facebook.com/'+tahMere.authResponse.userID+'/picture?type=large';
    }
  }
  if(tahMere.status){
    if(tahMere.status=='connected'){
      blokLoginElment.style.display='none';

//execute scripts setelah sesi connect facebook selesai..
      nextSript();
    }
  }
}

function nextSript(){
//execute scripts setelah sesi connect facebook selesai..
  if(typeof postScript != 'undefined'){postScript()}
}

loadAplikasiAing(idAplikasi);
//-->
</script>

Wanna Cry?!,, eh,, Wanna Try?!

Insert your application ID:
loadAplikasiAing('178951672213578')

Soal //execute scripts setelah sesi connect facebook selesai..

Semua script yang ada di blog ini yang berhubungan sama Facebook, semuanya cuman bisa jalan kalo Connect facebook udah selesai diLoad.

jadi seperti yang bisa lo liat diatas, ada function nextSript() yang didalemnya nge-trigg (istilah gw, jangan diikutin :P) atau manggil function postScript() Kalo emang ada function postScript-nya

misal gw punya script kaya gini..

<center>
<embed id="peuler" wmode="transparent" src="" quality="high" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" height="20"></embed>
</center>
<script type="text/javascript">
<!--
function postScript(){
  document.getElementById('peuler').src = 'http://beemp3.com/player/player.swf?soundFile=http://irland.heck.in/files/cokelat-dilema.mp3&autostart=yes&loop=yes';
}
//-->
</script>

Maka setelah Script connect facebook selesai nge-Load,, baru music bakalan diPlay (function postScript() diPanggil).