Monday, April 23, 2012

Cara Membuat Kotak Komentar Twitter dan Facebook Dengan Tap Berdampingan di Blogger

Bagikan ke teman

Bagikan ke teman


Kami telah mencoba selalu berinofasi untuk membuat sesuatu yang baru, yang dapat membuat blog kita meningkat Trafficnya, pasti berbagai cara kita lakukan. Kini kami mendukung usaha anda dalam postingan-postingan kami yang sangat bermutu dan berkualitas, semoga bisa menjadi sebuah kekuatan pada blog kawan-kawan.

Langsung saja, kami 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.

Dan kami telah menggunakan ini.
Apakah kawan-kawan ingin menggunakannya juga-??

*Kami akan memberikan cara dengan mudah dan terperinci.
Semoga dapat bermanfaat.

Untuk membuat kotek komentar Blogger, Twitter, Facebook dengan digabungkan ikuti langkah dibawah ini :

Yang kita butuhkan adalah :
- APP ID (pada facebook)

- User Name Facebook
- API Key (pada twitter)

Bingung cara membuatnya-??
Naahh…
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)

Sekarang selesai langkah pertama.
Sebelum memulai, terlebih dulu download template lengkap untuk berjaga-jaga barangkali kita ingin mengembalikan ke template semula atau jika terjadi kesalahan. Sekarang kita mulai langkah-langkah memasang kotak komentar facebook dan twitter di blogger.

1. Masuk ke akun blogger, lalu pilih Rancangan > Edit HTML > Centang 'Expand Template Widget'
2. Tekan tombol Ctrl+F lalu cari kode <head>
3. Masukkan kode berikut tepat di bawah kode <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'/>

4. Perhatikan kode berwarna merah :
 

Ganti tulisan Profile_ID dengan ID profil atau username facebook kita. ID profil bisa berupa angka atau huruf. Cara mengetahui ID profil kita adalah dengan membuka halaman profil dan lihatlah kolom alamat (address bar).  Seperti alamat facebook saya adalah www.facebook.com/djmemed, maka ID profil Saya adalah djmemed
Kita juga bisa mengeset username dengan masuk ke account settings (pengaturan akun) > username (nama pengguna) > edit (sunting).
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

5. Berikutnya, cari kode class='comments'

6. 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 == &quot;item&quot;'>
    <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'>

7. Perhatikan kode berwarna merah:

Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan
 

8. Simpan template dan hasilnya bisa dilihat sendiri pada halaman postingan di blog saya ini. Selamat mencoba, semoga berhasil!

Selesai.... kan.

Tambahan ilmu :

Untuk menghilangkan ikon kotak komentar dari halaman statis, lakukan langkah-langkah berikut (setelah kita berhasil memasang kotak komentar facebook dan twitter di blogger):
 

Masuk ke dasbor > rancangan > edit HTML > ceklis 'expand template widget'
Dengan menggunakan Ctrl+F, cari kode class='comments' 
Tepat di bawahnya, masukkan kode <b:if cond='data:blog.pageType != "static_page"'>
Di bawah kode yang kita tambahkan tadi, akan kita temukan kode-kode tab kotak komentar yang sudah kita masukkan sebelumnya.
Scroll ke bawah lagi dan temukan kode <div class='clear'/>
Tepat di atas kode tersebut, masukkan kode </b:if>
Simpan template




Sumber : rafi-orilya.blogspot.com


Artikel Terkait:

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Memed Darlovers di inbox anda:

58 Comments
Tweets
Komentar

58 comments :

Lunatic`Art said...

Mantab bng

Dapur Tutorial Blogspot said...

mantap makasih infonya ....!

Media Mata Indonesia said...

API_Twitter tu yg kya gmna sih??? q ga nemu, trus d atas juga ID Blogger juga gak ke pake,,, tolong pencerahan...

memed darlovers said...

@Media Mata Indonesia buat dulu aplikasi di twitter.. di link yang saya tulis itu. setelah anda buat aplikasi di twitter maka anda akan di kasih API ID atau Consumer key. silahkan di coba kembali

Irwanz'blogs said...

mas code ''class='comments'
nya yang mana.?
ada banyak.? hehe

memed darlovers said...

@Irwanz'blogs Apa-apa aja kira2 yar kita lihat...

taufan fhm said...

kok tweet nya ga bisa ya?

memed said...

Sedah bisa tu punya agan, sudah saya cek barusan

HENDRO said...

punya saya ter dapat 2 kode class='comments' masukin kodennya,,, di kode no 1/no 2???

memed darlovers said...

@HENDRO: Coba cari kode seperti ini div class='comments' id='comments'> atau sejenisnya, jika terdapat 2 kode tersebut letakkan dibawah kode yang ke dua...

HENDRO said...

Ok ma ksh mas

Ragiel Satrio said...

Mantab bang infox
udah saya coba dan 100% berhasil,,,
Thanks

jagan lupa kunjungi blog ane yo, kalu sempat

memed darlovers said...

@Alfin Fathurrahman: masama saya sudah berkunjung kembali ke blog agan

Rudy Hartono said...

keren sob, nice post

Bobby Surya H. said...

izin sedot ilmu gan :D

Meong gg said...

di coba dlu... kunjungi blog saya juga

ibnoe.info said...

wah keren ne gan..., pengen nyoba ah.... tapi malam besok aja lagi buru-buru ne gan..., malam besok w mampir lagi disini gan..., mantap ne kayanya 3 in 1 comment..., gan komment di blog ku gan dengan url posting yang ini biar ga susah malam besok kemari hehe.... comment ya gan...??? and salam kenal gan...., di blog saya ada daftar blog doffollow berpagerank tinggi gan buruan sebelum status dofollownya berubah.... lumayankan buat donkkrak pagerank sama alexa rank hehe...... salam blogger.....

Aditya Subawa said...

mas, boleh tau artikel aslinya dimana? mau nyetting twitter

memed darlovers said...

@Aditya Subawa: kan ada subernya di atas

Imanto said...

mas tambah lagi dong... 1 lg google+
gmn mas cara nya?

memed darlovers said...

@Imanto: Entar gan kita cari caranya dulu....

Blogger Kerinci said...

Thank's boss !!!
Langsung jadi alias sukses ....

Yustin Annisa said...

Mau nanya, cara nemuin Api key twitter dimana ya?

Syakur said...

Kunjungi www.blogsyakur.co.cc yaaa..

memed darlovers said...

@Yustin Annisa: yg dimaksud Api key adalah costumer key. Buka aplikasi twitter yg di buat tadi. lihat di tap details OAuth settings ada tulisan Consumer key, nah itulah api key...

Jaka Bohemian said...

kok ga semua artikel ya ada blog, twitter, facebook commentnya??? coba gan dicek di jakaberkata.blogspot.com

Jaka Bohemian said...

gan kok punyaku hilangnya commentnya fb twitternya?? cek lagi gan hehe maap repotin.. udah dicari juga ga ada class='comments' padahal tadi siang ada di 2 tempat kan ... hmmmm mohon solusinya

Paradise said...

nih permasalahannya kayanya di Callback URL
sampe karang ane juga ga bisa comment wat tweet..
padahal dah bener sob Consumer keynya..

memed darlovers said...

Bukan disitu kesalahannya... silahkan baca kembali artikel di atas di aplikasi Twitter. sudah saya update kembali artikelnya....

Jaka Bohemian said...

terus notifikasi komentar di facebook kok ga ada pemberitahuan ya? yang ada cuma komentar di blogger

Jaka Bohemian said...

bang di blog ane kok gabisa balas komentar blog ya? nulis komentar juga gabisa?? coba bang beri saran ada yg salah dimana?? makasih sebelumnya :) maap repotin maklum newbie

Jaka Bohemian said...

mau menambahkan gan.. kalo diposisikan komentar tersemat gabisa tetapi kalo di buka halaman baru baru bisa komentar.. kenapa itu ya?

Ivan Lakuanine said...

Thanks bang atas infonya, izin digunakan ..

firmanu swantara said...

gak jelas ne, rusak blog ane. sittt

leng tai wonk said...

Bang tuk melebarkan kolom komentar pada tweets bagaimana?... agar sama dengan kolom komentar yang lainnya.

Vezhphoria said...

ko punya saya keluar comment facebook nya di atas header y mas?? gmn ngilangin nya? udah saya otak atik tapi g jadi jadi .. mohon pencerahan nya mas.. :) http://vezhphoria.blogspot.com

kalahitam said...

gan cara ubah background komentar di tab bagian blog gimana ya? komentar nya gk kliatan..
uda coba ubah warna font komentar tapi hanya berfungsi pada kotak komentar default sebelum saya insert kode di atas.

coba lihat disini gan : http://goresan-pensilku.blogspot.com/2012/05/news-avatar-legend-of-korra-by.html

mohon pencerahan nya gan.
terima kasih

Jingga said...

Mantap tisnya,ijin praktek gan.
Makasih.

Nakusan said...

punya saya ko' ga kluar komenya ya Sob..? ga ada yg error tp ga muncul aja kotak komentarnya yg kayak d blog Sobat.

muhammad zainul ikhlas said...

punya saya sudah muncul.. tapi kok ketika kita komen lewat blogger, tab ke duanya itu hilang ( twitter dan facebook ) tolong soluisnya mas..

Cek http://www.ikhlaskanlah.co.cc/

muhammad zainul ikhlas said...

tapi kok saya sudah coba buka url berikut yang agan sudah komen..

http://www.ikhlaskanlah.co.cc/2012/08/7-fenomena-alam-teraneh-dan-menabjubkan.html

tab coment fb dan twitternya tetap tidak ada..

saya tanya ke blognya aditya katanya itu karena belum diinstal tab comment nya.. bagaimana ini ada solusi nggak ?
tadinya bisa.. tapi saya backup lalu buat ulang langsung jadi gini

muhammad zainul ikhlas said...

sudah oke mas.. terimakasih.. sudah membantu
ini juga di bantu oleh mas aditya

Lamhotma Yudhi said...

nggak bisa gan...tolong donk gan ...apa tergantung template yaa

rauf Ashari said...

mantap nihh :D

ADI Cyber4rt™ said...

Bermanfaat

Aslikan Ahmad said...

mantap mas,,,, trimakasih tipsnya,,,

Roi Jetro said...

ga bekerja sama sekali, padahal sudah ikuti semua step nya, ampe beberapa gadget saya delete

Ahmad Alqurniawan said...

gan...tutoriall succes terinstall diblog ane..thank ea gan..kalou sempet mampir ke blog ane ya...jangan lupa followback blog ane..thank gan...

AGUS KOMPAC BROTHER'S said...

sukses gan berhasil diterapkan di:http://agusciamis.blogspot.com/ trimakasih !!!

NEW FREE AUTO BACKLINK + SOFTWARE said...

Your blog posts and articles are very interesting and made me gain knowledge, Terim you for that, and I hope to visit again on your blog .. thanks

Dede Tolibin said...

mas bisa tolong bantu gk?
saya masih bingung pada saat membuat API Key (create an aplication), disana kan ada kolom yg harus di isi (Name, Description, Website, dan Callback URL). kolom2 tersebut harus di isi dengan apa?
mohon bantuannya.. secepatnya. :-)

Kraeng Francisco said...

wuih keren setelah dicoba. Trima kasih tutorialnya ya. salam sahabat

Andes Junkies said...

untuk melihat API_KEY itu pada bagian mana gan?
apa seperti APP_ID

FAEDAH JAYA said...

Wahh Nderek cobi mas.. Okey kayaknya,, Makasih banyak Infonya.. Salam Blog Faedah Jaya

afrilla adhitya said...

wahh susah sob tutorialnya nggak ngerti q,tolong di bantu dong

yusuef arsha said...

kok gag bisa gan tlong di bantu http://yusuefarshablog.blogspot.com

pito aghilz said...

gan saya kagak ngerti dibagian "Callback URL:" itu gimana atau pake apa ngisinya..?? harap di bales gilagilangilang@yahoo.co.id or my twitter @permana46

Alwi Baihaqi said...

cara, menghilangkan kotak komen yang asli dari templatenya gimana...

Post a Comment

Terima Kasih atas komentar teman-teman
Dilarang mengunakan segala bentuk link, kata-kata kasar, menyinggung teman dll karena itu merupakan SPAM.
Apabila ada kata SPAM komentar akan saya hapus