Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5

Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5

Sepertinya minggu ini masih membahas tentang Validasi HTML5. Ok kali ini Saya akan berbagi tips membuat tombol share valid HTML5, pada tombol suka Facebook biasanya akan di dapatkan iframe, seperti yang sudah Saya bahas sebelumnya bahwa iframe sangat tidak bagus untuk SEO.

Pada tombol share ini Saya mengubahnya menjadi Asyncron agar kinerjanya lebih cepat. Silakan Anda simak baik - baik.

Tombol Facebook

<div id='fb-root'/>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' expr:data-href='data:post.url'/>

Tombol Twitter

<a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url'>Tweet</a>

Tombol Google Plus

<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>

JavaScript

Silakan Anda simpan JavaScript Asyncron ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
//]]>
</script>

Cara Memasangnya

Pertama silakan Anda simpan CSS ini diatas kode ]]></b:skin> atau </style>.

.share{display:block;padding:0;margin:0}

Untuk memasang Tombol Facebook, Twitter dan Google Plus pada blog silakan Anda cari dahulu kode seperti dibawah ini.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>

Setelah ditemukan kode diatas silakan Anda simpan kode tombol share tersebut diatas kode <data:post.body/> bila ingin menyimpanya diatas artikel atau simpan dibawah kode <data:post.body/> bila ingin menyimpannya dibawah artikel. Sehingga menjadi kode dibawah ini, perhatikan kode yang Saya tandai.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
<div class='share'>
<span style='float:left;margin-right:35px;font-weight:bold'>Bagikan :</span>
<div id='fb-root'/><span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' expr:data-href='data:post.url' style='margin-right:40px;'/><a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url'>Tweet</a><div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
  <div class='clear'/>
</div>
.....
 </article>
</b:includable>

Artikel Terkait

Komentar

Sugrahaku
ngomong" masalah iframe, kan kotak komentar di blog itu kan pakai iframe, itu gimana kang?
Kang Mousir
Kalau iframe komentar blogger itu lain lagi ceritanya :D
Unknown
Itu tombol facebook nya di blog ini kalo di klik hasil nya kok tampilan cuma setengah ya?
Sonaji Yusup
Komentar ini telah dihapus oleh pengarang.
John
Berhasil kang, telah kami praktekkan.... terima kasih kang..
Ujang
terimaksih gan sudah saya praktekan
hefry fajar
ada yang tw g np ya ko blog q biasanya di alihkan ke blog lain
surga kenari
Trimakasih, bekerja dengan sempurna. Tadinya gagal tampil sblum di pasang javas.
Unknown
Kang , bagi tutorial dong cara buat tombol follow seperti punya akang yang di sidebar yang paling atas.

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Batal