blog browser

Tampilkan postingan dengan label twitter. Tampilkan semua postingan

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&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 == "item">
<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