Cara Membuat, Mempercantik, Memperindah Kotak Komentar Blog yang digabungkan dengan Facebok dan Twiter unik dan terbaru 2012, mudah cepat.

Cara Membuat, Mempercantik, Memperindah Kotak Komentar Blog yang digabungkan dengan Facebok dan Twiter unik dan terbaru 2012




Kami telah mencoba selalu berinofasi untuk membuat sesuatu yang baru, yang dapat membuat blog kita meningkat Trafficnya, pasti berbagai cara kita lakukan. Kini kami mendukung usaha anda dalam postingan-postingan kami yang sangat bermutu dan berkualitas, semoga bisa menjadi sebuah kekuatan pada blog kawan-kawan.

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 kami Tanya mbah google “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.

Dan kami telah menggunakan ini.
Apakah kawan-kawan ingin menggunakannya juga-??

*Kami akan memberikan cara dengan mudah dan terperinci.
Semoga dapat bermanfaat.

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-??
Naahh…
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).  Jika alamat profil Rafi Aldiansyah Asikin adalah www.facebook.com/fian.rasyah, maka ID profil Saya adalah fian.rasyah
  • 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'

<d
iv class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:po
st.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='400'/>
  </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 10 dengan jumlah komentar facebook yang ingin ditampilkan
  • Kita bisa mengganti angka 400 dengan ukuran lebar kotak komentar yang diinginkan 
 8. Simpan template dan hasilnya bisa dilihat sendiri pada halaman postingan di blog Rafi Orilya ini. Selamat mencoba, semoga berhasil!

Selesai.... kan.

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):
  1. Masuk ke dasbor > rancangan > edit HTML > ceklis 'expand template widget'
  2. Dengan menggunakan Ctrl+F, cari kode class='comments' 
  3. Tepat di bawahnya, masukkan kode <b:if cond='data:blog.pageType != "static_page"'>
  4. Di bawah kode yang kita tambahkan tadi, akan kita temukan kode-kode tab kotak komentar yang sudah kita masukkan sebelumnya.
  5. Scroll ke bawah lagi dan temukan kode <div class='clear'/>
  6. Tepat di atas kode tersebut, masukkan kode </b:if>
  7. Simpan template

(Artikel Dilindungi)
Sertakan alamat blog ini jika mengcopy paste
hak Cipta Dilindungi

Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin

66 komentar

  1. tapi saaat saya melihat postingan blog dan yang sudah ada komentarnya, kok ngak kelihatan komentar melalui facebook dan twitter, kenapa ya

    BalasHapus
  2. Memang seperti itu.
    Tapi untuk mengetahui ada yg berkomentar atau tidak.
    coba saja masuk ke developer Facebooknya.
    thank's

    BalasHapus
  3. makasih gan udah berbagiilmunya .
    nice

    BalasHapus
  4. sama-sama sob...
    Ditunggu kunjungan balik.nya yaah...

    BalasHapus
  5. saya suka tampilan blog sampeyan

    BalasHapus
  6. Terima kasih, mas.
    Lagi target PR, niiih...
    Hehehe...

    BalasHapus
  7. blognya kog oc bgt sch..???

    di liat dr template'nya jg oc bgt...
    gmna cranya biar blog qu bisa seperti itu gan..??

    thankz yakz..??

    BalasHapus
  8. kok nggak bisa sob..?

    BalasHapus
  9. Widy Widya: Thank's yaah... blog km jga keren, ko...
    Aku pake template Uniq Transparent tp aku edit lagi, sendiri.
    Kalau sudah sering ketemu HTML, ntar bisa edit2 sendiri ko..

    ADMIN - HILMISHARE : Bisa, gan... mungkin tutor.nya ada yang agan lewat..
    Coba ulang dari awal.

    BalasHapus
  10. kalau tampilan komen supaya kayak punya'nya mas ini.
    lok boleh tau gimana caranya ya...?

    BalasHapus
  11. Salman : kirim pertanyaan di Fanpage, ajah... banyak yg bisa bantu dari team, kami.
    FanPage : Rafi Orilya Groups

    BalasHapus
  12. mau tanya nich kenapa komentar twitter ng muncul ya, yang diambil API kEYS yang mana ya Consumer key atau yang lainnya, mhon bantuannya
    terima kasih ya

    BalasHapus
  13. gan kalo class='comments' ga ketemu/ga ada gimana ?

    BalasHapus
  14. Allia : yang tulisan API key, yang bertuliskan digit angka-angka...
    Restu : Ingat jangan lupa centang => Expand Template Widget
    cari dengan tekan CTRL+F

    BalasHapus
  15. Thank's gan ats infoNya ...

    Kunjungi blog saya juga yah di sini

    BalasHapus
  16. Okee,masama...
    thank's kunjungannya :)
    Sudah berkunjung gan..
    Hahaha... korea semua, niih
    Ditunggu kunjugan baliknya

    BalasHapus
  17. Yohooo.... :)
    Thank's mba Ratih... ditunggu kunjungan baliknya.

    BalasHapus
  18. gan kenapa yah kotak komentarnya sudah jd cuman unk komentar teitternya error, bisa dilihat disini untuk gambarnya http://tescuyoy1.blogspot.com/2012/09/cekk.html

    BalasHapus
  19. Perhatikan code id=API_KEY&v=1'/>
    pada code tersebut API_KEY tidak menggunakan kutip.
    Pastikan Api Key Twitter anda benar...

    BalasHapus
  20. numpang tanya gan, yang API key itu yang code consumer key itu ya? terima kasih gan :)

    BalasHapus
  21. Yuppz.... benar sekali gan.
    Consumer Key = API Key
    :)

    BalasHapus
  22. saya sudah ikuti semua step nya tapi ga ada perubahan, kenapa ya gan? :(

    BalasHapus
  23. Pasti bisa gan...
    Coba kalo mau lakuin step2.nya
    COPAS semua dulu di MS.Word
    biar bisa cek mana... yang salah.

    BalasHapus
  24. gan tolongin saya,,bingung pasang facebook coment gagal mulu...

    BalasHapus
  25. ikutin aja langkah2 diatas, dengan benar...
    pasti bisa ko.
    asal template jangan gunakan yang classic

    BalasHapus
  26. Terima kasih mas...
    Insyaallah, yah mas-saya tunggu followe backnya juga.
    :)

    BalasHapus
  27. makasih gan,sudah bisa.tolong kunjung balik

    BalasHapus
  28. Sama-sama, gan...
    Oke, gan- meluncur. hehehe.

    BalasHapus
  29. Thanks gan,,,visit back http://zlayerkiller.blogpot.com

    BalasHapus
  30. gang untuk buat api twitter di Callback URL: di isi apa..? mohon infonya lebih lanjut

    BalasHapus
  31. @caya : yupz.... masama gan.. :)
    @syamsul : pake API twitternya aja gan... klik link untuk buat API.nya

    BalasHapus
  32. gan, blog ane kotak komentarnya gak langsung tampil, itu bagaimna mngtasinya supaya langsung tampil dengan postingan?

    BalasHapus
  33. Ke Setelean => Pos dan Komentar => Pada bagian komentar ganti menjadi "Tersemat" :)

    BalasHapus
  34. yuk yang pengen tinggalkan komentar ke sini:
    blog sy dofollow. Pagerank 2.

    BalasHapus
  35. .. itu comment blog dulu yg terlihat ato fb?!? cz aq udah nyoba namun comment fb yg terlihat ..

    BalasHapus
    Balasan
    1. komentar blog yang terlihat... :)
      bsa langsung dipraktekkan..

      Hapus
  36. Saya coba tutorial nya ya sob! Berguna banget nih .. 8-)

    BalasHapus
  37. Mantap...Admin ntar saya coba

    BalasHapus
  38. mantap bos....
    mmpir di blog baru ku ya sobat http://rizalblest.blogspot.com

    BalasHapus
  39. wah patut dicoba ini bang, biar makin cantik tampilan blog nya hehe

    BalasHapus
  40. http://hikmatulahnuralamsyah.blogspot.com/2014/06/sebelum-tuhan-yang-menyadarkan.html

    BalasHapus
  41. gan tu ukuran gambar y bisa di kecilin tida soalanya terlalu besar ?

    BalasHapus
    Balasan
    1. waduh engga bisa mas.. tp klo mas mau ngubah sendiri bisa ko

      Hapus
  42. Terima kasih infonya menambah pengalaman baru

    BalasHapus
    Balasan
    1. Iya gan, sama-sama :) thank's sudah berkunjung dan berkomentar :)

      Hapus
  43. Iya selamat ya, pasti saya kunjungi :)

    BalasHapus
  44. Mas tab komentarnya berhasil tak tambahkan tapi kok yang twitter tidak keluar apapun yah

    BalasHapus
    Balasan
    1. Mungkin ada yang kurang mas ikuti dari semua langkah2 diatas, coba perhatikan lagi :)

      Hapus
  45. Berhasil Gan
    Lihat Komentar Blog ku http://pengembarahitam.blogspot.com

    BalasHapus
  46. wah keren nih, dicoba sekali pasang di blog ane langsung joss... !!!
    jangan lupa mampir ke blog ane ya,

    BalasHapus

Komentar anda sangat dibutuhkan bagi kemajuan kami untuk terus berkarya.
Diharapkan :
* Berkomentarlah dengan bahasa yang baik
* Tidak ada unsur SARA, SPAM, PORNO
* Tidak merugikan orang lain
* Menunjukkan identitas yang jelas bukan Anonim

Diperkenankan :
* Komentar promosi link web anda
* Kritik & Saran

[Protected] by DMCA Protection Pro™
EmoticonEmoticon