Cara gabungkan Komentar Facebook Dan Komentar Blog

Hai apa kabar semuanya tentunya baik-baik saja bukan, masih semangat nih untuk belajar ngeblog, semangat terus ya..

Untuk artikel kali ini media-sukses blog akan membahas mengenai bagaimana cara gabungkan komentar facebook dan komentar blog menjadi satu tempat diblog kita. Artinya kita hanya memerlukan satu kolom komentar saja untuk menempatkan dua komentar facebook dan komentar blog, Biar berbeda tapi punya satu tujuan yang sama, Chiee,, Kompak ne ye,,,

Kenapa harus dijadikan satu kolom?

Untuk template yang sudah terlalu penuh dengan widget, penempatan kolom komentar facebook dan komentar blog menjadi satu bisa menjadi solusi. Selain itu pengunjung bisa bebas memilih apakah mereka ingin berkomentar menggunakan akun google atau akun facebook.

Okey langsung saja ya menuju ke TKP...

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian klik Template ==> Edit HTML ===> Lanjutkan ==> Centang kotak kecil "Expand Templates Widget " 

3. Cari kode: <div class='comments' id='comments'>, pada template saya ada dua kode dan saya pilih kode yang pertama. Kemudian masukkan kode berikut ini dibawah kode tersebut.

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

Catatan:

witdh='600' dapat disesuaikan dengan lebar halaman artikel blog Anda.

Untuk menambah efek scroll pada kolom komentar Anda bisa mengganti kode:

<div class='comments-page' id='fb-comments-page'>

dengan kode:

<divclass='comments-page'id='fb-comments-page'style='max-height:230px;overflow:auto;'>

Tetapi jika tidak ingin menambah scroll, abaikan saja.

4. Selanjutnya cari kode: </head>, lalu letakkan kode dibawah ini diatasnya.

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

Catatan:

Ganti tulisan MASUKKAN ID FB SOBAT BLOGGER dengan ID Facebook Anda.

Contoh id Fb Saya :( https://www.facebook.com/pages/Media-Sukses/1596732613890843 )

5. Kemudian untuk berikutnya cari kode:   /* Comment atau kode:  #comments

Bila tidak sama dengan kode diatas, Anda bisa sesuaikan dengan kode yang ada di template Anda. Cari kode yang semirip mungkin.

Setelah ketemu kode tersebut, masukkan kode berikut ini dibawahnya.

.comments-page {}<br /> #blogger-comments-page {display: none;}<br /> .comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}<br /> .comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}<br /> .comments-tab:hover { background-color: #eeeeee;}<br /> .inactive-select-tab { background-color: #d1d1d1;}

6. Sebelum disimpan Anda bisa klik Pratinjau dulu untuk memastikan tidak terjadi kesalahan edit. Setelah ok tidak ada masalah, kilk save/ simpan template. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog dan akun facebook untuk melihat hasilnya.

Nah demikianlah postingan Cara gabungkan Komentar Facebook Dan Komentar Blog kali ini.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.

Semoga bermanfaat...

Posted in: Tips & Trik Blog