» » Cara Memasang Kotak Komentar Facebook dan Twitter di blog

Cara Memasang Kotak Komentar Facebook dan Twitter di blog


Untuk meningkatkan traffic di blog kita, ada berbagai cara yang bisa dilakukan. Salah satunya adalah mempermudah pengunjung untuk berkomentar di setiap halaman postingan. Nah, inilah yang akan Paman bahas kali ini, cara bagaimana memasang kotak komentar facebook dan twitter yang berdampingan dengan kotak komentar blogger.

Untuk mengaktifkan fitur ini, sebelumnya kita harus mempunyai API KEY yang bisa didapatkan setelah membuat applikasi twitter. , masuk ke akun twitter lalu buat aplikasi baru di sini. Sedangkan untuk mengaktifkan fitur komentar facebook, kita tidak harus mempunyai APP ID. Walaupun begitu, supaya kita bisa memoderasi komentar dan mendapatkan pemberitahuan setiap ada komentar baru, kita harus memiliki APP ID yang bisa didapatkan setelah kita membuat aplikasi facebook di sini. 

Sebelum memulai, terlebih dulu download template lengkap untuk berjaga-jaga barangkali kita ingin mengembalikan ke template semula atau jika terjadi kesalahan. Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.
1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Ceklis 'Expand Template Widget'
2. Tekan tombol Ctrl+F lalu cari kode <head>
3. 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'/>
4. Perhatikan kode berwarna merah:
  • Ganti tulisan Profile_ID dengan ID profil atau username facebook kita. ID profil bisa berupa angka atau huruf. Cara mengetahui ID profil kita adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar).  Jika alamat profil Paman adalah www.facebook.com/paman.guru, maka ID profil Paman adalah paman.guru
  • Kita juga bisa mengeset username dengan masuk ke account settings (pengaturan akun) > username (nama pengguna) > edit (sunting).
  • Ganti tulisan App_ID dengan ID Aplikasi facebook kita
  • Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat
5. Berikutnya, cari kode class='comments'
6. Masukkan kode berikut tepat di bawah kode class='comments'

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

7. Perhatikan kode berwarna merah:
  • 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 400 dengan ukuran lebar kotak komentar yang diinginkan 
 8. Simpan template dan hasilnya bisa dilihat sendiri pada halaman postingan di blog Paman ini. Selamat mencoba, semoga berhasil! 


(update 21/01/2012)
Untuk menghilangkan ikon kotak komentar dari halaman statis, lakukan langkah-langkah berikut (setelah kita berhasil memasang kotak komentar facebook dan twitter di blogger):


  1. Masuk ke dasbor > rancangan > edit HTML > ceklis 'expand template widget'
  2. Dengan menggunakan Ctrl+F, cari kode class='comments' 
  3. Tepat di bawahnya, masukkan kode <b:if cond='data:blog.pageType != "static_page"'>
  4. Di bawah kode yang kita tambahkan tadi, akan kita temukan kode-kode tab kotak komentar yang sudah kita masukkan sebelumnya.
  5. Scroll ke bawah lagi dan temukan kode <div class='clear'/>
  6. Tepat di atas kode tersebut, masukkan kode </b:if>
  7. Simpan template

Subscribe to receive free email updates: