Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

» Caranya :
[-] Masuk ke akun Blogger kamu.
[-] Selanjutnya masuk pada bagian Template.
[-] Klik Edit HTML.
[-] Centang Expand Template Widget.
[-] Cari kode ]]></b:skin>
, untuk memudahkan pencarian, tekan ctrl+f.
[-] Setelah ketemu, letakkan kode di bawah ini tepat di atas kode tadi.

.comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

Catatan:
Silahkan hapus kode berwarna merah itu, jika kamu ingin membuat kotak komentar facebook menjadi transparan.

[-] Kemudian, cari kode </head> , seperti tadi untuk lebih memudahkan pencarian tekan ctrl+f.
[-] Jika sudah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode </head> tadi.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FB Anda disini' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>

Catatan:
Silahkan kamu ganti tulisan berwarna merah tersebut dengan ID FB kamu. Sudah tahu kan, apa itu ID FB? Jika kamu sudah ganti, misalnya http://facebook.com/affan.tralala berarti ID FB kamu affan.tralala. Tapi, jika kamu belum menggantinya, maka ID FB kamu adalah sebuah angka-angka, contoh http://facebook.com/1234567890. Untuk melihat ID FB, kamu bisa masuk ke profil FB kamu, kemudian silahkan lihat pada adress bar.

[-] Selanjutnya, silahkan kamu cari kode <div class='comments' id='comments'>
[-] Umumnya, kode <div class='comments' id='comments'> terdapat 2. Silahkan kamu letakkan kode berikut tepat di bawah kode tersebut yang bawah.

 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == "item"'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='3' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Catatan:
Perhatikan, untuk yang nomor 3 adalah jumlah komentar yang akan muncul di kotak komentar facebook, untuk yang nomor 400 adalah lebar kotak komentar. Silahkan ganti sesuai dengan keinginan Anda.

[-] Setelah itu, klik Simpan Template.

« Semoga Bermanfaat »

Cara Memasukkan Komentar Facebook ke Blog

Oke sesuai janji saya di Facebook kemarin, saya akan memberitahu kalian Cara Memasukkan Komentar Facebook ke Blog... (•ˆoˆ•)

Langsung saja kita simak caranya berikut :
1. Login ke Facebook.
2. Buka link ini, Klik Disini.
3. Klik Register as a Developer.

4. Centang I accept the Facebook Platform Policy and the Facebook Privacy Policy.
5. Klik Lanjutkan.
6. Masukkan nomer HP kamu, lalu beberapa menit kemudian kamu akan menerima kode konfirmasinya.
7. Jika belum menerima kode konfirmasi dalam 5 menit, kamu bisa klik Kirim Ulang Kode.
8. Setelah selesai, klik Lanjutkan terus sampai kamu berhasil melihat tombol Create New App seperti ini.

9. Klik tombol tersebut.
10. Lalu isikan App Name terserah kamu, kosongkan App Namespace, lalu klik Lanjutkan.

11. Masukkan kode yang ada pada gambar, lalu klik Lanjutkan.
12. Lihat pada bagian App ID, copy kodenya ke notepad, wordpad, atau Ms.Word.

13. Sekarang kamu login ke Blog.
14. Klik Template, lalu klik Edit HTML.
15. Tekan ctrl + f, lalu ketik <body
16. Lalu copy kode ini di bawahnya :

<div id='fb-root'/>
<script>
  window.fbAsyncInit = function() {
    // init the FB JS SDK
    FB.init({
      appId      : &#39;APP ID#39;, // App ID from the App Dashboard
      channelUrl : &#39;Link FB Kamu&#39;, // Channel File for x-domain communication
      status     : true, // check the login status upon init?
      cookie     : true, // set sessions cookies to allow your server to access the session?
      xfbml      : true  // parse XFBML tags on this page?
    });

    // Additional initialization code such as adding Event Listeners goes here

  };

  // Load the SDK&#39;s source Asynchronously
  // Note that the debug version is being actively developed and might
  // contain some type checks that are overly strict.
  // Please report such bugs using the bugs tool.
  (function(d, debug){
     var js, id = &#39;facebook-jssdk&#39;, ref = d.getElementsByTagName(&#39;script&#39;)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
     js.src = &quot;//connect.facebook.net/en_US/all&quot; + (debug ? &quot;/debug&quot; : &quot;&quot;) + &quot;.js&quot;;
     ref.parentNode.insertBefore(js, ref);
   }(document, /*debug*/ false));
</script>

17. Ganti tulisan berwarna merah dengan App ID tadi.
18. Ganti tulisan berwarna oranye dengan Link FB kamu.
19. Lalu cari kode </body
20. Copy kode ini di atasnya :

<div class="fb-comments" data-href="http://neogameshop.blogspot.com/" data-num-posts="5" data-width="640"></div>

21. Ganti tulisan berwarna merah dengan link Blog kamu.
22. Ganti tulisan berwarna oranye untuk mengubah ukuran lebar dari kotak komentar FBnya.
23. Klik Simpan.
24. Buka Blog kamu, dan klik salah satu post kamu, lalu lihat bagian bawah, nanti akan ada kotak komentar FB... (•ˆ–ˆ•)
25. Selamat menikmati... :D

Jika kamu ingin mengcopas artikel ini
Jangan lupa sertakan sumbernya ya... :D