Alhamdulillah setelah saya selesai menuliskan sebuah tutorial cara membuat komentar facebook dan blog berdampingan,sekarang saya juga telah selesai kembali membuat sebuah tutorial satu lagi,yaitu cara membuat komentar facebook,blog,dan twitter berdampingan,di sini selain kita dapat berkomentar menggunakan facebook dan akun blogger,kita juga bisa berkomentar dengan akun twitter.Jadi sedikit lengkap sudah kotak komentar di blog kita karena terdapat tiga kolom komentar.
Untuk cara pembuatannya masih cukup sederhana,seperti tutorial-tutorial yang lainnya,sobat hanya perlu edit template blog sobat,tapi jangan lupa seperti biasa,backup dulu template sobat sebelum di edit,untuk jaga-jaga supaya apabila nanti terjadi kesalahan,template sobat sudah aman.Untuk cara-caranya silahkan sobat baca di bawah ini;
Pertama yang kita butuhkan adalah
- APP ID (pada facebook)
- API Key (pada twitter)
- Profil_Id (pada facebook)
Bingung cara membuatnya-??
Naahh…
Langsung saja untuk mendapatkan API Key buatlah aplikasi di Twitter,
Untuk membuat nya KLIK DISINI
Jika sobat belum bisa cara membuatnya silahkan baca Cara Membuat Api Key Atau ID Aplikasi Di Twitter
kemudian ikuti langkah-langkah yang diajukan. (mudah)
Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper
Untuk membuatnya KLIK DISINI
Jika sobat juga belum bisa cara membuatnya silahkan baca Cara Membuat ID Aplikasi Facebook Untuk Blog
kemudian ikuti langkah-langkah yang diajukan. (juga mudah)
Untuk Profil_id facebook sobat tinggal ambil username pada facebook,contoh www.facebook.com/HarySukaSuka.Username yang saya beri warna merah itulah yang sobat gunakan
Sekarang selesai langkah pertama.
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.
- Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Centang 'Expand Template Widget'Tekan tombol Ctrl+F
- Masukan script di bawah ini tepat di bawah kode <head> ,sobat bisa gunakan ctrl+f untuk mencari kode <head> tersebut.
<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&v=1'/>
- Masukan profi_id facebook sobat,app_id facebook sobat dan api_key twitter milik sobat pada script di atas.
- Berikutnya cari kode <div class='comments' id='comments'>
- Kemudian taruh script di bawah ini tepat di bawah kode <div class='comments' id='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'/> 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='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
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 500 dengan ukuran lebar kotak komentar yang diinginkan
- Selesai..dan hasilnya bisa sobat lihat sendiri setelah semuanya di jalankan dengan baik.
Untuk DEMO nya silahkan klik tulisan di bawah ini.
Okee,,selamat mencoba,dan semoga berhasil...
Postingan
