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 .
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.
gan ane bisa tapi yang twiternya ga bisa di koment .. apa da yang salah nih sata masukan API key?
ReplyDeleteohh mungkin itu template blog anda yang tidak suport , saya dulu juga pernah mengalami hal itu , solusinya ganti template blognya saja :D
Deletengga juga bozz !!!
Deletepenempanya aje .. yang musti teliti ?
mungkin 2 kolom berpengaruh mana yang akan digunakan !!
wkwkwkwk.... ngomong apa'an .. yah gw ??? hahahha just kidd
Kunbalnya masbro !!!
kalo fb kebanyakan pada bisa gan , coba di cek lagi script ente :D
ReplyDeleteThis comment has been removed by the author.
ReplyDeletegini udah bener lom gan ?
ReplyDeletefb -> 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
bener gan , coba di pasang
Deletemas 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 .
ReplyDeleteaduh mohon penjelasannya mas dan mampir ke blog ane yoo
coba di cek kembali , bagian settingan di blog ente gan .
Deletegan kenapa yah kotak komentarnya sudah jd cuman unk komentar teitternya error, bisa dilihat disini untuk gambarnya http://tescuyoy1.blogspot.com/2012/09/cekk.html
ReplyDeletecoba di perbaiki kembali pada API_key twitternya
Deletegan ane sukses... tapi kalo ada yg komen lewat facebook kok gak ada pemberitahuannya yah?? atau emang gak ada pemberitahuan di facebook kita???
ReplyDeletebales lewat email atau fb aja nyah di jerinx25@yahoo.co.id
gan ane kga ga ada class='comments' ya apa ada kode lain
ReplyDeletemas wawan API_ key twitter itu = konsumen kunci bukan, contoh API_key seperti ap
ReplyDeletegagal....mas bro....ada yg versi laen gak neh..
ReplyDeletekoq gak jadi ya sob...
ReplyDeletekurang onclick='javascript:commentToggle("#fb-comments");' sob makanya gak jalan
ReplyDeleteohh tanks gan koreksinya :D , nanti saya cek ulang kembali
Deletemaaf gan... saya sudah mencoba dan template berhasil di simpan tapi kenapa tidak muncul ya gan????
ReplyDeleteMantap makasih mas bro :D
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDelete