[TIPS & TRICKS] Panduan Lengkap Buat Kotak Komentar Facebook di Blogspot

[TIPS & TRICKS] Panduan Lengkap Buat Kotak Komentar Facebook di Blogspot

Kotak Komentar FB

Sederhana, keren, efektif, tapi mungkin belum semua tahu cara membuatnya...
Langsung aja gan, kali ini saya mau sedikit share tentang PANDUAN LENGKAP BUAT KOTAK KOMENTAR FACEBOOK DI BLOGSPOT, cekidott...

1. Masuk ke https://developers.facebook.com/apps (jangan lupa log in dengan account fb agan dulu ya)

2. Daftar sebagai developer (Register as a Developer)

3. Beri centang pada kotak kecil di kiri bawah, lalu klik "Continue"

4. Centang pada kotak "Web", lalu klik "Continue"

5. Klik "Done", konfirmasi email Anda, Anda baru saja terdaftar sebagai Developer

6. Lanjut gan, klik "Create New App"

7. Isi "App Name" dengan Nama Kotak Komentar Anda (bebas max. 32 karakter), isi "App Namespace" dengan kode kotak komentar Anda (semua huruf disambung) ; pastikan kedua nama diatas sampai Valid/Available, kosongkan kotak "Web Hosting", klik "Continue"

 

8. Isi kode Captcha, klik "Continue"

9. Basic Info : Cukup isi "App Domains" dengan alamat blog Anda, centang Disable pada "Sandbox Mode", klik "Website with Facebook login" dan isi url blog Anda, klik "Save Changes"

 

Next...

10. Buka account Blogger Anda

11. Pilih Template, lalu Edit HTML

12. Cari kode <b:skin><![CDATA[ dan copas (copy-paste) kode dibawah ini tepat diatasnya!!

<meta content='nama.fb.anda' property='fb:admins'/>
<meta content='0123456789101112' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script src='http://panduan-template-blog-id.googlecode.com/files/CommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

• Ganti nama.fb.anda dengan nama akun Facebook anda
• Ganti 0123456789101112 dengan ID Aplikasi Facebook anda yang telah anda buat (lihat gambar No.9)

13. Cari kode <div class='post-footer-line post-footer-line-3'/> dan copas (copy-paste) kode dibawah ini tepat dibawahnya!!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='25' data-width='600' expr:data-href='data:post.url'/>
</b:if>  

• data-num-posts='25' merupakan jumlah komentar yang akan ditampilkan. Ubah sesuai keinginan Anda
• data-width='600' merupakan lebar kolom komentar. Ubah sesuai dengan lebar post di blog Anda

14. Simpan (save) template, dan lihat dibagian bawah tiap postingan blog Anda.


Mudah²an artikel kali ini bermanfaat buat agan semua, kalau ada kekurangan jangan dibatain ya :mewek

Jangan sungkan bertanya n berbagi gan.. ^_^

Kotak Komentar FB

Sederhana, keren, efektif, tapi mungkin belum semua tahu cara membuatnya...
Langsung aja gan, kali ini saya mau sedikit share tentang PANDUAN LENGKAP BUAT KOTAK KOMENTAR FACEBOOK DI BLOGSPOT, cekidott...

1. Masuk ke https://developers.facebook.com/apps (jangan lupa log in dengan account fb agan dulu ya)

2. Daftar sebagai developer (Register as a Developer)

3. Beri centang pada kotak kecil di kiri bawah, lalu klik "Continue"

4. Centang pada kotak "Web", lalu klik "Continue"

5. Klik "Done", konfirmasi email Anda, Anda baru saja terdaftar sebagai Developer

6. Lanjut gan, klik "Create New App"

7. Isi "App Name" dengan Nama Kotak Komentar Anda (bebas max. 32 karakter), isi "App Namespace" dengan kode kotak komentar Anda (semua huruf disambung) ; pastikan kedua nama diatas sampai Valid/Available, kosongkan kotak "Web Hosting", klik "Continue"

 

8. Isi kode Captcha, klik "Continue"

9. Basic Info : Cukup isi "App Domains" dengan alamat blog Anda, centang Disable pada "Sandbox Mode", klik "Website with Facebook login" dan isi url blog Anda, klik "Save Changes"

 

Next...

10. Buka account Blogger Anda

11. Pilih Template, lalu Edit HTML

12. Cari kode <b:skin><![CDATA[ dan copas (copy-paste) kode dibawah ini tepat diatasnya!!

<meta content='nama.fb.anda' property='fb:admins'/>
<meta content='0123456789101112' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script src='http://panduan-template-blog-id.googlecode.com/files/CommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

• Ganti nama.fb.anda dengan nama akun Facebook anda
• Ganti 0123456789101112 dengan ID Aplikasi Facebook anda yang telah anda buat (lihat gambar No.9)

13. Cari kode <div class='post-footer-line post-footer-line-3'/> dan copas (copy-paste) kode dibawah ini tepat dibawahnya!!

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-comments' data-num-posts='25' data-width='600' expr:data-href='data:post.url'/>
</b:if>  

• data-num-posts='25' merupakan jumlah komentar yang akan ditampilkan. Ubah sesuai keinginan Anda
• data-width='600' merupakan lebar kolom komentar. Ubah sesuai dengan lebar post di blog Anda

14. Simpan (save) template, dan lihat dibagian bawah tiap postingan blog Anda.


Mudah²an artikel kali ini bermanfaat buat agan semua, kalau ada kekurangan jangan dibatain ya :mewek

Jangan sungkan bertanya n berbagi gan.. ^_^

[TIPS & TRICKS] Cara Setting Blogspot Otomatis Menjadi Versi Mobile

[TIPS & TRICKS] Cara Setting Blogspot Otomatis Menjadi Versi Mobile

Blog versi mobile

Tampilan blog mungkin mencirikan keistimewaan dari sebuah blog, namun bagaimana bila blog Anda harus dibuka melalui handphone? Selain tulisan yang mengecil, besar kemungkinan loading yang terlalu lama akan menjadi salah satu masalah bagi pembaca blog Anda, khususnya para mobile reader..

 

Ok, saya akan coba sedikit share tentang mengaktifkan tampilan mobile untuk blog Anda kapanpun orang membuka url blog Anda via handphone...

1. Masuk ke draft.blogger.com, klik blog Anda, pilih 'Template', klik tombol setting

 

2. Pilih " Ya. Tampilkan template seluler di perangkat seluler. " Lalu pilih template seluler sesuai selera Anda (klik tanda panah kanan/kiri untuk model/warna template lain), save.

 

Sampai sini, sebenarnya Anda sudah bisa melihat tampilan mobile blog Anda, namun hanya jika Anda mengetik url dengan format : http://www.bloganda.com/?m=1. Tapi bila Anda mengetik url tanpa /?m=1, maka yang akan muncul tetap tampilan seperti biasa (versi web).

Nah, supaya Anda atau orang lain bisa langsung melihat tampilan mobile ketika mengetik url standar blog Anda di handphone, caranya :

<script type='text/javascript'>(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://blogAnda.com/?m=1');</script>

* Ganti tulisan berwarna merah ( blogAnda.com ) dengan url blog Anda

Copy kode diatas dan paste sebelum kode </head> pada edit html blogspot, save!  

Selesai deh, selamat mencoba...^_^

Blog versi mobile

Tampilan blog mungkin mencirikan keistimewaan dari sebuah blog, namun bagaimana bila blog Anda harus dibuka melalui handphone? Selain tulisan yang mengecil, besar kemungkinan loading yang terlalu lama akan menjadi salah satu masalah bagi pembaca blog Anda, khususnya para mobile reader..

 

Ok, saya akan coba sedikit share tentang mengaktifkan tampilan mobile untuk blog Anda kapanpun orang membuka url blog Anda via handphone...

1. Masuk ke draft.blogger.com, klik blog Anda, pilih 'Template', klik tombol setting

 

2. Pilih " Ya. Tampilkan template seluler di perangkat seluler. " Lalu pilih template seluler sesuai selera Anda (klik tanda panah kanan/kiri untuk model/warna template lain), save.

 

Sampai sini, sebenarnya Anda sudah bisa melihat tampilan mobile blog Anda, namun hanya jika Anda mengetik url dengan format : http://www.bloganda.com/?m=1. Tapi bila Anda mengetik url tanpa /?m=1, maka yang akan muncul tetap tampilan seperti biasa (versi web).

Nah, supaya Anda atau orang lain bisa langsung melihat tampilan mobile ketika mengetik url standar blog Anda di handphone, caranya :

<script type='text/javascript'>(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'http://blogAnda.com/?m=1');</script>

* Ganti tulisan berwarna merah ( blogAnda.com ) dengan url blog Anda

Copy kode diatas dan paste sebelum kode </head> pada edit html blogspot, save!  

Selesai deh, selamat mencoba...^_^