Sahabat blogger, mungkin tutorial seperti ini mungkin sudah banyak di share oleh sahabat blogger yang lain, namun bang dadan coba share kembali siapa tahu aja ada para pengunjung blog cbd yang belum tahu caranya. dan bagi sobat yang ingin meliihat DEMO nya silahkan lihat saja pada kotak komentar dibawah blog ini.
Oke kalau begitu kita langsung saja pada tahap pembahasan:
Cara Membuat Komentar Blog, Facebook, dan Twitter Berdampingan
Sebelum sobat menerapkannya pada blog sobat, terlebih dahulu sobat harus mempunyai tiga ID sebagai berikut:
- PROFIL_ID (Facebook)
- APP_ID (Facebook)
- API_Key (Twitter)
2. APP_ID adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar facebook, yang belum punya silahkan buat disini
3. APP_Key adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar twitter, yang belum punya silahkan buat disini
2. Masuk ke dasbor/rancangan
3. Pilih Template kemudian Klik Edit HTML
*Jangan lupa centang expand template widgate
*Alangkah baiknya jika soba backup template terlebih dahulu, untuk berjaga-jaga.
4. Cari kode <head> kemudian copy kode berikut ini dan taruh dibawah tag <head>
Berikut Kodenya
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://codecbd.googlecode.com/files/CommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://codecbd.googlecode.com/files/TweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_Key&v=1'/>
Keterangan:
Silahkan ganti tulisan yang berwarna biru dengan Data ID sobat masing-masing. sesuai panduan diatas.
5. Masih di Edit HTML, Kemudian sobat cari lagi kode berikut class='comments' Atau <div class='comments' id='comments'> biasanya terdapat 2 kode tersebut, kalau sudah ketemu copy kode berikut ini dan simpan dibawah kedua tag class='comments' Atau <div class='comments' id='comments'>
Berikut Kodenya
<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 == "item"'>
<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'>
6. Klik simpan template
7. Selesai