Kamis, 02 Januari 2014

Membuat Tombol Facebook , Twitter dan Google Plus Valid HTML 5 - Setelah tutorial kemaren tentang validasi blog agar HTML 5 selanjutnya pembahasan mengenai membuat tombol share facebook , twitter dan google plus ini menjadi valid HTML5 , sebenarnya dari pihak developernya sendiri sekarang sudah menyediakan yang HTML5 nya untuk tombol share ini tetapi jika sobat tidak mau repot repot buka developer dari situs jejaring sosial besar bisa langsung copy paste kode berikut ini agar tombol share facebook twitter dan googleplus sobat valid HTML5.

Tombol Share Facebook Twitter dan google plus valid HTML5
Tombol Share Facebook Twitter dan google plus valid HTML5


Tombol Facebook Valid HTML5 dan SEO


1. Taruh kode ini di bawah <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=352634211479923";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

untuk menampilkan tombol Share Facebooknya silahkan simpan kode berikut

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


Tombol share Twitter Valid HTML5


<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'/>


Tombol Share Google Plus Valid HTML5


<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>


Info :
Simpan kode Penampilnya di tempat sobat akan menampilkannya , tinggal copy dan paste kok sob .nah biasanya tombol share tersebut ditampilkan dibawah posting artikel 

sip semoga ada manfaatnya ya sob.

Lanjut Tutorial


Tagged: ,