Kamis, 28 November 2013

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.

    sumber


    Diposting oleh di
    Label: , , , , , , ,

    Tidak ada komentar:

    Posting Komentar

    Langganan: Posting Komentar (Atom)