Cara Mudah Memasang Komentar Facebook di Blogspot Degan Model Tab

Assalamualaikum.wr.wb
Kali ini saya akan share Tips Cara Mudah Memasang Komentar Facebook di Blogspot Degan Model Tab. Pasti bagi blogger pemula seperti saya masih bingung bagaimana cara agar postingan di blog bisa dikomentari melalui facebook, pasti kalian sudah tau facebook bukan?? ok langsung saja berikut tutorialnya :

1. Pastikan anda memiliki fanspage blog/website anda
2. Masuk dasboard blogger,  Pilih Template -> Edit HTML
3. Cari Kode : <div class='comments' id='comments'>
4. Salin kode html dibawah ini, dan paste tepat di bawah <div class='comments' id='comments'>

<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='https://goo.gl/yTTu2J'/><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='550'/></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='IDFANSPAGEANDA' 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>

<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. Jika sudah simpan dan lihat hasilnya, berikut contoh hasilnya.



Sekian artikel kali ini semoga bermanfaat, jangan lupa like,share, dan komentar!!!

Location:

Share :