Cara membuat kotak komentar Facebook , Twitter dan Blog


Kemarin saya mampir di Blog teman saya buat nyari wiget unik untuk di pasang di blog saya , tapi ane enggak nemuin wiget yang ane cari , tetapi saya dapat sesuatu yang menarik yaitu Kotak komentar Twitter sama Facebook berdampingan dengan kotak komentar blog . Awalnya sih agak enggak percaya ,emang ada ya kotak komentar twitter ? , setelah saya baca dan praktekan ternyata temen saya ini memanfaatkan salah satu kelebiha twitter bisa ngetweet dan otomatis url artikel itu di sebutin di tweet orang itu .

Yang masih heran coba lihat cara kerjanya berikut ini , nah tau kan maksud saya.
Sekarang kita ke tahap pembuatan kotak kometar ini , yang kita persiapkan terlebi dahulu adalah
  • Profile_ID (facebook)
  • APP_ID (facebook)
  • API_Key (twitter)
Yang belum mempunyai material di atas silahkan baca di bawah ini.
  •  Profile_ID adalah ID account facebook kamu contohnya punya saya "https://www.facebook.com/waone.sayank.dia" jadi Profile_ID saya adalah "waone.sayank.dia"
  • APP_ID adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar facebook, yang belum punya silahkan buat  
  • APP_Key adalah ID dari aplikasi yang akan kita gunakan untuk kotak komentar twitter, yang belum punya silahkan buat  
Kalu semuannya sudah di siapkan , mari kita mulai bereksperiment .

1. Masuk ke akun blogger ,*Ingat , jangan lupa backup terlebi dahulu template blog kamu* kemudian ke Rancangan > Edit HTML > Centang terlebih dahulu 'Expand Template Widget'
2. Masukan script di bawah ini tepat di bawah kode <head> . Agar lebih mudah tekan Tombol
    Ctrl + F kemudian masukkan <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'/>


3. Masuk kan Profile_ID kamu , APP_ID facebook kamu dan API_Key twitter kamu , ke dalam Script di 
    atas
4.  Masuk kan Script di bawah ini tepat di code 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='400'/>
  </b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
5. Amati kode yang berwarna kuning
  • Comments , Tweets dan Komentar dapat di ganti sesuka hati kita , karena ini adalah judul dari kotak komentar masing-masing
  •  Angka 10 menrupakan jumlah komentar yang di tampilkan , dapat anda rubah
  • Angka  400 adalah lebar dari kotak komentar , bisa anda rubah juga.
    6. Simpan template blog anda , dan lihat hasilnya , mudah-mudahan sukses ya.


    Comments

    1. gan ane bisa tapi yang twiternya ga bisa di koment .. apa da yang salah nih sata masukan API key?

      ReplyDelete
      Replies
      1. ohh mungkin itu template blog anda yang tidak suport , saya dulu juga pernah mengalami hal itu , solusinya ganti template blognya saja :D

        Delete
      2. ngga juga bozz !!!
        penempanya aje .. yang musti teliti ?
        mungkin 2 kolom berpengaruh mana yang akan digunakan !!


        wkwkwkwk.... ngomong apa'an .. yah gw ??? hahahha just kidd
        Kunbalnya masbro !!!

        Delete
    2. template ane jg ga bisa di pasang comment fb gan :( http://mazbron.com

      ReplyDelete
      Replies
      1. kalo fb kebanyakan pada bisa gan , coba di cek lagi script ente :D

        Delete
    3. This comment has been removed by the author.

      ReplyDelete
    4. gini udah bener lom gan ?
      fb -> yg dibawah head

      < met*content='restupaxxxxxx'property=dst ama yg
      < met* content='3515360215xxxxx' property=' dst

      twitter ->
      < scrip* src='http://platform.twitter.com/anywhere.js?id=0H1134YW9lcm83xxxxxx&v=1'/>

      ama yg ni letaknya bener kan ?
      class='comments' id='comments'>
      <di*v class='comments-tab' id='blogger-comments' title='Comments from Blogger dan seterusnya

      ReplyDelete
    5. mas ko saya ga work ya kotak komentar blogernya, pas ane test komentar di kotak komentar blogger malah ga muncul mas komentarnya tapi kalo ane test di fb dan twitter malah work .
      aduh mohon penjelasannya mas dan mampir ke blog ane yoo

      ReplyDelete
      Replies
      1. coba di cek kembali , bagian settingan di blog ente gan .

        Delete
    6. 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

      ReplyDelete
      Replies
      1. coba di perbaiki kembali pada API_key twitternya

        Delete
    7. gan ane sukses... tapi kalo ada yg komen lewat facebook kok gak ada pemberitahuannya yah?? atau emang gak ada pemberitahuan di facebook kita???

      bales lewat email atau fb aja nyah di jerinx25@yahoo.co.id

      ReplyDelete
    8. gan ane kga ga ada class='comments' ya apa ada kode lain

      ReplyDelete
    9. mas wawan API_ key twitter itu = konsumen kunci bukan, contoh API_key seperti ap

      ReplyDelete
    10. gagal....mas bro....ada yg versi laen gak neh..

      ReplyDelete
    11. kurang onclick='javascript:commentToggle("#fb-comments");' sob makanya gak jalan

      ReplyDelete
      Replies
      1. ohh tanks gan koreksinya :D , nanti saya cek ulang kembali

        Delete
    12. maaf gan... saya sudah mencoba dan template berhasil di simpan tapi kenapa tidak muncul ya gan????

      ReplyDelete
    13. This comment has been removed by a blog administrator.

      ReplyDelete
    14. This comment has been removed by a blog administrator.

      ReplyDelete
    15. This comment has been removed by a blog administrator.

      ReplyDelete

    Post a Comment

    Popular posts from this blog

    Jadwal Acara JEC (Jogja Expo Center) 2012

    3 Cara Move On dari sang Maestro

    Mengatasi Game Guard Steam Dota 2