Membuat Tombol Social Share dengan Counter di Blog

Tutorial blogger kali ini tentang cara membuat widget tombol berbagi ke sosial media atau social share button di blog bersama penghitungnya. Widget ini sangat efektif mendongkrat popularitas blog di media-media social, macam Facebook, Twitter, Google Plus, Linkedin dan lain sebagaimnya.

Widget tombol social share yang dibagikan ini menggunakan tiga media social populer namun dalam empat tombol, yaitu tombol berbagi ke Twitter, tombol like Facebook, tombol share ke Facebook, dan tombol share ke Google Plus. Widget social button ini sangat cocok diletakkan di bawah postingan. Namun, dapat pula diletakkan di atas postingan blog.

Terkait: Cara Membuat Tombol Share dengan Efek Peekaboo di Blog

Gambar berikut ini adalah contoh tampilan share button yang dimaksud.

Widget ini banyak dipakai oleh blogger, karena navigasinya yang sangat mudah dan jelas. Ditambah dengan penghitungnya yang membuat tertarik pengunjung untuk segera berbagi gratis dengan akun social medianya terhadap postingan-postingan yang dia sukai.

Tutorial Membuat Share Button Count di Bawah Postingan Blogspot

Karena tombol ini sangat cocok diletakkan di bawah postingan, maka tutorial kali ini adalah cara meletakkan widget tersebut di bawah postingan, khusus bagi pengguna platform blogger atau blogspot.

1. Login ke blogger, pergi ke dashboard blog, kemudian klik pada menu Template > Edite HTML
2. Cari kode ]]></b:skin> atau </style> lalu letakkan kode berikut ini di atas kode tadi

/* social share button with counter */
.sosmed-button-count {overflow:hidden;}
.sosmed-button {
margin:0 0;
height:67px;
float:left;
}
.sosmed-button .share {
float:left;
margin-right:10px;
display:inline-block;
}
.share-btn {
margin:15px 0 25px;
height:20px;
overflow:hidden;
}

3. Cari lagi kode <data:post.body/> (yang kedua) lalu letakkan kode di bawah ini tepat di bawahnya

<div class='sosmed-button-count'>
<div class='sosmed-button'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</div>
</div>
<!-- <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>-->
<div style='clear: both;'/>

4. Jika di template belum ada kode pemanggil widget share button yang seperti ini, maka letakkan kode berikut ini di atas kode </body>

<script>
  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>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![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&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

5. Kemudian simpan Template, selamat widget social share button anda sudah terpasang.

Bagaimana jika ada beberapa tombol share yang tidak muncul?
Kemungkinan terdapat kode pemanggil (langkah nomor 4) yang ganda di template blog anda. Hapus kode pemanggil yang lama dan ganti dengan kode pemanggil pada langkah 4.

Demikian cara membuat tombol share social media dengan counternya untuk pengguna blogspot, semoga dapat dengan mudah diterapkan di blogger anda. Selamat mencoba dan selamat sukses.