Header Ads

Memasang Komentar di Blogger, Blogger, Twitter dan Facebook dengan 3 kotak berdampingan


Memasang Komentar di Blogger,
Blogger, Twitter dan Facebook dengan 3 kotak berdampingan

Sambil nunggu waktunya Sahur, putar kesana kemari nyampe kopyor utek e akhir bisa juga. Sempat lirik sana lirik sini di tempat nya tetangga, dicoba TUTnya malah kacau slide show.. Hadew...
Terus mencoba tanpa henti akhir gabungkan semua TUT tetangga, mencoba ilmu analisa dengan metode semampu saya, eh akhirnya berhasil juga.
Upz.., tapi belum maksi lho.. Tolong juga kritik juga sarannya dari sobat semua..
Supaya saya ga lupa mending saya share disini, sekalian buat catatan online saya.. Siapa tau juga berguna buat sobat semua yang mampir disini.
Tanpa ba bi bu sekarang kita menuju TKP.
Kita persiapkan dulu sarana nya :
  1. Akun blog sobat.
  2. API KEY dari Tweeter
  3. App ID dari Facebook ( Cara buat App_ID Facebook ).
  4. Kopi, rokok juga camilan nya.. Hehehe..


Langkah-langkahnya :
1. Masuk ke akun blogger, lalu pilih Template -> Edit HTML. Tekan tombol Ctrl+F lalu cari kode <head>. 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://zestnet.googlecode.com/files/commentblog.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://zestnet.googlecode.com/files/tweetcomment.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=9hy9V4I9KNoAX87q72qbw&amp;v=1'/>
Perhatikan kode berwarna BIRU:
Ganti tulisan Profile_ID dengan ID profil atau username facebook sobat. Ingat Profile_ID ya..?? Bukan url/alamat Facebook. Cara mengetahui Profile_ID sobat, dengan membuka halaman profil dan lihatlah kolom alamat (address bar). Jika alamat profil sobat adalah www.facebook.com/zest.bright, maka ID profil  adalah zest.bright
Ganti tulisan App_ID dengan ID Aplikasi facebook kita
Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat
2.  Berikutnya, cari kode class='comments' di menu Edit HTML
Tekan tombol Ctrl+F,  isi dengan class='comments'
Lalu 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'/> Comments
</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='400'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Perhatikan kode berwarna BIRU :
- 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 400 dengan ukuran lebar kotak komentar yang diinginkan
3. Save template sobat. Selesai..

Selamat mencoba...
Semoga bermanfaat..

* Sumber bacaan tetangga lupa alamat nya salah satunya, Rio Anderta dll

Tidak ada komentar

Diberdayakan oleh Blogger.