Monday, June 25, 2012

Cara Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger

Cara Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger- Mungkin sudah tidak asing lagi ketika kita membuat kotak komentar facebook di blog yang sudah banyak di bahas di blog-blog lain, dan yang akan kita bahas kali ini adalah bagaimana Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger dan juga kita dapat mengetahui komentar terbaru yang masuk.

Gimana sob tertarik untuk membuatnya? Baiklah langsung saja ikuti langkah-langkahnya di bawah ini:

Cara Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger



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

Yang kita butuhkan adalah :
- APP ID (pada facebook)
- API Key (pada twitter)
- ID Blogger (pada bglogger)

Bingung cara membuatnya?
Langsung saja untuk mendapatkan API Key buatlah aplikasi di Twitter,
Untuk membuat nya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper
Untuk membuatnya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)

Untuk mendapatkan ID Blogger,
Kita masuk pada blogger kemudian lihat pada Address Bar (copy angka setelah ID=…….)

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&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).  Seperti alamat facebook saya adalah https://www.facebook.com/profile.php?id=1823916177, maka ID profil Saya adalah 1823916177
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 sebelumnya

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'/> 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'>

7. Perhatikan kode berwarna merah:

Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
Kita bisa mengganti angka 100 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan
 

8. Simpan template dan hasilnya bisa dilihat sendiri pada halaman postingan di blog saya ini. Selamat mencoba, semoga berhasil!

Selesai.... kan.

Tambahan ilmu :

Cara Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger

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>
Simpan template


Nb.
Apabila kode class='comments' tidak ada, coba cari kode seperti ini div class='comments' id='comments'> atau sejenisnya, jika terdapat 2 kode tersebut letakkan dibawah kode yang ke dua

Untuk melihat orang yang berkomentar pada komentar facebook di blog kita silahkan sobat semua dapat mengunjungi  https://developers.facebook.com/tools/comments/ untuk cek komentar terbaru yang masuk.
Demikian turitorial Cara Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger yang bisa saya share, apabila ada pertanyaan silahkan sobat semua dapat berkomentar di bawah ini. Terimakasih





G+

Komentar Anda

 
Indoking (Kumpulan Berbagai Macam Informasi) © Copyright 2015 - Designed by Muhammad Iqbal
Back to top
Selamat Datang di www.indoking.blogspot.co.id (Download Mp3, Software, Games, Film, ebook, Chord Gitar, Tips and Trick, Operator Sekolah, Android, dll). Terima Kasih Atas Kunjungannya, Jangan lupa Komentarnya, Dan Berkunjunglah Kembali Untuk Mendapatkan Informasi Terbaru 2016.