Facebook Twitter G+ and More Share Button Valid HTML

Newbanie Blog - Share artikel ke sosial media adalah hal penting yang jangan sampai terlupakan. Namun apa jadinya jika tombol share sosial media tersebut menyebabkan error saat validasi HTML serta memperlambat loading blog?

Nah kali ini saya akan share Cara Memasang Facebook Twitter G+ and More Share Button Valid HTML. Untuk live demonya silahkan lihat pada share button di bawah postingan ini. Agar share button ini tidak mengganggu loading blog, saya lengkapi js-nya dengan asynchronous. Tertarik? Yuk ikuti tutorial dibawah

WARNING!
Sebelum melakukan tutorial ini ada baiknya back-up dulu template anda untuk menghindari hal hal yang tidak diinginkan.

Salin kode CSS di bawah ini di atas kode ]]></b:skin> atau kode </style>

.share-box{border-top:2px solid #bbb;border-bottom:1px solid #ccc;font-size:16px;padding:10px 0 11px;position:relative;margin:25px 20px}
a.more{background:#007eff;border:1px solid #0b6bce;border-radius:2px;font-size:16px;font-weight:700;color:#fff;text-align:center;padding:2px 6px;margin-top:-4px}
a.more:hover{background:#0f6bc9;}

Lalu salin kode JavaScript SDK Facebook dibawah ini.

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Jika sudah memilikinya lewati langkah ini.

Setelah itu ganti kode share button template anda dengan kode berikut

<b:if cond='data:blog.pageType == "item"'>
<div class='share-box'>
<span style='float:left;margin-top:-2px;margin-right:30px;font-size:18px;font-family: Oswald;color:#666;text-transform:uppercase'>Share this article :</span>
<div style='margin-right:30px;float:left;'>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'></span>
</div>
<div style='float:left;'>
<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' title='Share via Twitter'>Tweet</a>
<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' title='More Share'>✚</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
</b:if>

Jika blog Anda terpasang kode &lt;!--</body>--&gt;&lt;/body&gt; (di paling bawah), maka agar tombol Google Plus-nya muncul silahkan pasang javascriptnya di bawah ini dan simpan di atasnya.

<script type='text/javascript'>
  (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';
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Selamat mencoba.

http://www.kompiajaib.com/2014/02/facebook-twitter-google-plus-dan-more.html

Tweet