Bikin Aplikasi Facebook Sendiri (Versi Blog)

1. Bikin Blog

catet alamatnya, misal: http://bikin-aplikasi-facebook-sendiri.blogspot.com/

2. Daftar Aplikasi Facebook

Catet App Id-nya, misal: 209486909091578

3. Atur Settingan Aplikasi

4. Setting Blog

4. Bikin Postingan baru di Blog

Ganti var idAplikasi='209486909091578';

<script type="text/javascript">
  //Deklarasi variable idAplikasi
  var idAplikasi='209486909091578';

  //kalo gak ditemukan element dengan id fb-root
  if(!document.getElementById('fb-root')){
    document.write('<div id="fb-root"></div>');
  }

  document.write('<div id="konten-aplikasi" style="text-align:center;">');
  document.write('<img src="http://images.gmx.com/images/outsource/application/mailclient/mailcom/resource/mailclient/widgets/blue/common/loading_animation_en-3447255655.gif"/>');
  document.write('</div>');

  document.write('<center style="padding-left:1px; margin-top:30px;">');
  document.write('<fb:comments href="http://'+window.location.href.split('/')[2]+'" width="500" numposts="10" migrated="1" colorscheme="dark"></fb:comments>');
  document.write('</center>');
</script>

<script type="text/javascript">
  //Mulai loading aplikasi..
  window.fbAsyncInit = function() {
    FB.init({appId: idAplikasi, status: true, cookie: true, xfbml: true});
    cekNohSiapaYgMasuk();
  };
  (function() {
    //Loading Script fb connect..
    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);

    //ngerubah favicon dengan icon applikasi
    var link = document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://graph.facebook.com/'+idAplikasi+'/picture';
    document.getElementsByTagName('head')[0].appendChild(link);
  }());
</script>

<script type="text/javascript">
  function cekNohSiapaYgMasuk(){
    document.getElementById('konten-aplikasi').innerHTML='<img src="http://images.gmx.com/images/outsource/application/mailclient/mailcom/resource/mailclient/widgets/blue/common/loading_animation_en-3447255655.gif"/>';
    FB.api('/me?fields=id,name,username', function(response) {
      if(response.name){
        tulisDataUser(response);
      }else{
        suruhLoginDulu();
      }
    });
  }
</script>

<script type="text/javascript">
  function suruhLoginDulu(){
    document.getElementById('konten-aplikasi').innerHTML='<input type="button" onclick="FB.login(cekNohSiapaYgMasuk,{perms:\'read_stream,publish_stream\'})" value="Click Here to Begin.." style="border:1px outset #29447E; padding:5px; cursor:pointer; background-color:#617AAC; color:white; font-weight:bold;"/>';
  }
</script>

<script type="text/javascript">
  function tulisDataUser(datanya){
    var kontenAplikasi = document.getElementById('konten-aplikasi');

    if(datanya.name && datanya.id){
      kontenAplikasi.innerHTML='<img src="http://graph.facebook.com/'+datanya.id+'/picture?type=normal" style="float:left; border:0px; padding:0px;"/>';
      kontenAplikasi.innerHTML+='<div id="isi-konten-aplikasi" style="margin-left:110px; text-align:left;"></div>';
      kontenAplikasi.innerHTML+='<hr style="clear:both;"/>';

      var isiKontenAplikasi = document.getElementById('isi-konten-aplikasi');

      isiKontenAplikasi.innerHTML='<h3 style="margin-top:0px;"><a href="http://www.facebook.com/profile.php?id='+datanya.id+'" target="_blank">'+datanya.name+'</a></h3>';
      isiKontenAplikasi.innerHTML+='<h6 style="margin:0px; font-size:100%;"><span style="font-weight:normal">ID:</span> '+datanya.id+'</h6>';

      if(datanya.username){
        isiKontenAplikasi.innerHTML+='<h6 style="margin:0px; font-size:100%;"><span style="font-weight:normal">UserName:</span> '+datanya.username+'</h6>';
      }

      isiKontenAplikasi.innerHTML+='<div id="menu-update-status" style="text-align:center;"></div>';
      updateStatus();
    }else{
      suruhLoginDulu();
    }
  }
</script>

<script type="text/javascript">
  function updateStatus(){
    var menuUpdateStatus = document.getElementById('menu-update-status');

    menuUpdateStatus.innerHTML='<textarea id="isi-status" style="width:95%; height:100px; border:1px dashed lightblue; padding:3px;"></textarea>';
    menuUpdateStatus.innerHTML+='<div id="laporan" style="margin-top:10px;"><input type="button" value="Update status!" onClick="hajarUpdateStatus()" style="border:1px outset #29447E; padding:5px; cursor:pointer; background-color:#617AAC; color:white; font-weight:bold;"/></div>';
  }
</script>

<script type="text/javascript">
  function hajarUpdateStatus(){
    var laporan = document.getElementById('laporan');
    var isiStatus = document.getElementById('isi-status').value;

    laporan.innerHTML='<img src="http://images.gmx.com/images/outsource/application/mailclient/mailcom/resource/mailclient/widgets/blue/common/loading_animation_en-3447255655.gif"/>';

    FB.api('/me/feed', 'post', {message: isiStatus}, function(dataNya){
      laporan.innerHTML='<hr/>';

      if(dataNya.id){
        laporan.innerHTML+='<h3>Your Status has been Updated!</h3>';
        laporan.innerHTML+='<a href="http://www.facebook.com/'+dataNya.id.replace(/_/gi,'/posts/')+'" target="_blank"><b>Your Status ID:</b> '+dataNya.id+'</a>';
      }else{
        if(dataNya=='[object Object]'){
          for(a in dataNya){
            if(dataNya[a]=='[object Object]'){
              for(b in dataNya[a]){
                if(dataNya[a][b]=='[object Object]'){
                  for(c in dataNya[a][b]){
                    laporan.innerHTML+='<b>'+a+' - '+b+' - '+c+':</b> '+dataNya[a][b][c]+'<br/>';
                  }
                }else{laporan.innerHTML+='<b>'+a+' - '+b+':</b> '+dataNya[a][b]+'<br/>';}
              }
            }else{laporan.innerHTML+='<b>'+a+':</b> '+dataNya[a]+'<br/>';}
          }
        }else{laporan.innerHTML+=dataNya+'<br/>';}
      }

      laporan.innerHTML+='<hr/>';
      laporan.innerHTML+='<input type="button" value="Update status again!" onClick="hajarUpdateStatus()" style="border:1px outset #29447E; padding:5px; cursor:pointer; background-color:#617AAC; color:white; font-weight:bold;"/>';
    });
  }
</script>
      

---

Have you liked us on FB yet?

---