Searching...

Menambah komentar facebook di blog berdampingan

Assalamualaikkum Wr. Wb

Bagaimana cara membuat atau menambahkan komentar facebook di blog tanpa menghilangkan kolom komentar blog bawaan?
saya dapat caranya, artikel ini saya peroleh dari mas edi..


Mungkin dari para senior sudah banyak yang mengetahui hal ini. Tetapi diluar sana masih banyak Sahabat-sahabat kita yang baru belajar NgeBlog.

Fungsi dari Komentar facebook ?
Dari Jutaan umat manusia didunia ini sudah mengenal facebook dan masing-masing sudah mempunyai akun facebook. Karena untuk mengetahui kekurangan artikel yang kita miliki, maka kita hadirkan komentar facebook ini di blog agar memudahkan seseorang yang ingin menanggapi artikel yang kita miliki serta memudahkan mereka untuk bertanya. Karena sangat kurang dari mereka yang bisa menggunakan akun google.

Tak usah panjang pendek, langsung ke TKP.....

1. Login di Blogger Sahabta --> www.blogger.com
2. Masuk Ke menu Template dan Edit HTML Template




3. Cari Kode ]]></b:skin>  , Gunakan Ctrl + F pada Keyboard untuk mempercepat pencarian
4. Copy Code berikut ini tepat diatas Kode ]]></b:skin> 

.comments-page { background-color: #000000;} #blogger-comments-page { padding: 0px 5px; display: none;} .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #ff00ff;} .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;} .comments-tab:hover { background-color: #ff00ff;} .inactive-select-tab { background-color: #ff00ff;}

5. Setelah itu Cari Kode </head> Kemudian Copy code di Bawah ini di atas </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 disini' 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><span style="font-size: 50%">Widget edited by <a href="www.edisukarman.com" target="_blank" rel="follow">Edi Sukarman</a></span>

Catatan : 

Jika belum tahu ID Facebook Sahabat, silahkan baca postingan cara Melihat ID facebook

6. Setelah Itu, Cari kode <div class='comments' id='comments'> , Pada dasarnya, ada dua kode <div class='comments' id='comments'> Karena itu, Copy kode berikut di dibawah kode <div class='comments' id='comments'> yang pertama dan kedua.

<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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'> 



Catatan :

  • Pada Kode tersebut, terdapat angka 2 berwarna biru, itu adalah jumlah komentar facebook yang ditampilkan.
  • Dan terdapat angka 400 yang berwarna merah , itu adalah lebar kotak komentar. Jadi sesuikan dengan keinginan Sahabat.
  • Perhatikan kode <div class='comments comments-page' id='blogger-comments-page'> yang berwana merah  pada akhir kode. Jika saat penempatan kode dibawah kode <div class='comments' id='comments'> terdapat kode yang sama, maka hapus salah satu kode tersebut.
Contoh :
<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'>
<div class='comments comments-page' id='blogger-comments-page'> ( Hapus Salah Satu)

7. Klik Simpan/Save Template, dan lihat Hasilnya.

Demikian Trik dari Mas Edi
Terima Kasih

sumber :
http://www.edisukarman.com/2013/06/membuat-komentar-facebook-dan-blogger.html

0 komentar:

Posting Komentar

Silahkan tinggalkan komentar!
Setiap masukan, cacian, umpatan akan sangat berharga bagi saya.

 
Back to top!