Cara membuat kotak komentar Blog Twitter Facebook

Cara membuat kotak komentar Blog Twitter Facebook - Malam ini sebelum sholat terawih saya mau share bagaimana cara membuat kotak komentar 3 kolom tersebut secara berdampingan yakni Blog, Twitter, Facebook. Untuk menjawab pertanyaan sahabt saya sesama blogger. Untuk lebih jelasnya bisa dilihat seperti screen shot di bawah. :

Untuk membuat kotek 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)

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

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
Untuk membuatnya KLIK 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&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 www.facebook.com/muhammad.refai, maka ID profil Saya adalah muhammad.refai
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'
7. Kalo kaian menemukan 2 kode yang sama pilih yang ke 2 sob

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

8. 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

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

Sekian dulu hasil Master Copast kali ini artikel Tutorial Blog, yang berjudul Cara membuat kotak komentar Blog Twitter Facebook. Semoga bermanfaat Master Copast

13 komentar:

Aluwy ID mengatakan...: Mantabs Thanks Gan Udah Mau Share Buat Ane... Langsung Praktek; 29 Juli 2012 pukul 05.23
Pekalongan Cyber4rt mengatakan...: mantep kak, izin praktek :); 29 Juli 2012 pukul 07.34
Copas Master mengatakan...: @alwy & @Pekalongan : Ini sudah saya coba dan berhasil.. Namun tidak semua template blog atau HTML blog mendukung cara ini. Untuk masalahnya dimana dan letak kesalahnya saya tidak tahu pada template lain.. jadi mohon maaf jika template sobat tidak mendukung cara ini Copast Master; 29 Juli 2012 pukul 07.38
Boedak Capsule mengatakan...: assalamualaikum...
bolehkah saya berkunjung malam; 29 Juli 2012 pukul 07.52
Copas Master mengatakan...: @ Bodeak silahkan saja gan.. menginapun jika ingin silahkan Copast Master; 29 Juli 2012 pukul 08.02
Pekalongan Cyber4rt mengatakan...: Bisa tolong kalau lebih baiknya agan tambahin script buat pendukung script facebook ... :)
semoga membantu ....; 29 Juli 2012 pukul 08.34
awan mengatakan...: weleh weleh ternyata ada juga yang seperti ini :D wahhh mancappppppppppppppppppppppppp
ijin Copy ke NOTEPAD ^_^; 29 Juli 2012 pukul 08.41
Copas Master mengatakan...: @pekalongan : Itukan sudah ada script faceboknya gan.

@awan : Silahkan sob sertakanlah sumbernya Copast Master untuk kenyamanan HKI; 29 Juli 2012 pukul 17.11
AdmiralPratama mengatakan...: like this post; 1 Maret 2013 pukul 04.39
Unknown mengatakan...: trimss saya baru memulai; 16 Juli 2013 pukul 17.29
Animasi grafis komputer mengatakan...: thank gan, baru belajar nhe . .; 6 Juni 2014 pukul 18.51
Unknown mengatakan...: trims bos; 6 Juli 2014 pukul 09.12
Informasi Lowongan Kerja Terbaru mengatakan...: Good (y); 13 Agustus 2014 pukul 18.47