Membuat komentar twitter, facebook dan blog berdampingan

Pasang Komentar Twitter, Facebook dan Blog -- Hehehe... baru dapat informasi terupdate lagi dari blog tetangga , dan saya copas dengan tambahan dan sentuhan sendiri.Postingan kali ini memberikan tutorial tentang bagaimana memasang tiga komentar sekaligus dalam satu yaitu komentar twitter, facebook dan blog .Tentunya komentar tersebut dipasang dalam bentuk tab-view yang membuat komentar tersebut lebih elegan dan membuat komentar blog lebih bagus.

Untuk memasang komentar twitter, facebook dan blog kalian harus membuat aplikasi dari facebook dan twitter terlebih dahulu, tapi tenang karena membuatnya cukup mudah.Langsung saja ke tutorialnya, ikuti langkah berikut :

Untuk membuat kotek komentar Blogger, Twitter, Facebook dengan digabungkan ikuti langkah dibawah ini :

Yang kita butuhkan adalah :
- APP ID (pada facebook) Untuk membuat nya KLIK DISINI
- API Key (pada twitter ) Untuk membuatnya KLIK DISINI
- ID Blogger (pada blogger) login ke blogger lalu pada Address Bar (copy angka setelah ID=…….)

Langkah pertama sudah selesai ...

Masuk Langkah Kedua ...



  • Login ke blogger
  • Masuk ke edit HTML --> Centang 'Expand Template Widget'
  • Masukkan kode berikut tepat di bawah kode </head>



 <meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&amp;v=1'/>

Keterangan : ganti warna biru dengan Profil_ID, APP_ID dan API_KEY yang sudah kalian buat tadi.


  • Copas kode <div class='comments' id='comments'> dan letakkan dibawah kode


<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</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='10' width='500'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'> 
Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan

  • Simpan template dan lihat hasilnya.


Tambahan !!! bagi yang ingin menghapus komentar tersebut dari Halaman Static , tinggan anda masukkan kode berikut :
<b:if cond='data:blog.pageType != "static_page"'> 
dan letakkan di bawah kode
 <div class='comments' id='comments'>
lalu scroll kebawah sampai ketemu kode
<div class='clear'/>
dan letakkan kode </b:if> tepat dibawah kode diatas.

Keterangan : kode untuk menghilangkan di halaman static ini masih sama letaknya dengan kode yang kalian copas tadi ( Langkah kedua pada step 1 )

1 comments:

Traima kasih sahabat, ternyata sangat mudah dimengerti, sangat bermanfaat sekli sob buat saya. Salam sahabat

Reply

Post a Comment

W a r n i n g !
Komentar anda tidak boleh mengandung unsur:
- Penghinaan atau Pelecehan.
- Spamming (Spam Comment).
- Link Aktif atau Anchor Text, dan sejenisnya.

Komentar akan muncul setelah di setujui.
Tulislah setiap kata dengan penuh kesopanan.

Terima kasih untuk kunjungannya.