Entri Populer
-
Setelah berjalan-jalan alias blog walking, saya sedikit mengetahui triknya. Apa yang dimaksud trik ini ? Yups benar banget,...
-
Sahabat Hack4rt yang baik hatinya dan ganteng-ganteng seperti admin *loh hehe. Kali ini saya Noval akan memberikan tutorial cara membu...
-
Sebagian besar orang yang senang mengotak atik blognya dengan animasi flash pasti sudah tahu dengan flashvortex.com dan www.123-banner.com...
Blog Archive
- 2013 (18)
-
2012
(48)
- September(1)
-
Juni(28)
- Visually Windows 7 Lengkap
- cara membuat taksbar navigations menu seperti wind...
- Elegance Theme untuk Nokia OS: Windows XP
- Elegance Theme untuk Nokia OS: Windows XP
- Highly spectacular theme for Windows XP
- Highly spectacular theme for Windows XP
- Menghapus Tulisan Tampilkan Semua Posting di blog
- Cara Pasang Page Number Di Blog
- 6 Kategori tema untuk Windows Seven
- koleksi 630 ikon keren
- Twitter Box Followers
- Mendaftarkan Blog Ke 50 Google Search Engine Di Dunia
- Cara Memasang Widget Live Traffic Feed Feedjit di ...
- Cara Membuat Scroll Widget Blog
- font Khusus dan desain poster Arab
- Download 1500 Font baru
- koleksi 600 font yang sangat menarik
- Cara Termudah Membuat Gadget/ Widget Blog Menjadi ...
- Cara Membuat Form Berlangganan Email Feedburner di...
- cara Menghilangkan Iklan dari Animasi Flash Gratisan
- Cara membuat banner format SWF & menu swf memasang...
- Cara Membuat Fan Page Facebook
- Cara Menghilangkan Langgan Entri Atom
- cara membuat kotak pencarian di atas judul artikel
- Cara mengetahui posisi artikel di hasil pencarian
- 35 Edisi majalah PSD PHOTOSHOP Full
- Cara Membuat Kotak Komentar Blog & Facebook
- Cara Membuat Kotak Komentar Facebook terbaru untuk...
- Mei(3)
- April(2)
- Maret(5)
- Februari(8)
- Januari(1)
- 2010 (5)
Label
- blog (4)
- Ebook (20)
- Ebook Design Grafis (12)
- Ebook Operasi System (4)
- Ebook Other (4)
- Font (3)
- Icon (1)
- Internet. (1)
- Other (1)
- pakai di blog (1)
- Themes (12)
- Themes windows 7 (4)
- Themes windows XP (4)
- tips n trick (31)
Donasi
Loading
Cara Membuat Kotak Komentar Facebook terbaru untuk Blog
Salah satu bagian elemen terpenting dari suatu blog adalah kotak
komentar blog. Dengan adanya kotak komentar blog kita akan bisa
mengetahui tanggapan, kritikan ataupun komentar dari pengunjung tentang
konten suatu blog yang sedang di lihat. Selain itu komentar dari
pengunjung bisa meningkatkan kredibilitas suatu blog, semakin banyak
komentar semakin baik kredibilitas konten dan pengelolaan blog... Nahh
untuk menarik minat pengunjung blog supaya mau berkomentar di postingan
artikel sobat, silakan di simak tips & triknya yang akan Saya ulas
ulang dari trik nya sobat monozcore....
Terkadang tidak mudah untuk mendapatkan komentar dari pengunjung blog, hal ini bisa disebabkan oleh beberapa faktor yang menurut saya bisa berdampak mengurangi tingkat minat pengunjung untuk mau berkomentar pada postingan artikel yang di bacanya. Berikut analisa dan saran saya mengenai faktor-faktor yang bisa mengurangi minat pengunjung blog untuk mau berkomentar pada postingan artikel sobat...
Prosedur kotak komentar yang terlalu rumit, seperti : kode captca yang harus diisi, harus mempunyai akun google untuk bisa berkomentar, harus menjadi member atau follower terlebih dahulu, menggunakan kotak komentar pada jendela baru, dsb. Saran saya hindarkan prosedur tersebut apabila ingin mendapatkan komentar dari pengunjung biasa (bukan follower).
Sistim komentar blog yang kurang atraktif. Saran saya tambahkan emoticon pada sistim komentar blog dengan animasi emoticon yang unik dan menarik.
Kotak komentar standar bawaan blog. Saran saya gunakan trik pada postingan artikel ini untuk mempercantik dan menambah pilihan kotak komentar untuk pengunjung blog.
Apabila sobat blogger masih menggunakan prosedur sistim komentar seperti pada faktor-faktor yang saya sebutkan di atas silakan sobat rubah dulu prosedurnya supaya trik Membuat Kotak Komentar Blog & Facebook ini bisa maksimal hasilnya.
Trik ini menggunakan cara menggabungkan kotak komentar facebook dan komentar blog untuk di gunakan pada sistim komentar blog. Penggunaan komentar di pisahkan dengan cara membuat tab komentar untuk memudahkan pengunjung untuk memilih kotak komentar yang sesuai dengan apa yang pengunjung inginkan. Tab komentar dilengkapi dengan info banyaknya jumlah komentar. Contoh penggunaan kotak komentar ini seperti yang ada di blog Saya ini. Oke,,bro seep-kan infonya, nahhh... sekarang kita lanjutkan ke TKP bagaimana Cara Membuat Kotak Komentar Facebook terbaru untuk Blog....
Cara Pemasangan :
Langkah 1:
Anda harus sudah mempunyai ID Aplikasi Facebook. Jika Anda belum mempunyai nya, maka Trik ini tidak akan bekerja secara maksimal. Maka untuk mendapatkan nya, silahkan baca postingan Cara Mendapatkan ID Aplikasi Facebook untuk Blog.
Langkah 2:
1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangan Lupa backup dulu template Blog, Jika belum tahu Baca di sini
3. Jangann lupa klik ‘Expand Widget Templates’
4. Copy-paste kode berikut ini di dalam kode <Html> sobat, dan letak kan seperti yang ada pada Contoh.
Contoh:
5. Pasang kode meta-tag berikut ini dan taruh di bawah kode <head>.
Note:
* Untuk App ID Facebook Sobat seperti yang Anda dapatkan pada langkah 1.
* Dan untuk ID Facebook Sobat, seperti yang terlihat pada Gambar di bawah ini.
6. Apabila Anda belum menggunakan kode JQuery silakan copy kode JQuery berikut dan taruh di atas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.
7. Serta letakkan Kode di bawah ini seperti pada Langkah no.6, yaitu di atas kode </Head>.
8. Kemudian Copy-paste kode di bawah ini dan taruh di bawah <Body> pada kode HTML template blog Anda.
* Sekali lagi gunakan App ID Facebook Sobat seperti yang Anda dapatkan pada langkah 1.
9. Setelah itu Copy-paste kode di bawah ini dan taruh di bawah <div class='comments' id='comments'>. Biasa nya ada 2 macam Kode yang seperti ini, tapi letakkan pada kode yang kedua nya.
* Kode margin-left:20px; merupakan pergeseran tab dari kanan sebesar 20px.
* Kode margin:10px 20px 10px 20px; merupakan pergesaran kotak komentar facebook dari tab komentar sebesar atas 10px, kanan 20px, bawah 10px dan kiri 20px.
* Kode width='575' merupakan dimensi lebar kotak komentar facebook.
10. Untuk yang terakhir Klik "Save" dan lihat hasilnya...
Catatan :
Trik Membuat Kotak Komentar Blog & Facebook pada postingan artikel ini sudah dilengkapi dengan beberapa fitur, antara lain :
* Banyaknya jumlah komentar yang ada pada komentar facebook dan komentar blog.
* Menggunakan sistem Tab untuk memisahkan antara komentar facebook dengan komentar blog.
* Pada komentar facebook dilengkapi dengan notifikasi pesan, jadi apabila ada komentar baru yang diketik melalui kotak komentar facebook bisa langsung diketahui melalui akun facebook Anda atau bisa langsung dicek di Sini .
Seperti pada ulasan ulang yang telah Saya jelaskan ini, semoga bisa membantu Anda untuk mencoba nya. Sekali lagi Saya jelaskan bahwa Trik ini saya dapatkan dari Sobat monozcore, dimana beliau telah berkenan mengizinkan artikel ini untuk Saya posting ulang sebagai pelengkap tutorial yang udah Saya punya. Dan Semoga Tutorial ini bermamfaat untuk Anda semuanya dan Salam Sukses dari Saya untuk Anda Semua nya.
Terkadang tidak mudah untuk mendapatkan komentar dari pengunjung blog, hal ini bisa disebabkan oleh beberapa faktor yang menurut saya bisa berdampak mengurangi tingkat minat pengunjung untuk mau berkomentar pada postingan artikel yang di bacanya. Berikut analisa dan saran saya mengenai faktor-faktor yang bisa mengurangi minat pengunjung blog untuk mau berkomentar pada postingan artikel sobat...
Prosedur kotak komentar yang terlalu rumit, seperti : kode captca yang harus diisi, harus mempunyai akun google untuk bisa berkomentar, harus menjadi member atau follower terlebih dahulu, menggunakan kotak komentar pada jendela baru, dsb. Saran saya hindarkan prosedur tersebut apabila ingin mendapatkan komentar dari pengunjung biasa (bukan follower).
Sistim komentar blog yang kurang atraktif. Saran saya tambahkan emoticon pada sistim komentar blog dengan animasi emoticon yang unik dan menarik.
Kotak komentar standar bawaan blog. Saran saya gunakan trik pada postingan artikel ini untuk mempercantik dan menambah pilihan kotak komentar untuk pengunjung blog.
Apabila sobat blogger masih menggunakan prosedur sistim komentar seperti pada faktor-faktor yang saya sebutkan di atas silakan sobat rubah dulu prosedurnya supaya trik Membuat Kotak Komentar Blog & Facebook ini bisa maksimal hasilnya.
Trik ini menggunakan cara menggabungkan kotak komentar facebook dan komentar blog untuk di gunakan pada sistim komentar blog. Penggunaan komentar di pisahkan dengan cara membuat tab komentar untuk memudahkan pengunjung untuk memilih kotak komentar yang sesuai dengan apa yang pengunjung inginkan. Tab komentar dilengkapi dengan info banyaknya jumlah komentar. Contoh penggunaan kotak komentar ini seperti yang ada di blog Saya ini. Oke,,bro seep-kan infonya, nahhh... sekarang kita lanjutkan ke TKP bagaimana Cara Membuat Kotak Komentar Facebook terbaru untuk Blog....
Cara Pemasangan :
Langkah 1:
Anda harus sudah mempunyai ID Aplikasi Facebook. Jika Anda belum mempunyai nya, maka Trik ini tidak akan bekerja secara maksimal. Maka untuk mendapatkan nya, silahkan baca postingan Cara Mendapatkan ID Aplikasi Facebook untuk Blog.
Langkah 2:
1. Masuk akun blogger lalu pilih menu Rancangan > Edit Html
2. Jangan Lupa backup dulu template Blog, Jika belum tahu Baca di sini
3. Jangann lupa klik ‘Expand Widget Templates’
4. Copy-paste kode berikut ini di dalam kode <Html> sobat, dan letak kan seperti yang ada pada Contoh.
xmlns:fb='http://ogp.me/ns/fb#'
Contoh:
<html expr:dir='data:blog.languageDirection'xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>
xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://ogp.me/ns/fb#'>
5. Pasang kode meta-tag berikut ini dan taruh di bawah kode <head>.
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' property='og:site_name'/>
<meta content='./favicon.ico' property='og:image'/>
<meta content='App ID Facebook Sobat' property='fb:app_id'/>
<meta content='ID Facebook Sobat disini' property='fb:admins'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta expr:content='data:blog.homepageUrl' property='og:site_name'/>
<meta content='./favicon.ico' property='og:image'/>
<meta content='App ID Facebook Sobat' property='fb:app_id'/>
<meta content='ID Facebook Sobat disini' property='fb:admins'/>
<meta content='article' property='og:type'/>
Note:
* Untuk App ID Facebook Sobat seperti yang Anda dapatkan pada langkah 1.
* Dan untuk ID Facebook Sobat, seperti yang terlihat pada Gambar di bawah ini.
6. Apabila Anda belum menggunakan kode JQuery silakan copy kode JQuery berikut dan taruh di atas kode </Head> pada template blog. Jika sudah ada kode JQuery di blognya silakan lewati langkah ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'/>
7. Serta letakkan Kode di bawah ini seperti pada Langkah no.6, yaitu di atas kode </Head>.
<style>
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
</style>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
</style>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
8. Kemudian Copy-paste kode di bawah ini dan taruh di bawah <Body> pada kode HTML template blog Anda.
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Facebook Sobat',
channelUrl : '<data:blog.url/>',
status : true,
cookie : true,
xfbml : true
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
Note:<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'App ID Facebook Sobat',
channelUrl : '<data:blog.url/>',
status : true,
cookie : true,
xfbml : true
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
* Sekali lagi gunakan App ID Facebook Sobat seperti yang Anda dapatkan pada langkah 1.
9. Setelah itu Copy-paste kode di bawah ini dan taruh di bawah <div class='comments' id='comments'>. Biasa nya ada 2 macam Kode yang seperti ini, tapi letakkan pada kode yang kedua nya.
<div style='margin-left:20px;'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png' style='vertical-align:top;'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://lh4.googleusercontent.com/-hq1JcDFnlFY/T1h53RSuHqI/AAAAAAAABV0/XOyCtVQYLVU/s800/blog-icon.jpg' style='vertical-align:top;'/> <data:post.numComments/> Comments
</div></div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page' style='margin:10px 20px 10px 20px;'>
<b:if cond='data:blog.pageType == "item"'>
<fb:comments colorscheme='dark' data-num-posts='10' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' notify='true' width='575'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Note:<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png' style='vertical-align:top;'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='https://lh4.googleusercontent.com/-hq1JcDFnlFY/T1h53RSuHqI/AAAAAAAABV0/XOyCtVQYLVU/s800/blog-icon.jpg' style='vertical-align:top;'/> <data:post.numComments/> Comments
</div></div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page' style='margin:10px 20px 10px 20px;'>
<b:if cond='data:blog.pageType == "item"'>
<fb:comments colorscheme='dark' data-num-posts='10' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' notify='true' width='575'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
* Kode margin-left:20px; merupakan pergeseran tab dari kanan sebesar 20px.
* Kode margin:10px 20px 10px 20px; merupakan pergesaran kotak komentar facebook dari tab komentar sebesar atas 10px, kanan 20px, bawah 10px dan kiri 20px.
* Kode width='575' merupakan dimensi lebar kotak komentar facebook.
10. Untuk yang terakhir Klik "Save" dan lihat hasilnya...
Catatan :
Trik Membuat Kotak Komentar Blog & Facebook pada postingan artikel ini sudah dilengkapi dengan beberapa fitur, antara lain :
* Banyaknya jumlah komentar yang ada pada komentar facebook dan komentar blog.
* Menggunakan sistem Tab untuk memisahkan antara komentar facebook dengan komentar blog.
* Pada komentar facebook dilengkapi dengan notifikasi pesan, jadi apabila ada komentar baru yang diketik melalui kotak komentar facebook bisa langsung diketahui melalui akun facebook Anda atau bisa langsung dicek di Sini .
Seperti pada ulasan ulang yang telah Saya jelaskan ini, semoga bisa membantu Anda untuk mencoba nya. Sekali lagi Saya jelaskan bahwa Trik ini saya dapatkan dari Sobat monozcore, dimana beliau telah berkenan mengizinkan artikel ini untuk Saya posting ulang sebagai pelengkap tutorial yang udah Saya punya. Dan Semoga Tutorial ini bermamfaat untuk Anda semuanya dan Salam Sukses dari Saya untuk Anda Semua nya.
Sumber: http://ahmad-roni.blogspot.com/2012/04/cara-membuat-kotak-komentar-facebook.html#ixzz1wlbmCzZl
Label:
tips n trick
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar