alhamdulillah kali ini saya bisa membagikan sedikit tips dan trik bagaimana membuat tampilan blog kita terlihat bagus, baiklah kali ini saya akan membagikan bagaimana cara nya membuat kotak komentar Blog, Facebook, dan Twitter.
berikut langkah-langkah membuat komentar blog, facebook dan twitter.
pertama yang kita butuhkan adalah
- ID pada blog kita
- kunci API pada facebook
- Consumer key pada twitter
untuk ID blog teman-teman bisa dapatkan dengan cara masuk ke blog lalu lihat di addrees bar.
lalu untuk kunci API Facebook , teman-teman harus daftar terlebih dahulu dengan mengikut langkah-langkah yang ditentukan, silakan daftar disini.
dan yang terakhir Consumer key pada twitter, sama hal nya seperti facebook, untuk consumer key sendiri harus melakukan pendaftaran, silakan teman-teman ikuti tahap-tahap yang di anjurkan disini
setelah langkah awal selesai, kita lanjutkan ke langkah berikut nya.
untuk antisipasi kejadian yang tidak diinginkan alangkah lebih baiknya kita download terlebih dahulu template kita yang sudah ada...
1. Login ke blog >Rancangan>Edit HTML> Centang 'Expand Template Widget'2. cari kode <head> ( gunakan ctrl+f untuk mempermudah pencarian)
3. copykan 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&v=1'/>
<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'/>
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). Jika alamat profil saya adalah www.facebook.com/gunawanqz, maka ID profil Saya adalah gunawanqz
- 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
6. letakan kode di bawah ini tepat di bawah <div class='comments' id='comments'> yang kedua
-->
<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'>
<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'>
-->
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 400 dengan ukuran lebar kotak komentar yang diinginkan
8.
Simpan template
Selamat mencoba, semoga berhasil!
Tidak ada komentar:
Posting Komentar