Saturday, February 4, 2017

Cara Membuat Komentar Facebook di Blog

Cara Membuat Komentar Facebook di Blog





Hal ini merupakan hal yang sudah umum dan bukan lagi baru. Banyak para blogger yang sudah menerapkan trik ini di blog nya karena beberapa alasan. Ada yang bilang kalau menggunakan facebook akan lebih simple, ada yang bilang kalau menggunakan facebook jadi lebih gaul, ada juga yang bilang kalau pake facebook jadi tidak ribet. Itu semua pendapat orang, bagaimana pendapat anda ?

Sebenarnya blogger sendiri juga sudah menyediakan kolom komentar sendiri. Tapi di samping itu kebutuhan akan suatu hal yang baru tentunya akan selalu muncul. Ini juga terjadi pada blog ini, dikarenakan muncul terlalu banyak komentar pada salah satu artikel saya maka saya putuskan untuk membagi komentar pengujung blog ini ke kolom komentar facebook. Bisa anda lihat sendiri di kolom komentar. Anda juga dapat melihat screenshot nya di bawah !


1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML
2. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F Letakan kode CSS di bawah tepat di atas kode ]]></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;}
 

3. Setelah itu cari lagi kode </head> kemudian letakan lagi kode di bawah ini tepat di atas kode </head> :




<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 property=fb:admins/> <script type=text/javascript> function commentToggle(selectTab) { $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;); $(selectTab).removeClass(&quot;inactive-select-tab&quot;); $(&quot;.comments-page&quot;).hide(); $(selectTab + &quot;-page&quot;).show(); } </script>

 


4. Dari kode di atas, perhatikan kode " ID FB ANDA ".ganti tulisan tersebut dengan id fb anda

5. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi.
Silahkan cari kode <div class=comments id=comments> .Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.Cari kode yang paling terakhir, lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class=comments id=comments> :



!--FB COMMENT--> <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=5 width=500/> </b:if> </div> <div class=comments comments-page id=blogger-comments-page> <!--FB COMMENT-->
 6. Simpan
 7. Semoga berhasil ya..??

:D

Available link for download