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>
