Menambahkan Facebook Like Box pada Blog

Hai sahabat adventura, dikala malam ditemani oleh sobat, Muhammad faisal disini, ane ngeblogging gan. Ane mencoba memasang Facebook Like Box pada Right Sidebar seperti ini
Ternyata caranya susah2 mudah, soalnya saya baru pertama kali ni gan masang begini.
Nah begini caranya.

LANGKAH 1:
Pasanglah widget pada template agan pilih ke menu tata letak
Kemudian tambahkan gadget facebook pada sidebar
Setelah itu pilih HTML / Java script
 Maka akan muncul seperti ini
Judulnya diisi Facebook, kemudian kontennya biarkan blank dulu, gambar itu sudah ada karena saya sudah melakukan registrasi via facebooknya dan simpan.

Langkah ke 2:
Masuklah ke
https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=id_ID
Ubahlah pada yang saya hightligter menjadi alamat url fanspage sobat
Cara mendapatkan alamat urlnya dengan masuk ke page facebook sobat kemudian pilih pengaturan dan pilih seluler, maka akan muncul seperti ini
Kemudian pilih Dengan Web Seluler dan klik http:// facebook.com/username maka akan muncul seperti ini
 Pada bagian yang saya berikan hightligter tersebut silakan diganti menyesuaikan alamat fanspage teman - teman. Nah alamat url inilah yang nantinya akan dicopy pastekan pada facebook page url yang ini tadi gambarnya

Sesuaikanlah ukurannya dan tekan get code, maka akan tampil seperti ini
pada bagian yang saya hightligter ini silakan sobat copykan pada bagian widget tadi yang kita kosongi sebelumnya, kalo lupa yang pas ini, kemudian simpan.
Langkah selanjutnya masuklah pada template kemudian tekan edit html dan marilah kita bermain dengan coding - coding ria, hahaha.....
Selanjutnya pada bagian ini
kita tekan CTRL + F saja dan pastekan pada kolom search
<b:widget id='HTML1' locked='false' title='FACEBOOK' type='HTML'>
panahnya yang disamping kanan itu di klik ya, nah nanti kita akan menemukan tulisan
<div class='widget-content'>
    <data:content/>

Kemudian dibawah tulisan diatas pastekanlah
<div class='fb-like-box fb_iframe_widget' data-colorscheme='light' data-header='false' data-height='265' data-href='https://www.facebook.com/infoptik' data-show-border='false' data-show-faces='true' data-stream='false' fb-iframe-plugin-query='app_id=172525162793917&amp;color_scheme=light&amp;header=false&amp;height=265&amp;href=https%3A%2F%2Fwww.facebook.com%2FDGenera.Blog&amp;locale=en_US&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=false' fb-xfbml-state='rendered'><span style='vertical-align: bottom; width: 300px; height: 265px;'><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Finfoptik&amp;width=292&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true' style='border:none; overflow:hidden; width:292px; height:290px;'/></span></div>


Pada bagian yang warna coklat diatas silakan diganti dengan tulisan pada code fb sobat yang iframe, ini gambarnya, tinggal dicopas saja
Kemudian pada bagian
<div class='fb-like-box fb_iframe_widget' data-colorscheme='light' data-header='false' data-height='265' data-href='https://www.facebook.com/infoptik' data-show-border='false' data-show-faces='true' data-stream='false' fb-iframe-plugin-query='app_id=172525162793917&amp;color_scheme=light&amp;header=false&amp;height=265&amp;href=https%3A%2F%2Fwww.facebook.com%2FDGenera.Blog&amp;locale=en_US&amp;sdk=joey&amp;show_border=false&amp;show_faces=true&amp;stream=false' fb-xfbml-state='rendered'><span style='vertical-align: bottom; width: 300px; height: 265px;'>
Gantilah pada bagian yang coklat, www.facebook.com/infoptik menjadi alamat url fanspage facebook sobat.

Done

Gimana nggak susah kan temen2, kalo bingung yok koment dibawah ini ya, see you.... 
 

Comments

Popular posts from this blog

Contoh Proposal Skripsi RND

Contoh Free Software dan Open Source Terbaik

Step by Step Pembuatan Proposal Skripsi sampai Wisuda Jurusan Pendidikan Teknik Kejuruan