Valid HTML 5 Google Plus, Facebook Like, Twitter Button Share

Cara Membuat Tombol Media Share Valid HTML 5

Penggunaan button share Google Plus (Google +), Facebook Like, Twitter di halaman blog tak diragukan peranannya dalam meningkatkan traffik/pengunjung blog dengan cara berbagi link halaman atau artikel/postingan dengan teman atau kenalan di media sosial seperti Twitter, Google Plus dan Facebook. Artikel Valid HTML 5 Google Plus, Facebook Like, Twitter Button Share ini dapat Anda pertimbangkan jika Anda menginginkan tombol share yang valid HTML 5 dan tidak akan mendapatkan komplain pesan eror dari W3C Validator.

Ada banyak sekali tutorial Blogger yang telah menyediakan kode dan script seperti button/tombol media share widget, floating share button widget, mashable float button/tombol share dst. Namun kebanyakan code maupun script yang digunakan tidak valid HTML 5. Kadang kita menemui pesan error validasi di W3C Validator seperti :

Element name fb:like cannot be represented as XML 1.0
Element fb:like not allowed as child of element div in this context.
Element name g:plusone cannot be represented as XML 1.0.
Element g:plusone not allowed as child of element div in this context. (Suppressing further errors from this subtree.), dst.

Eror-eror diatas antara lain yang sering dijumpai di W3C Validator (termasuk pengalaman saya sendiri) yang umumnya bersumber dari Widget Button Share pada halaman post blog.

Untuk mengatasi eror validasi HTML 5 button/tombol share Google Plus, Facebook Like, dan Twitter tersebut, saya mencoba membagi solusinya dibawah untuk blogger yang mengalami hal yang sama (semoga bisa membantu)

Berikut contoh dokumen kode dan script Valid HTML 5 Google Plus, Facebook Like, Twitter Button Share:


<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Share Button Valid HTML 5 by Problogiz</title>
</head>
<body>
<div id='sharebox'> 
<!-- Google+1 Button --> <!-- Place this tag where you want the +1 button to render --> 
<div class='wdt'><div class='g-plusone' data-size='tall'></div></div>
<!-- Tweet Button --> 
<div class='wdt'><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://problogiz.blogspot.com/" data-via="problogiz">Tweet</a></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Facebook Like --> 
<div class='wdt'><div id='fb-root'>
<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 = &quot;//connect.facebook.net/id_ID/all.js#xfbml=1&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script><div class="fb-like" data-href="http://problogiz.blogspot.com/" data-send="false" data-layout="box_count" data-show-faces="true" data-font="arial"></div></div></div></div>
</body>
</html>

Setelah kode button share cek validasi HTML 5 melalui Direct Input di W3C Validator, hasilnya sukses as HTML 5 dokumen :

Note: Untuk mengecek validitas dari Buton Share tersebut saya sarankan untuk menggunakan kode dokumen HTML 5 diatas secara Direct Input, walaupun saya menggunakan Buton Share ini juga disetiap halaman post blog ini, tapi belum semua halaman post blog ini Valid HTML 5 kecuali Halaman Home Problogiz yang sudah benar valid HTML 5. (belum sempat edit error validitas bawaan blogger di post main dan comment threaded)

Button Google Plus (Google +) Valid HTML 5

Untuk membuat Button Google Plus (Google +) yang Valid HTML 5, Anda tidak perlu susah mencari solusi kemana-mana, sebab Google telah menyediakan kode button +1 khusus untuk HTML 5 dengan kostum button size juga teknik mengurangi load time. Kunjungi Google Developers untuk membuat valid button +1 : https://developers.google.com/+/plugins/+1button/

Pertama Anda harus menempatkan kode Javascript berikut, sebelum tag </head>

Jika Anda telah memasangnya, lewati saja langkah ini, tidak perlu memasang lagi.

Basic tag button Google Plus, sederhana seperti berikut:

<g:plusone size="tall"></g:plusone>

Untuk membuatnya valid untuk HTML 5, dibutuhkan class attribute pada kode g-plusone, dan penambahan awalan "data-" setiap atribut tombol/button, sehingga kode valid Button G+ seperti berikut:

Ada beberapa pilihan ukuran dan type anotasi pada button +1, yang dapat Anda pilih di Google Developers, seperti : anotasi bubble: size small, size medium, size standard dan size tall.

Kemudian "Asynchronous JavaScript loading" yang berfungsi mempercepat loading time button +, Code Asynchronous JavaScript berikut letakkan tepat dibawah tag </div> dari kode button diatas.

Button Facebook Like Valid HTML 5

Sama dengan Google +, situs jejaring sosial Facebook juga menyediakan pilihan untuk button share dan button Facebook like yang valid HTML 5. Untuk membuat button FB Like valid HTMl 5 berikut langkah-langkahnya:

Kunjungi situs Facebook Developers: http://developers.facebook.com/docs/reference/plugins/like/
Masukkan url Blog Anda
Jangan dicek box Send Button
Pilih Layout Style : button_count atau box_count
Pilih ukuran button default
Pilih Verb to display: like
Klik tombol Get Code
Setelah muncul Window Pop Up, pilih opsi HTML 5 ( ada pilihan HTML5 XFBML IFRAME URL),

lihat screenshot :

Kode yang ditandai dengan highlight tersebut adalah kode button Like Facebook valid HTML 5, gunakan semua kode tersebut sebagai share button Anda seperti contoh dokumen diatas.

Button Share Tweet Valid HTML 5

Untuk button share Tweet, Anda dapat membuatnya di situs resourcesnya : https://twitter.com/about/resources/buttons#tweet

Pilih Share Button
Pada Button Option,
Pilih Share URL: Use the page URL
Tweet text: Use the title of the page
Cek box Show count
Masukkan ID Tweet Anda di form: Via@
Pilih Bahasa

Anda bisa melihat Preview dan Code button di kolom sebelah kanannya, copy semua kode tersebut dan gunakan sebagai button share Tweet Anda yang valid HTML 5. Kodenya kurang lebih seperti berikut :

<a href="https://twitter.com/share" class="twitter-share-button" data-via="problogiz" data-related="problogiz">Tweet</a>

Cuma kelemahan pada button share Tweet ini, ukuran button dan box bubble-count: vertikal secara default (minimal) masih tampak terlalu besar jika dibandingkan dengan button Facebook Like dan Google Plus ( data-count = 'vertikal'), sehingga untuk contoh button share yang saya gunakan (sebelah kiri main post) memakai default data-count: horizontal.

* Jika Kawan Blogger ada yang tau cara membuat ukuran bubble-count button Tweet lebih kecil (khususnya pada posisi 'vertikal'), mohon berkenan dishare Sob, thanks sebelumnya:)

Baiklah Sob, setelah Anda memahami cara membuat button/tombol share Valid HTML 5 Google Plus, Facebook Like, Twitter. Lihat juga artikel selanjutnya "Cara Buat Floating Button Share valid HTML 5 di Blogger" yang membahas bagaimana penerapannya button/tombol share tersebut di setiap halaman posting blog kita.

So don't miss it, ok

14 komentar

Achmad Muharya

24 Januari 2013 pukul 07.29

saya lebih baik pakai widget addthis aja hehehe :D

Unknown Author

24 Januari 2013 pukul 08.39

boleh saja addthis juga ok:)
udah support HTML 5 ya

Dewi

24 Januari 2013 pukul 09.25

Thank's gan atas informasi yang bermanfaat ini.

24 Januari 2013 pukul 09.33

sama2 gan:)
thanks udah mampir

Syukur BLOG

3 Februari 2013 pukul 20.23

Assalamu alaikum mas boleh ga' artikel2 nya saya copas di website saya www.raudhatulfitrah.com dan boleh ga' kita tukaran link, kalau boleh kirim konfirmasinya ke email sya ya... perdana_16@yahoo.co.id