Sunday, February 24, 2013

Facebook Like Box Valid HTML5

Pada kesempatan sebelumnya saya telang membahas tentang "Widget Daftar Isi Navigasi [2 Kolom]", dan untuk kesempatan kali ini saya akan membahas tentang "Facebook Like Box Valid HTML5". Mungkin ada yang sudah mengetahui tentang hal ini, tapi bagi yang belum mengetahuinya ini sangat penting.

Seperti yang kita ketahui selama ini banyak blog atau website yang menggunakan atau menerapkan widget Facebook Like Box pada blog masing-masing, hampir setiap blog/website memiliki widget ini, karena ini merupakan salah satu cara agar orang lain mendapatkan update kabar terbaru dari blog kita setelah mereka join atau like fanpage facebook yang berkaitan dengan blog kita.

Tapi yang kita bahas adalah widget ini sering tidak lolos dari w3c validator, sedangkan kita mengunakan template yang berbasis html5, sering kali kita menemukan tutorial modifikasi Facebook Like Box dengan menggunakan kode iframe pada widget FB like Box, contoh kode seperti ini:

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages02.MDF&width=292&height=258&show_faces=true&colorscheme=light&stream=false&border_color&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe>

kode tersebut "tidak bisa" lolos dari w3c validator, contoh error seperti ini

pada gambar diatas eror terdapat pada atribute scroll, frameborder dan allowtransparancy, saya sendiri pun tidak tahu bagaimana cara memperbaikinya.
Oleh karena itu disarankan untuk template HTML5 menggunakan kode/script widget Facebook Like Box untuk HTML5.
Bagi anda yang ingin menggunakanya berikut caranya:
1. Login akun Blogger anda
2. Pada Dashboard pilih Template » Edit HTML
3. Letakkan kode/script berikut ini dibawah kode <body

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

4. Simpan Template
5. Masuk pada bagian Tata Letak » Tambah Gadget » HTML/JavaScript
Letakkan kode berikut ini kedalamnya kemudian Simpan

<div class="fb-like-box" data-href="http://www.facebook.com/pages02.MDF" data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div>

6. Terakhir Simpan Setelan
// Pengaturan
Ganti http://www.facebook.com/pages02.MDF dengan URL fanpage anda!
data-width="292" // Lebar widget
data-show-faces="true" // Tampilkan foto
data-stream="false" // Tampilkan artikel terbaru
data-header="false" // Tampilkan header "Temukan Kami di Facebook"
Silahkan anda sesuaikan sendiri.
Semoga Bermanfaat.

Judul: Facebook Like Box Valid HTML5; Ditulis oleh Unknown; Rating Blog: 5 dari 5