How To Load Facebook Friends On Your Blog How To Load Facebook Friends On Your Blog

Wednesday, June 20, 2012

How to Load Facebook's frends on your Blog

First:
Load JavaScript SDK on your Blog and then.. OMG yaY it's done! XD

<div id="fb-root"></div>
<div id="daptar-pren"></div>

<script>
  //Loading SDK
  window.fbAsyncInit = function() {
    FB.init({appId: '264887889270', status: true, cookie: true, xfbml: true});
    //Manggil function lodPren(dari 0, sampai 10) after loaded

    lodPren(0,10);
  };
  (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 lodPren(dari,sampai)
  var dptrFrn;
  function lodPren(dr,smp){
    //Nampilin gambar loading
    document.getElementById('daptar-pren').innerHTML='<center><img src="http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/GsNJNwuI-UM.gif"/></center>';
    //manggil http://graph.facebook.com/me/friends
    FB.api('/me/friends', function(response) {
      if(response.data){
        //Bikin Array daftar friends

        dptrFrn=[];
        for(x in response.data){if(response.data[x].id && response.data[x].name){dptrFrn[x]=response.data[x].id+'_nm:'+response.data[x].name}}
        dptrFrn = dptrFrn.sort(function() {return 0.5 - Math.random()});
        tlsPren(dr,smp);
      }else{
        //Nampilin tombol login
        document.getElementById('daptar-pren').innerHTML='<a class="uiButton" onClick="suruhLoginDulu()" style="cursor:pointer;">Login dong coy :P (Click Gw!)</a><br/>';
        //Nampilin message error
        for(x in response){
          if(response[x]=='[object Object]'){
            document.getElementById('daptar-pren').innerHTML+='<b>'+x+':</b><br/>';
            for(y in response[x]){
              document.getElementById('daptar-pren').innerHTML+='&nbsp;&nbsp;<b>'+y+':</b> '+response[x][y]+'<br/>';
            }
          }else{
            document.getElementById('daptar-pren').innerHTML+='<b>'+x+':</b><br/>&nbsp;&nbsp;'+response[x]+'<br/>';
          }
        }
      }
    });
  }

  //Nampilin hasil Array daftar fiends

  function tlsPren(dr,smp){
    document.getElementById('daptar-pren').innerHTML='<hr/><h3 style="font-weight:normal; text-align:center;"><b>'+(dr+1)+'</b> to <b>'+smp+'</b> of <b>'+dptrFrn.length+'</b> Friends</h3><hr/>';
    if(smp>dptrFrn.length){smp=dptrFrn.length}
    if(dr<0){dr=0}
    for(x=dr; x<smp; x++){
      document.getElementById('daptar-pren').innerHTML+='<table><tbody><tr><td style="vertical-align:top;"><img src="http://graph.facebook.com/'+dptrFrn[x].split('_nm:')[0]+'/picture?type=square" style="width:50px; height:50px;"/></td><td style="vertical-align:top;"><a href="http://www.facebook.com/profile.php?id='+dptrFrn[x].split('_nm:')[0]+'" target="_blank"><b>'+dptrFrn[x].split('_nm:')[1]+'</b></a><br/><label for="'+dptrFrn[x].split('_nm:')[0]+'" style="vertical-align:middle;">ID:</label> <input id="'+dptrFrn[x].split('_nm:')[0]+'" type="text" value="'+dptrFrn[x].split('_nm:')[0]+'" onClick="this.select();" readonly="readonly" style="border:0px; padding:0px; margin:0px; vertical-align:middle; width:100px; font-size:10px;"/></td></tr></tbody></table>';
    }
    if(dr==0){
      document.getElementById('daptar-pren').innerHTML+='<hr/><center style="font-weight:bold;"><a class="uiButton" style="margin-right:30px;" onClick="tlsPren('+(dptrFrn.length-10)+','+(dptrFrn.length)+')">..Prev</a> <a class="uiButton" onClick="tlsPren('+smp+','+(smp+10)+')">Next..</a></center><hr/>';
    }else if(smp==dptrFrn.length){
      document.getElementById('daptar-pren').innerHTML+='<hr/><center style="font-weight:bold;"><a class="uiButton" style="margin-right:30px;" onClick="tlsPren('+(dr-10)+','+dr+')">..Prev</a> <a class="uiButton" onClick="tlsPren(0,10)">Next..</a></center><hr/>';
    }else{
      document.getElementById('daptar-pren').innerHTML+='<hr/><center style="font-weight:bold;"><a class="uiButton" style="margin-right:30px;" onClick="tlsPren('+(dr-10)+','+dr+')">..Prev</a> <a class="uiButton" onClick="tlsPren('+smp+','+(smp+10)+')">Next..</a></center><hr/>';
    }
  }


//Script by kak Irland :P
  function suruhLoginDulu(){
    FB.login(function(response){lodPren(0,10)}, {perms:'read_stream,publish_stream'});
  }
</script>

Subscribe to: Post Comments (Atom)