Home » »Unlabelled » Facebook Like Box Valid HTML5

Facebook Like Box Valid HTML5

08.18

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.

Posting Komentar

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.