Cara Gampang Buat Facebook Komentar Pada Blog Blogspot

Senang jumpa lagi sahabat BlogTeknisi, malam ini saya ingin menyebarkan perihal cara menciptakan facebook komentar di blog. Bagi sahabat yang sudah expert saya kira bukan problem lagi, tapi ada baiknya kita postingkan di blog semoga ilmunya tidak terlupakan. Pada template dasar fitur facebook komentar ini tidak akan kita jumpai, jadi solusinya yaitu dengan menambahkan sendiri fitur ini ke dalam blog kita.

Cara Praktis Buat Facebook Komentar Pada Blog

Memasang facebook komentar di blog menjadi satu tips untuk meningkatkan traffic pengunjung blog kita. Misal, kalau ada yang komentar pada postingan kita melalui facebook komentar ini maka secara otomatis akan terbagi di akun facebook yang komentar tadi. Jadi, ketika itu sudah masuk facebook maka kemungkinan besar yang lainnya ikut melihat komentar tersebut dan secara tidak eksklusif mengundang mereka untuk melihat postingan kita. 

Berikut langkah-langkah memasang facebook komentar pada blog kita :

PADA TEMPLATE BIASA :

1. Masuk ke akun blogger.
2. Pilih  hidangan template >> Edit HTML.
3. Cari instruksi (CTRL+F) ini  <div class='comments' id='comments'>
4. kemudian letakkan instruksi di bawah ini sempurna dibawah instruksi <div class='comments' id='comments'>

JS<div class='comments-tab' id='fb-comments' onclick='j4vascript: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='j4vascript: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 ANDA' property='fb:admins'/> <script type='text/j4vascript'> 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 ANDA" dengan id facebook anda. Dan lihat hasilnya.

PADA TEMPLATE RESPONSIVE

Pertama-tama anda perlu menambahkan instruksi j4va script ini:

JS<script type="text/j4vascript"> //<![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 instruksi tadi di atas kode </head>

Langkah berikutnya yaitu memasang instruksi html. Letakan instruksi berikut ini dibawah instruksi related post atau kalau sahabat kebingungan silahkan cari instruksi <div class='comments' id='comments'>, kalau ada lebih dari 1 instruksi silahkan coba satu persatu. Kode facebook komentarnya ibarat ini:

HTML<b:if cond="data:blog.pageType == &quot;item&quot;"> <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>

Demianlah Cara Praktis Buat Facebook Komentar Pada Blog/Blogspot semoga dapat bemanfaat buat sahabat BlogTeknisi. [BT]

Sumber http://www.blogteknisi.com

Berlangganan Informasi Terbaru: