Senin, 17 Desember 2012

Cara membuat kotak komentar Facebook , Twitter dan Blog

Cara membuat kotak komentar Facebook , Twitter dan Blog




Hai Sobat kali ini saya mau ngasih Cara Membuat Kotak Komentar Twitter Dan Facebook Di Blog 
Langsung saja, saya 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.


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)
nya-??
 
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"

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)


Kalau 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: http://syafiqnfsmw.blogspot.com

0 komentar:

Blogger Template by Clairvo