Membuat Tombol Facebook, Twitter Dan Google Plus Valid Html5

Sepertinya ahad ini masih membahas perihal Validasi HTML5. Ok kali ini Saya akan membuatkan tips menciptakan tombol share valid HTML5, pada tombol suka Facebook biasanya akan di dapatkan iframe, ibarat yang sudah Saya bahas sebelumnya bahwa iframe sangat tidak elok untuk SEO.

Pada tombol share ini Saya mengubahnya menjadi Asyncron biar 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 instruksi </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 instruksi ]]></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 instruksi ibarat 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 instruksi diatas silakan Anda simpan instruksi tombol share tersebut diatas instruksi <data:post.body/> kalau ingin menyimpanya diatas artikel atau simpan dibawah instruksi <data:post.body/> kalau ingin menyimpannya dibawah artikel. Sehingga menjadi instruksi dibawah ini, perhatikan instruksi 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>

Sumber http://kang-mousir.blogspot.com