Cara Membuat Komentar Facebook Di Blog Disamping Komentar Blogger V2

Hallo sahabat blogger sekarang kita akan belajar untuk membuat komentar facebook berdampingan dengan komentar blogger. Sebelumnya saya juga pernah memposting cara untuk memasang komentaar facebook dan komentar blog berdampingan v1. Namun ini merupakan cara baru yang bisa anda terapkan ketika cara yang pertama tidak berhasil di blog anda. Karena memang setiap template blog akan menghasilkan hasil edit yang berbeda.

Bagaimana Cara Membuat Kotak Komentar Facebook Berdampingan dengan Kotak Komentar Blogger?

Sebenarnya caranya tidak susah-susah amat kok. Asalkan anda bisa teliti untuk membaca setiap instruksi saya saja. Nah sebelumnya saya akan memberikan hasil dari membuat kotak komentar facebook pada blog saya. Berikut adalah hasilnya :

Berikut adalah langkah langkahnya :

Langkah 1 : Pergi ke blogger >> Dashboard >> Template

Pastikan setiap anda edit HTML blog anda, selalu anda backup terlebih dahulu. Hal ini dikarenakan untuk jaga-jaga ketika hasil edit anda mengalami eror.

Langkah 2 : Edit HTML >> Lanjutkan

Langkah 3 : Centang Expand Template Widget

Langkah 4 : Temukan Kode di bawah ini (Ctrl + F) :

]]></b:skin>

Langkah 5 : Copy kemudian paste kode di bawah ini diatas atau sebelum ]]></b:skin>

.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;}

Langkah 6 : Jika sudah selesai kemudian lanjutkan untuk mencari kode di bawah ini :

</head>

Kemudian copy dan paste kode di bawah ini tepat di atas kode </head> yang anda temukan :

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

Lanhkah 7 :  Sebelumnya lihat tulisan pada script di atas yang saya beri warna merah 'ID FB Anda disini' . isikan dengan FB Id anda. Jika anda tidak tahu FB Id anda coba perhatikan contoh berikut https://www.facebook.com/bayu.adipati. Itu bisa anda lihat ketika anda membuka profil Facebook anda. Dan yang saya maksud dengan FB ID adalah bayu.adipati.

Langkah 8 : Kemudian cari kode seperti ini <div class='comments' id='comments'> , di blog saya kode tersebut ada dua. Kalau anda juga menemukan ada dua kode tersebut di blog anda, paste kode dibawah ini tepat di bawah kedua kode tersebut!

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Catatan : Perhatikan kode diatas yang saya beri warna. Untuk yang angka 2 merupakan jumlah komentar yang ditampilkan. Kemudian untuk angka 400 merupakan lebar dari kotak komentar facebook yang ada di blog anda.

Untuk kode yang saya beri warna merah <div class='comments comments-page' id='blogger-comments-page'>  , jika anda menemukan kode yang sama di bawah kode yang anda paste di blog anda, hapus kode tersebut. Jadi pastikan tidak ada kode tersebut sama di bawahnya.

Langkah 9 : Simpan dan lihat hasilnya.

Gimana sahabat blogger, apakah anda berhasil membuat kotak komentar facebook berdampingan dengan kotak komentar blog anda? Beri komentar jika anda berhasil memasangnya. Beri tahu saya bahwa kode di cara di atas benar-benar bekerja pada blog anda.

Update : 7 Februari 2013
Mungkin anda tidak akan mendapatkan notifikasi jika ada yang mengomentari blog anda. Nah untuk mengatasinya, anda perlu untuk membuat APP FB terlebih dahulu. Untuk tutorialnya silahkan baca : Cara untuk membuat APP FB.

Setelah anda membuatnya, sekarang kita akan memasukkan APP ID dari Aplikasi yang telah kita buat sebelumnya. Caranya adalah :

• Cari </head> di template anda (Masuk Blogger >> template >> Edit HTML)
• Setelah ketemu masukkan kode di bawah ini di atasnya

<meta content='APP ID' property='fb:app_id'/>

• Ganti APP ID dengan APP ID yang baru anda buat. Kemudian klik simpan.

Share This:

Post Tags:

Comment Widget widget

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-jr.blogspot.com/

• Social Links:

• Rss
• Facebook
• Twitter
• Google+
• Linkedin
• Youtube