Cara Pasang Buku Tamu lewat Facebook

Sekarang akan kita coba langsung buat bukut tamu menggunakan Facebook , sekarang ikuti langkah - langkah berikut ini

TAHAP I
Terlebih dahulu buat app id kalian pada facebook. Langkahnya lumayan mudah seperti berikut ini.

1. Masuk/login ke www.facebook.com
2. Setelah itu lanjutkan dengan masuk developer/pengembang situs FB di link ini:
   developers.facebook.com/setup atau klik di sini
3. Klik Create New App

4. Setelah itu akan muncul jendela munculan:

5. Ketik Nama Aplikasi yang dikehendaki, sekedar contoh diatas adalah: BUKU TAMU
6. App Namespace: Ini bisa dibiarkan kosong atau tulis nama dengan minimal 7 karakter
7. Klik Lanjutkan
8. Selanjutnya muncul jendela munculan verifikasi kata, ketik terus Submit.
9. Selesai.


Nah, sampai tahap ini kalian sudah selesai membuat Aplikasi yang akan digunakan untuk fungsi komentar di blog kalian. Pada screeshoot diatas tertera nama Aplikasi dan nomor ID Aplikasi serta kode rahasia Aplikasi.


TAHAP II

1. Log in ke blogger.
2. Klik menu Rancangan.
3. Klik "Tambah Gadget"
4. Pilih tombol Tambahkan ke Blog atau tanda "+" yang berada di bawah tulisan HTML/JavaScript.
5. Setelah itu copy paste kode HTML berikut ini.

    <style type="text/css">
    #gb{
    position:fixed;
    top:10px;
    z-index:+10;
    }
    * html #gb{position:relative;}

    .gbtab{
    height:130px;
    width:30px;
    float:left;
    border:4px solid #0066CC;
    cursor:pointer;
    background:url('http://i1237.photobucket.com/albums/ff473/muhammadsuteja/tabs-ua-1-1.gif') no-repeat;
    }
    .gbcontent{
    float:left;
    border:7px solid #0066CC;
    background:#F5F5F5;
    padding:10px;
    }
    </style>

    <script type="text/javascript">
    function showHideGB(){
    var gb = document.getElementById("gb");
    var w = gb.offsetWidth;
    gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
    gb.opened = !gb.opened;
    }
    function moveGB(x0, xf){
    var gb = document.getElementById("gb");
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    gb.style.right = x.toString() + "px";
    if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
    }
    </script>

    <div id="gb">

    <div class="gbtab" onclick="showHideGB()"> </div>

    <div class="gbcontent">
    <div style="text-align: center;">
    <span style="color: blue; font-size: x-small;">Selamat Datang</span>
    <span style="font-size: x-small;"><b style="color: red;">Jangan Lupa Comment</b></span><span style="color: blue; font-size: x-small;">
    </span><span style="font-size: x-small;"><b style="color: blue;"></b></span>
    </div>
    <iframe src="http://www.facebook.com/plugins/livefeed.php?app_id=403855429662432&amp;width=250&amp;height=350&amp;xid=355411944445" scrolling="no" frameborder="0" style="border:yes; overflow:hidden; width:250px; height:350px;" allowtransparency="no"></iframe><div style="color: #999999;">
    <span style="font-size: xx-small;">Widget by: <a href="http://www.facebook.com/">Facebook</a> Develop by: <a href="http://bee4bisnis.blogspot.com/" target='new'>bee 4 bisnis</a></span>
    </div>

    <div style="text-align:right">
    <a href="http://bee4bisnis.blogspot.com/2012/08/cara-pasang-buku-tamu-lewat-facebook.html">
    </a>|<a href="javascript:showHideGB()"><b style="color:black">
    [tutup]
    </b></a>
    </div>
    </div>
    </div>

    <script type="text/javascript">
    var gb = document.getElementById("gb");
    gb.style.right = (30-gb.offsetWidth).toString() + "px";
    </script>

6. Ganti huruf yang berwarna merah dengan app id kalian.
7. Klik tombol Simpan Perubahan
8. Tekan & Pindahkan yang telah anda buat tadi di tempat yang di sukai
9. Tekan tombol Simpan
10.Selesai


Selamat mencoba ! :)



sumber :http://revolution-rex.blogspot.com