Langsung saja, kami telah mencoba berbagai cara untuk membuat seperti
yang anda lihat pada gambar. Awalnya kami hanya menggunakan penggabungan
Blogger Comment dengan Facebook Comments, tapi kami melihat banyak juga
saat ini para penggguna Twitter Mania, kami mencari solusi sebuah
inofasi, akhirnya ketemulah “Cara Membuat Aplikasi di
Twitter” dan kami mencoba menganalisa dengan cermat. Seperti inilah yang
dapat kami lakukan, menggabungkan 3 komentar langsung (Blogger,
Twitter, Facebook) sehingga membuat komentar pada blog kita menjadi
indah. Dan kami langsung mempraktekkannya pada blog kami, akhirnya
berhasil. Apakah kawan-kawan ingin menggunakannya juga?
Untuk membuat kotak komentar Blogger, Twitter, Facebook dengan digabungkan ikuti langkah dibawah ini :
1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Centang 'Expand Template Widget'
Untuk membuat kotak komentar Blogger, Twitter, Facebook dengan digabungkan ikuti langkah dibawah ini :
Yang kita butuhkan adalah :
- APP ID (pada facebook)
- User Name Facebook
- API Key (pada twitter)
API Key diperoleh dengan membuat aplikasi di Twitter yang dapat anda lakukan Disini kemudian ikuti langkah-langkah yang dianjurkan.
Sedikit tambahan untuk aplikasi di twitter ubah pengaturan di Tap Setting. di bagian bawah ada Application type nah disana pilih Read and Write. kemudian simpan dengan mengeklik updates this twitter aplikasi setting. (Supaya tidak error pada saat berkomentar lewat twitter)
Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper, yang dapat anda lakukan Disini, kemudian ikuti langkah-langkah yang diajukan. (mudah). 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.
1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Centang '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&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). Seperti alamat facebook saya adalah www.facebook.com/PapuaBengkelMusik, maka ID profil Saya adalah "PapuaBengkelMusik".
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 yang tadi kita buat sebelumnya Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat sebelumnya5. 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'/> 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'>
7. Perhatikan kode berwarna merah:
Tambahan ilmu :
Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan. dapat juga mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan dan angka 500 dengan ukuran lebar kotak komentar yang diinginkan8. Simpan template dan hasilnya.
Tambahan ilmu :
Untuk menghilangkan ikon kotak komentar dari halaman statis, lakukan langkah-langkah berikut (setelah kita berhasil memasang kotak komentar facebook dan twitter di blogger):
Masuk ke dasbor > rancangan > edit HTML > ceklis 'expand template widget'
Dengan menggunakan Ctrl+F, cari kode class='comments'
Tepat di bawahnya, masukkan kode <b:if cond='data:blog.pageType != "static_page"'>
Di bawah kode yang kita tambahkan tadi, akan kita temukan kode-kode tab kotak komentar yang sudah kita masukkan sebelumnya.
Scroll ke bawah lagi dan temukan kode <div class='clear'/>
Tepat di atas kode tersebut, masukkan kode </b:if>
Tidak ada komentar: