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+=' <b>'+y+':</b> '+response[x][y]+'<br/>';
}
}else{
document.getElementById('daptar-pren').innerHTML+='<b>'+x+':</b><br/> '+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>
No comments:
Post a Comment