Bagaimana Cara memasang Komentar Facebook di Blogspot Bagaimana Cara memasang Komentar Facebook di Blogspot

    Dimas's zone kali ini akan mencoba berbagi kepada sobat-sobat sekalian tentang bagaimana memasang Komentar Facebook di Blog. Sebagian besar pengguna internet selalu terhubung dengan akun facebooknya jadi agar para pengunjung blog lebih mudah berkomentar menggunakan akun Facebooknya. Komentar Facebook di Blogger adalah untuk  menghubungkan konektivitas antara social media tersebut dengan blog kita. Sehingga, blog kita mendapatkan lalu lintas yang besar dengan Facebook. Berikut Screenshootnya :


Dan Berikut adalah cara-cara atau tahapan untuk memasang komentar facebook di akun blogger kita, baik blog biasa maupun blog dengan template yang responsive :

- Cara memasang Facebook komentar di Template Blog biasa :

1. Masuk ke akun blogger.
2. Pilih  menu template --> Edit HTML.
3. Cari kode yang berwarna merah berikut <div class='comments' id='comments'> dengan menekan CTRL+F
4. kemudian letakkan kode di bawah ini tepat dibawah kode <div class='comments' id='comments'>

<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='2' width='400'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/> <meta content='ID FACEBOOK KAMU' 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> <style>.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;}</style>

5. Silahkan cari dan ubah kata "ID FACEBOOK KAMU" dengan url facebook sobat . Dan lihat hasilnya.


- Cara memasang komentar Facebook di blog Responsive :
Yang perlu kamu lakukan adalah menambahkan kode javascript ini:

<script type="text/javascript"> //<![CDATA[ $(window).bind("load resize", function(){ var url = location.protocol+'//'+location.host+location.pathname; var containercm_width = $('#container-commentfb').width(); $('#container-commentfb').html('<div class="fb-comments" ' + 'data-href="'+url+'"' + ' width="' + containercm_width + '" data-num-posts="10"> </div> '); FB.XFBML.parse( ); }); //]]> </script>

Copy dan Paste kode tadi di atas kode </head>
Langkah berikutnya adalah memasang kode html. Letakan kode berikut ini dibawah kode untuk related post atau jika sobat bingung silahkan cari kode <div class='comments' id='comments'>, jika ada lebih dari 1 kode silahkan coba satu persatu. Kode FB Komennya seperti ini:

<b:if cond="data:blog.pageType == "item""> <h4> Post Comment</h4> <div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div id='container-commentfb' style='width: 100%'> <fb:comments expr:href='data:post.url' num_posts='5' width='500'/></div> </b:if>

Jika bingung, hapus semua kode Facebook komen yang ada di blog kamu, lalu di ganti dengan kode yang sudah Dimas's zone berikan diatas.

- Apabila Masih belum berhasil berikut langkah ke-3 yang bisa sobat coba :
1. Login Dashboard >> Template >>Edit HTML
2. Cari (CRTL+F) kode <body>
3. Copy kode berikut ini dan simpan (paste) di bawah kode <body>

<div id='fb-root'/> <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

4. Kemudian Copy kode berikut ini dan simpan (Paste) tepat di bawah kode <div class='comments' id='comments'>. Jika ada lebih dari 1 kode di tempalte blog Anda, simpan di bawah kode yang kedua.

<b:if cond='data:blog.pageType == "item"'> <div style='margin-top:20px'> <div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/> </div> </b:if>

Catatan :
- Angka 600 adalah lebar kotak komentar Facebook. Sesuaikan dengan lebar text area blog Anda.

5. Save Template dan selesai.

Bagaimana sobat mudah bukan?, memang cara memasang komentar facebook di template blog ada bermacam-macam kodenya, tinggal sesuaikan saja dengan template blog yang anda gunakan. Semoga tutorial cara memasang komentar facebook dan komentar facebook responsive ini mudah di pahami, dan selamat mencoba. Jangan lupa tinggalkan Komentar di Dimas's zone

Like And Share This!