Facebook Graph API

facebook graph API facebook graph API

Diposkan oleh Histerz Blog di 05.22 ·
Updated: Senen, 8 Agustus 2011 jam 20:26
Facebook Graph API (News feed)
<script>
window.fbAsyncInit = function() {
  FB.init({appId: '124688910911852', status: true, cookie: true, xfbml: true});

  FB.getLoginStatus(function(response) {
    if (response.session) {
document.getElementById('tblBuatLogin').style.display='none';
      FB.api('/me', function(response) {
        if(response.name){tulisDataUser(response);}
      });
    }else{
document.getElementById('tblBuatLogin').style.display='block';
      FB.Event.subscribe('auth.login', function(response) {
        if(response.session){
document.getElementById('tblBuatLogin').style.display='none';
          FB.api('/me', function(response) {
            if(response.name){tulisDataUser(response);}
          });
        }
      });
    }
  });

};

  (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>

<div id="input-user" style="display:none;"><center>
<table><tr><td><b>Username or ID:</b></td><td><b>Connection type:</b></td></tr><tr><td><input id="user-id" type="text" value="me"/></td><td>

<select id="con-type">
  <option value="friends" />Friends

  <option value="home" />Home
  <option selected value="feed" />profil
  <option value="likes" />Likes
  <option value="movies" />Movies
  <option value="music" />Music
  <option value="books" />Books

  <option value="permissions" />Permissions
  <option value="photos" />Photos
  <option value="albums" />Albums
  <option value="videos" />Videos
  <option value="videos/uploaded" />Videos Uploaded
  <option value="events" />Events

  <option value="groups" />Groups
  <option value="checkins" />Checkins 
</select>
</td></tr></table>
<a class="mls uiButton" onclick="var IDnya=document.getElementById('user-id').value; var con=document.getElementById('con-type').value; document.getElementById('gambar-loding2').style.display='inline-block'; mentaFeedDong(IDnya,con)" style="cursor:pointer;">Ｈａｊａｒ ｓｏｂ..</a> <img id="gambar-loding2" src="http://images.gmx.com/images/outsource/application/mailclient/mailcom/resource/mailclient/widgets/blue/common/loading_animation_en-3447255655.gif" style="display:none"/><hr/>
</center></div>
<div id="tempat-nulis-data"></div>

<hr/><a onclick="batalkan='yes'; hitungMundur();" style="cursor:pointer;">ｃｌｉｃｋ ｈｅｒｅ..</a> <b id="hitung-mundur"></b> <img id="gambar-loding" src="http://static.ak.fbcdn.net/rsrc.php/v1/yb/r/GsNJNwuI-UM.gif" style="display:none"/><hr/>

<script type="text/javascript">
function mentaFeedDong(IDnya,con){
  FB.api('/'+IDnya+'/'+con, function(feedNya) {
    if(feedNya.data){tulisFeed(feedNya);}else{erorCuy(feedNya);}
  });
}

function tulisFeed(feedNya){
  if(document.getElementById('tempat-nulis-data')){
    var tnd = document.getElementById('tempat-nulis-data');

    if(feedNya.data.length<30){var batesan=feedNya.data.length;}else{var batesan=30;}
    var feedAcak = feedNya.data.sort(function() {return 0.5 - Math.random()});

    tnd.innerHTML=batesan+' of '+feedNya.data.length+'<hr/>';

    for(x=0; x<batesan; x++){
      tnd.innerHTML+='<table style=""><tr><td id="potonugelo'+x+'" style="vertical-align:top;"></td><td id="katanugelo'+x+'" style="vertical-align:top;"></td></tr></table>';

      if(feedAcak[x].from && feedAcak[x].from.id && feedAcak[x].from.name){
        document.getElementById('potonugelo'+x).innerHTML='<a href="http://www.facebook.com/profile.php?id='+feedAcak[x].from.id+'"><img src="http://graph.facebook.com/'+feedAcak[x].from.id+'/picture?type=square"/></a>';
        document.getElementById('katanugelo'+x).innerHTML='<a href="http://www.facebook.com/profile.php?id='+feedAcak[x].from.id+'"><b>'+feedAcak[x].from.name+'</b></a><br/>';
      }
      if(feedAcak[x].message){document.getElementById('katanugelo'+x).innerHTML+=feedAcak[x].message.replace(/\n/gi,'<br/>')+'<br/>';}
      //if(feedAcak[x].picture){document.getElementById('katanugelo'+x).innerHTML+='<img src="'+feedAcak[x].picture+'" style="float:left;margin-right:7px;"/>';}
      if(feedAcak[x].name && feedAcak[x].link){document.getElementById('katanugelo'+x).innerHTML+='<a href="'+feedAcak[x].link+'" target="_blank"><b>'+feedAcak[x].name+'</b></a>';}else if(feedAcak[x].name && feedAcak[x].id){document.getElementById('katanugelo'+x).innerHTML+='<table><tr><td style="vertical-align:top;"><img src="http://graph.facebook.com/'+feedAcak[x].id+'/picture?type=square"/></td><td style="vertical-align:top;"><a href="http://www.facebook.com/profile.php?id='+feedAcak[x].id+'" target="_blank"><b>'+feedAcak[x].name+'</b></a><br>ID: '+feedAcak[x].id+'</td></tr></table>';}else if(feedAcak[x].name){document.getElementById('katanugelo'+x).innerHTML+='<b>'+feedAcak[x].name+'</b>';}
      if(feedAcak[x].caption){document.getElementById('katanugelo'+x).innerHTML+='<br/><span style="color:#808080;">'+feedAcak[x].caption+'</span>';}
      if(feedAcak[x].description){document.getElementById('katanugelo'+x).innerHTML+='<br/><span style="color:#808080;">'+feedAcak[x].description+'</span>';}

      document.getElementById('katanugelo'+x).innerHTML+='<div style="clear:both"></div>';
      if(feedAcak[x].icon){document.getElementById('katanugelo'+x).innerHTML+='<img src="'+feedAcak[x].icon+'" style="vertical-align:middle;"/> ';}
      if(feedAcak[x].application){if(feedAcak[x].application.name && feedAcak[x].application.id){document.getElementById('katanugelo'+x).innerHTML+='via <a href="http://www.facebook.com/apps/application.php?id='+feedAcak[x].application.id+'" target="_blank">'+feedAcak[x].application.name+'</a> · ';}}

      if(feedAcak[x].actions){
        for(y in feedAcak[x].actions){
            if(y!=0 && y<feedAcak[x].actions.length){document.getElementById('katanugelo'+x).innerHTML+=' · ';}
          if(feedAcak[x].actions[y].name && feedAcak[x].actions[y].link){
            document.getElementById('katanugelo'+x).innerHTML+='<a href="'+feedAcak[x].actions[y].link+'" target="_blank"><span id="'+feedAcak[x].actions[y].name+x+'"></span> '+feedAcak[x].actions[y].name+'</a>';
          }
        }
        document.getElementById('katanugelo'+x).innerHTML+='<hr/>';
      }
      if(feedAcak[x].likes && document.getElementById('Like'+x)){document.getElementById('Like'+x).innerHTML=feedAcak[x].likes.count;}
      if(feedAcak[x].comments && document.getElementById('Comment'+x)){document.getElementById('Comment'+x).innerHTML=feedAcak[x].comments.count;}

      if(feedAcak[x].comments && feedAcak[x].comments.data){
        for(y in feedAcak[x].comments.data){
          document.getElementById('katanugelo'+x).innerHTML+='<div style="background-color:#EDEFF4; padding:5px 5px 4px 5px; margin-bottom:2px; clear:both; border-bottom:1px solid #E5EAF1;"><img src="http://graph.facebook.com/'+feedAcak[x].comments.data[y].from.id+'/picture?type=square" style="float:left;margin-right:7px;width:32px;"/> <div style="margin-left:40px"><a href="http://www.facebook.com/profile.php?id='+feedAcak[x].comments.data[y].from.id+'" target="_blank"><b>'+feedAcak[x].comments.data[y].from.name+'</b></a> <i>said..</i> '+feedAcak[x].comments.data[y].message.replace(/\n/gi,'<br/>')+'</div><div style="clear:both;"></div></div>';
        }
      }
    }
  }
  udahLodingMuluAh();
}

function erorCuy(dataNya){
  if(document.getElementById('tempat-nulis-data')){
    var tnd = document.getElementById('tempat-nulis-data');
    tnd.innerHTML='<dl>';

    if(dataNya=='[object Object]'){
      for(x in dataNya){
        if(dataNya[x]=='[object Object]'){
          tnd.innerHTML+='<dt style="color:darkred">'+x+'</dt>';
          for(y in dataNya[x]){
            tnd.innerHTML+='<dt>'+y+'</dt>';
            tnd.innerHTML+='<dd>'+dataNya[x][y]+'</dd>';
          }
        }else{
          tnd.innerHTML+='<dt>'+x+'</dt>';
          tnd.innerHTML+='<dd>'+dataNya[x]+'</dd>';
        }
      }
    }else{
      tnd.innerHTML+='<dt>'+dataNya+'</dt>';
    }

    tnd.innerHTML+='</dl>';
    udahLodingMuluAh();
  }
}

function udahLodingMuluAh(){
    document.getElementById('gambar-loding').style.display='none';
    document.getElementById('input-user').style.display='block';
    document.getElementById('gambar-loding2').style.display='none';
}

var mulaiDari = '5';
var batalkan = 'no';

function hitungMundur(){
  if(batalkan == 'yes'){
    document.getElementById('hitung-mundur').innerHTML='';
    if(document.getElementById('gambar-loding')){document.getElementById('gambar-loding').style.display='inline-block';} 
    mentaFeedDong('me','feed');
  }else{
    if(mulaiDari < '0'){
      document.getElementById('hitung-mundur').innerHTML='';
      if(document.getElementById('gambar-loding')){document.getElementById('gambar-loding').style.display='inline-block';} 
      mentaFeedDong('me','feed');
    }else{
      document.getElementById('hitung-mundur').innerHTML=mulaiDari;
      mulaiDari--;
      setTimeout("hitungMundur()",1000);
    }
  }
}

hitungMundur();
</script>
eNbe:
simpen di ~~gadget~~ HTML/JAVASCRIPT .