Memasang Share Button AddToAny Valid HTML5

Jika kita membahas tentang media sosial tentu tidak akan pernah bosan untuk terus mengupdate perkembangannya terutama mengenai pemanfaatan Trafik kunjungan yang bersumber dari Sosial media tersebut. Ada banyak keunggulan jika memasarkan suatu produk dengan memanfaatkan Media Sosial tersebut, bahkan sekarang ini ada banyak Workshop dan Training khusus untuk mempelajari kekuatan Media Sosial seperti Workshop yang pernah saya ikuti yaitu Sosial Media Marketing.

Ada banyak ilmu ternyata didalamnya bagaimana meningkatkan Trafik Blog sampai 200 % melonjak hanya dengan memanfaatkan Media Sosial, mungkin lain waktu saya akan bahas di Blog ini.

Untuk Postingan kali ini masih terkait Media Sosial share Button yang akan kita pasang di Blog, sebenarnya sudah pernah di bahas di blog ini namun yang kali ini agak sedikit berbeda kita akan mengaitkan dengan Flatform AddToAny dan nanti akan kita buat simple penampakannya disingkat dan hanya diwakilkan dengan tombol icon Plus (+) saja yang memawakili dari AddToAny sehingga tidak akan membuat Loading Blog terlalu berat nantinya karena di dalamnya ditambahkan JS asynchronous.

Bagi sobat yang tertarik untuk mencobanya mari kita bahas bersama.

Langkah Pertama

Silahkan sobat salin kode CSS dibawah ini lalu letakkan diatas kode ]]></b:skin> atau </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;}

Pastikan kode JS Facebook SDK sudah terpasang di Blog Sobat seperti 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&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

Pastikan kode SDK facebook pada sudah terpasang kode asynchronous seperti kode yang ditandai js.async=true; kalau belum terpasang silahkan tambahkan.


Langkah Ke Dua
Silahkan sobat salin kode HTML dibawah ini lalu letakkan di bawah postingan blog sobat.

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

Untuk jenis font dan ukuran silahkan sobat sesuaikan dengan font blog sobat


Langkah Ke Tiga
Ini yang sering terlewatkan dan tidak disadari banyak kejadian tombol Google Plus tidak muncul,  coba perhatikan dan cek kode pada blog dipaling bawah jika terdapat kode &lt;!--</body>--&gt;&lt;/body&gt; silahkan sobat tambahkan dengan kode dibawah ini lalu letakkan tepat diatasnya.   

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

Namun jika sudah ada seperti kode diatas, tidak usah dipasang lagi cukup pakai yang sudah ada.

Dan selesai Selamat Mencoba.