Membuat Share Button di Bawah Posting Valid HTML 5

11 Mar 2014

Sebenarnya share button Facebook, Twitter, dan Google Plus yang valid HTML5 sudah pernah dishare oleh kang Ismet, namun di sini saya menambahkan lagi sebuah share button dari AddToAny yang memungkinkan share artikel ke lebih banyak lagi social media tanpa harus menampilkan semua share button-nya di halaman blog.

Yang ditampilkan hanya sebuah icon plus (+) untuk mewakili widget More Share dari AddToAny.

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. Jika Anda tertarik untuk mencobanya silahkan copy kode-kode di bawah ini.

Silahkan simpan 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;}

Kemudian pastingan kode JavaScript SDK Facebook sudah terpasang di blog Anda seperti berikut:

<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&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Dan pastikan juga kode JavaScript SDK Facebook sudah dipasang kode asynchronous seperti ini js.async=true;, jika belum silahkan pasang seperti kode di atas.

Kemudian silahkan copy kode HTML di bawah ini di daerah bawah postingan blog Anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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'>&#10010;</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
</b:if>

Silahkan sesuaikan font-family untuk tulisan "Share this article :" dengan font-family blog Anda.

Jika blog Anda terpasang kode </body> (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&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Jika ternyata kode javascript di atas sudah ada di blog Anda maka silahkan lewati langkah ini.