Breaking News
Loading...
Friday, 14 September 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

21:09

 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)
- 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/djmemed, maka ID profil Saya adalah djmemed
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 10 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 :

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.
Diposkan oleh di 21:09
Share:

39 komentar:

  1. Pak Saloy8 October 2012 at 14:49

    Nais Inpo men :D . .

    ReplyDelete
  2. Reksi Wiranata15 October 2012 at 20:04

    mantaaapp ke wak?
    wkwkwk

    ReplyDelete
  3. Asep Priyadi6 November 2012 at 01:48

    Kalau kotak komentar kayak punya blog agan bisa di share ga gan,,bagus gan ane pengen.

    ReplyDelete
  4. Reksi Wiranata6 November 2012 at 19:40

    @Asep Priadioke ntarr saya share,,
    hehe,,
    makasih dah mampirrr

    ReplyDelete
  5. Asep Priyadi7 November 2012 at 03:21

    Pm aja gan,,,,hehehehe
    asep.priadi01@gmail.com

    ReplyDelete
  6. Asep Priyadi7 November 2012 at 04:06

    Comentar Fb nya ko ga tampil dihalaman fb nya sob?

    ReplyDelete
  7. Reksi Wiranata8 November 2012 at 19:54

    @Asep PriadiMemang Gak Tampil Di Fb Gan,,
    dia Cuman Nampil Di Blog Agan Saja !!
    HEhehehehe,,
    Ntarr La gann,,
    Ane Masih Sibukk nie gan Mok ngrim kotak komentar kayak saya ,,
    hehehe

    ReplyDelete
  8. Reksi Wiranata8 November 2012 at 19:54

    @Asep PriadiOk gan ntar saya PM !!
    Hehehe

    ReplyDelete
  9. Krisnamaha12 December 2012 at 17:48

    Saya ada masalah sedikit mohon bantuannya...
    Ada masalah saat komentar lewat twitter. Masih di deteksi eror. Masalahnya dimana yah? Padahal saya sudah ganti setingannya menjadi "Read and Write" tetap saja tidak mau. Mohon bantuannya :)

    ReplyDelete
  10. Reksi Wiranata12 December 2012 at 20:22

    mungkin agan salah di pengaturan twettsnya kali gann ??

    mn link blog agan ??
    saya pengen cek komentnya ??

    hehehe

    terimakasih dah mau berkunjung di blog saya ya all,,

    semoga nyaman berkunjung di blog saya ??
    hehehe

    ReplyDelete
  11. Reksi Wiranata8 January 2013 at 21:58

    @Zamrud Hijauoke gannn ,, makasih dah berkunjung

    ReplyDelete
  12. Unknown24 February 2013 at 13:19

    Masih baru banget ne blog aku sob..

    Kunjungannya ya..

    http://arbyoceano.blogspot.com/

    Makasih..

    ReplyDelete
  13. Unknown4 March 2013 at 23:29

    Komentar blogger, twitter dan facebooknya manjur gan. Terimakasih banyak ya gan, Keren. Lihat nih hasilnya di sini Hamba Mohon Ridho-Mu

    Thanks ya gan. Di tunggu ya di blog saya.

    ReplyDelete
  14. Unknown6 March 2013 at 01:30

    Wah Mantap Nih gan... Juga Boleh Visit Blog Saya ??
    Ini Blognya : http://trickinblog.blogspot.com/

    ReplyDelete
  15. KangSoul18 March 2013 at 19:18

    Mantab gan...!!!

    ReplyDelete
  16. Unknown27 March 2013 at 07:25

    bagus infonya gan, saya pake template sama ky agan, tp ko ga bisa ya di pasang komentar FB, Twit ??
    http://panjinasrullah.blogspot.com

    ReplyDelete
  17. KING HERBAL29 March 2013 at 00:56

    thanks info'x gan, bermanfaat sekali bagi saya ..

    ReplyDelete
  18. Unknown1 April 2013 at 23:36

    api key itu yg mana?

    ReplyDelete
  19. Unknown1 April 2013 at 23:42

    ndk bisa...

    ReplyDelete
  20. Admin22 April 2013 at 06:02

    ngga bisa gan

    ReplyDelete
  21. Anonymous1 May 2013 at 00:50

    makasih informasinya

    ReplyDelete
  22. Unknown28 May 2013 at 14:06

    mohon bantuan donk bwt cari class='comments' kok aq ga ktmu ya??
    thanks infonya..
    mampir juga ya di http://diditfulldownload.blogspot.com/

    ReplyDelete
  23. Detri HF5 June 2013 at 19:24

    This comment has been removed by the author.

    ReplyDelete
  24. Detri HF5 June 2013 at 19:26

    thanks gan buat infonya
    yang mau belajar gitar bisa mampir ke blog saya
    http://detrihf.blogspot.com/

    ReplyDelete
  25. Unknown29 June 2013 at 22:37

    komentar blog sama facebook bisa.
    hanya twitter yg ketika di klik tapi tidak terbuka kotak komentarnya.

    mohon bantuannya..
    [guminie.blogspot.com]

    ReplyDelete
  26. Mistikus Cinta16 December 2013 at 05:36

    Terima kasih atas tutorialnya

    ReplyDelete
  27. Unknown7 March 2014 at 02:59

    kang punya saya blum berhasil ne gan
    tolong di bantu gan please
    cek bataklyric.blogspot.com

    ReplyDelete
  28. Unknown14 April 2014 at 23:09

    tweet gak muncul -_-

    cek di http://r-vollutions.ga

    ReplyDelete
  29. Unknown3 May 2014 at 00:34

    Masih BeLom Paham Gan [-( .

    ReplyDelete
  30. andika25 June 2014 at 19:48

    mkasih gan ,izin nyoba gan cara-membuat-kotak-komentar-twitter nya,, postingan yang bagus dan bermanfaat ini layaknya di share ajja ,, nih saya bantu ngeshare ,, ,, jgn lupa kunbal nya di anprat.blogspot.com tmakasih skali lagi gan

    ReplyDelete
  31. Adnyana.com24 January 2015 at 20:15

    mantap ..nih salam dari http:www.adnyana.net

    ReplyDelete
  32. Fifi Surabaya17 February 2015 at 13:57

    Sdh aku pasang di blog aku dan langsung berhasil, silahkan di cek dan jgn lupa komentarnya ya teman-teman, klik disini > http://fifisurabaya.blogspot.com/2014/12/3-cara-mengembalikan-kesuburan-rambut.html

    ReplyDelete
  33. Woro Nur13 March 2015 at 23:49

    This comment has been removed by the author.

    ReplyDelete
  34. Woro Nur13 March 2015 at 23:52

    mantab tutorialnya nih, lgsung dicoba ...
    punya saya komen Twitter nya jika diklik tdk muncul kotak komentarnya..salah dmn ya mas? kotak statisnya juga msh muncul...

    mohon dibantu, terimakasih byk mas. jika berkenan mohon cek di:
    mysweetladyluck dotblogspotdotcom

    ReplyDelete
  35. Apri29 April 2015 at 02:25

    @Rekzy Wiranata

    nah itu dia gan yg ane bingung, blog ane yang pake kode ini 2 tapi yg 1 bisa tampil di FB tapi yang 1 nya gak bisa tampil

    ReplyDelete
  36. asd17 August 2015 at 16:54

    Terima kasih atas info nya

    ReplyDelete
  37. GUNUNG MAS PONSEL4 December 2015 at 17:17

    Ingat..,!! Kesempatan tidak akan datang untuk ke-2 kali!!! Kami Hadir Utk Menjawab Kebutuhan Anda.Terhadap Produk Elektronik.Transaksi Aman DanTerpercaya.Kami Menawarkan Berbagai Jenis Type HP,LAPTOP dan CAMERA.DLL, Dgn Harga TERJANGKAU/ SUPER PROMO DI GUNUNG MAS PONSEL TEMPAT BELANJA ONLINE AMAN DAN TERPERCAYA. 100% BEBAS PENIPUAN MINAT PIN BB: 7C22D79F HUB/SMS:0851-4515-5828 klik web resmi kami di http://gunungmas-phone.blogspot.com/ Ready Stock! Samsung Galaxy A8 Rp.2.900.000 Ready Stock! oppo R5 Rp.3.000.000 Ready Stock! Apple iPhone 5 32GB Rp.2.500.000 Ready Stock! Apple iPhone 5S 32GB Rp.3.000.000 Ready Stock! Samsung Galaxy A3 A300H Rp.1.500.000 Ready Stock! Samsung Galaxy A5 A500F Rp.2.000.000 Ready Stock! Samsung Galaxy E5 E500H Rp.1.500.000 Ready Stock! Samsung Galaxy Grand Prime SM-530H Rp.800.000. Ready Stock! Asus Zenfone 2 ZE551ML RAM 4GB Rp.2.000.000 Ready Stock! Samsung Galaxy S3 I9300 .Rp.1.500.000. Ready Stock! Samsung Galaxy S6 32GB Rp.3.300.000 Ready Stock! Samsung Galaxy Note N7100.Rp.2.000.000. Ready Stock! Samsung Galaxy Note 5 Rp.4.000.000 Ready Stock! Samsung Galaxy Note 4 SM-N910H Rp.3.500.000 Ready Stock! Samsung Galaxy Note 3 Rp.2.000.000 Ready Stock ! Samsung Galaxy S5 Rp.2.000.000, Ready Stock ! Samsung Galaxy S4 l9500 Rp.1.500.000

    ReplyDelete
  38. Motivator Indonesia1 March 2017 at 02:04

    ok pisan

    ReplyDelete
  39. gaga arizona11 July 2018 at 21:03

    mantap solder uap pisan euy. hatur nuhun akang ..

    ReplyDelete

Terima kasih telah berkomentar dengan mengikuti ketentuan sebagai berikut:
1. Komentar tidak menghina dan melecehkan.
2. Link hidup pada komentar otomatis akan terhapus!
3. Komentar SPAM otomatis dihapus!!!

Salam blogging...!

Subscribe to: Post Comments (Atom)
 
Toggle Footer