Hy teman-teman bertemu lagi dengan aku hisyam yahya Maaf Ya kalau aku
jarangan posting maklum namanya juga orang sibuk banyak perkerjaan
hehehe kayak orang penting saja ya.
Oh ya karena ini ada teman aku yang requst Cara Menggabungkan Kotak Komentar Facebook, Twitter Dengan kotak Komentar Blogger maaf ya sob baru bisa buatin tutornya..oke dah Langsung saja ke tutorialnya..
Screen Shoot
Jika Anda Tertarik dengan itu silahkan ikuti langkah-langkah dibawah ini:
Fitur-fitur yang dibutuhkan untuk Membuat Kotak Komentar Facebook, Twitter Dengan kotak Komentar Blogger adalah sbagai berikut:
- App ID [Facebook]
- Username Facebook
- Api Key [Twitter]
Langsung saja untuk mendapatkan API Key buatlah aplikasi di Twitter,
Untuk membuat nya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)
Sedikit tambahan untuk aplikasi di twitter ubah pengaturan di Tap Setting. di bagian bawah ada Application type nah disana pilih Read and Write. kemudian simpan dengan mengeklik updates this twitter aplikasi setting. (Supaya tidak error pada saat berkomentar lewat twitter)
Untuk mendapatkan APP ID buatlah aplikasi di Facebook Devoleper
Untuk membuatnya KLIK DISINI
kemudian ikuti langkah-langkah yang diajukan. (mudah)
Dan Selesai Deh.....
Sekarang Waktunya untuk pengeditan ditemplatenya hehe sebelum diedit templatenya Anda Download dlu ya takutnya ntar kalau gak suka atau kalau ada yang error langsung balikin ajja dia seperti semula.
setelah selesai download templatenya sekarang ikuti lagkah-langkah yang ini:
- Login Blogger Anda Sendiri
- Pilih dan Klik rancangan, tata letak/ Design
- Pilih Edit HTML
- Centang 'Expand Template Widget'
- Tekan tobol CTRL + F / F3 lalu ketikan dan cari Code <head>
- Setelah ketemu code <head>
- Masukkan code berikut ini tepat dibawah kode <head>
<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'/>
- Perhatikan Code Yang berwarna Orange :
Kita juga bisa mengeset username dengan masuk ke pengaturan akun /Account Settings > username /nama pengguna > email /suting.
Ganti tulisan APP_ID dengan ID Aplikasi facebook kita yang tadi kita buat sebelumnya
Ganti tulisan API_KEY dengan API KEY dari aplikasi twitter yang kita buat sebelumnya
- Setelah selesai sakarang cari code class='comments'
- Masukkan kode berikut tepat di bawah kode 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='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- Perhatikan kode berwarna merah:
Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan
- Simpan template dan hasilnya bisa dilihat sendiri pada halaman postingan di blog saya ini. Selamat mencoba, semoga berhasil!
Sangat Bermanfaat Buat Blogger yang newbie seperti ane ijin coba sob
ReplyDeletesilahkan sob .. ^o^
Deletethankz ya kak :rolled:
ReplyDeleteUntuk yang twit, itu aku coba cek di demo dan gwe coba comment, tapi kog eror ya,...
ReplyDeletedi srciptnya udah bner blum,...
udah bener kak.. :(
Deletedan maaf untuk demonya dikarenakan saya ganti template jadi demonya tidak ada.
dan dlu pass gue coba trik itu berhasil kak.
mungkin kak lupa untuk setting API KEYnya coba setting API KEY nya kak.. :rolled:
Klok Aku Masalahnya LAen BRo
DeleteMasalahnya bgni,
Element type "meta" must be followed by either attribute specifications, ">" or "/>".
Coba Daur Ulang LAgii ,,
wah mungkin ada yang salah tuh script agan..
Deleteyang lainnya ajja gak ada maslah sama scriptnya tuh gan.
mungkin agan kali copy scriptnya kurang lengkap... ;)
makasih gan..
DeleteWork ,
oia gan..?
untuk masalah tabnya gan..?
kalo biasanya untuk memuat halaman posting tab komentar yang selalu terbuka pada awal melihat postingan kan tab facebook ,
kalo membuatnya untuk tab awalnya tab komentar blogernya gimana..?
coba rubah [code] class="omments-tab" [/code] pada commentar blogger ganti dengan [code] class="js-default-tab comments-tab" [/code]
DeleteMantap tisnya,ijin praktek gan.
ReplyDeleteMakasih.
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
ReplyDeleteehm :Q sudah setting API_KEY twitter qmw...
Deleteklo gak disetting bkalan mncul pesan errornya... :D
untuk melihat API_KEY itu pada bagian mana gan?
ReplyDeleteapa seperti APP_ID gan
sory baru bisa bales mas maf lagi banyak kerjaan mas ..
Deletebukan mas ..
masnya udah bikn blum API KEYnya mas..
klo blum bikin dlu appsnya mas ..
ntar da kogh apikeynya mas..
infonya bagus, thanks ya , , ,
ReplyDeletevisit ksini juga ya,, http://sayetmdahri.blogspot.com
nice gan :D
ReplyDeleteInformasi yang membantu sekali, saya mau tanya, yang tanpa jquery ada tidak ya? soalnya diatas itu banyak sekali script2 js. dan saya tidak terlalu sudah kalau blog saya banyak script-script jsnya
ReplyDeletewah kyaknya gak ada tuh mas soalnya dia menggunakan efect js untuk tampilannya mas.. ^_^
DeleteTERIMAKASIH, tetapi komentar tweetnya kok gak bisa ya?
ReplyDeletetrimakasiih, yuk mampir
ReplyDelete