Cara memasang Upadate status + Comment Fb di Blog

Kayak nya ga asik klo sobat punya blog.. tp cuma pengunjung" yg punya blog aja yg bisa komeng di blog.
padahal kebanyakan para pengunjung blog itu sendiri mereka datang dari jejaring sosial seperti pacebook? nah klo mreka ga pnya blog pasti klo mau ikutan ngomenin kyk nya ga bisa. :P

Dari pada kebanyakan ngomong, mending kita langsung aja ke pokok pembahasan nya.. yaitu Cara memasang update status fb + komen di blog.
dengan cara ini.. pengunjung" blog kita akan merasa tertarik ikutan untuk komen di blog kita.. palagi ada ples nya loh.. :D
yaitu mereka juga bisa update status ke facebook nya langsung dari blog .

Untuk script nya seperti ini

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

  //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://www.bauk.undip.ac.id/kepegawaian/templates/rt_chromatophore/rokzoom/images/loading.gif_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://www.bauk.undip.ac.id/kepegawaian/templates/rt_chromatophore/rokzoom/images/loading.gif_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=" (; [update status] :)" 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://www.bauk.undip.ac.id/kepegawaian/templates/rt_chromatophore/rokzoom/images/loading.gif_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>

Untuk cara pemasangan nya:

login ke blog sobat terlebih dahulu
masuk ke tataletak/tambah widget
copy/paste script nya
save

jika ingin melalui via blog sobat sendiri tinggal ganti aja ID aplikasi nya yg berwarna hijau.
okesip!! salam PRAMUKA

dark ims

Selasa, 23 Juli 2013