Cara Membuat Tombol Twitter, Google +1 dan Facebook Like Valid Html5

Sobat pasti tahu peran jejaring sosial dalam dunia blogger, bagi yang belum tahu nih saya beri tahu perannya sangatlah penting karena dapat meningkatkan trafik blog kita secara ceepat dan mudah akan tetapi sayangnya kebanyakan saya menemukan tombol seperti google plus dan facebook like itu tidak valid html5. Kali ini saya akan mencoba untuk mengatasi hal tersebut, langsung saja simak post berikut ini!!!

Sobat tahukan gambar diatas itu gambar apa, yup benar itu adalah gambar button facebook like dan lainnya, tapi kebanyakan orang button itu tidak valid html5nya sekarang saya akan memberi sobat kode yang valid html5 lihat dibawah.

Twitter

<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

Google Plus

<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};
 
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Facebook Like

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;width=90&amp;amp;action=like&amp;amp;font=arial&amp;amp;colorscheme=light&amp;amp;height=21&quot;' style='border:none; overflow:hidden; width:90px; height:21px;'/>

Update

Karena ada masukan dari blog sebelah, bahwa iframe kurang bagus untuk SEO dan disarankan untuk menggunakan kode dari Facebook Developer. Namun bagi soat yang tidak mau membuka developer fb, silahkan ikuti langkah pemasangan Facebook Like Button SEO friendly dan valid HTML5 :

1. Simpan kode ini di abawah <body>

<div id='fb-root'/>
<script>//<![CDATA[
(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&appId=211719005686931";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Kode di atas cukup satu saja untuk memasang beberapa plugin Facebook, selanjutnya silahkan tambahkan kode Facebook Like Button.

2. Untuk menambah kode Facebook Like Button, simpan kode ini di tempat mana kode akan dimunculkan :

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

Share this article please, on :

Share on fb Tweet Share on G+

Cara Membuat Tombol Twitter, Google +1 dan Facebook Like Valid Html5

0 Response to "Cara Membuat Tombol Twitter, Google +1 dan Facebook Like Valid Html5"

Post a Comment