Apakah anda sering melihat button share ketika anda mengunjungi sebuah website atau blog, ya kali ini saya akan membahasa cara membuat button share dalam bentuk count box horizontal, tipe button ada 2 macam ada yang horizontal dan ada yang vertikal dalam pembahasan kali ini saya akan membasah yang horizontal terlebih dahuu, untuk yang type vertikal saya akan basah di turorial berikutnya
Biasanya button share yang sering kita lihat adalah Facebook, Twitter dan Google Plus karena ke 3 sosial media tersebut yang paling populer saat ini, mengapa pada setiap artikel terdapat button untuk share ke beberapa sosial media, jawabanya adalah untuk meningkatkan trafik dari website meraka, karena dengan share ke beberapa sosial media apa lagi dengan isi content yang sangat menarik bisa membuat pengguna sosial media penasaran dengan isi artikel yang di share ke sosial media tersebut, dan ketika seseorang penasaran dengan isi artikel maka artikel akan di klik dan akan mengarahkan ke website atau blog anda, pada saat itu lah website atau blog trafik anda akan meningkat tajam tergantung dari berapa banyak yang mengunjungi blog atau website anda
ok kembali ke pembasahan topik, nah untuk dapat meningkatkan trafik blog atau website anda tidak ada salahnya anda menambahkan share button pada artikel di blog atau website yang anda kelola
untuk tampilan share button sosial medianya yaitu seperti ini



Salin kode plugin dari setiap sosial media

1. Untuk plugin Facebook

<script type="text/javascript">
(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>

2. Untuk plugin Twitter

<script type="text/javascript">
!function(d,s,id){
  var js,fjs=d.getElementsByTagName(s)[0];
  if(!d.getElementById(id)){
    js=d.createElement(s);js.id=id;
    js.src="//platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js,fjs);
  }
}(document,"script","twitter-wjs");
</script>

3. Untuk plugin Google plus (G+)

<script async="" defer="" src="https://apis.google.com/js/platform.js">
{lang: 'id'}
</script>

Jika sudah sekarang salin kode css berikut dan simpan sebelum tag </head> pada blog atau website yang anda kelola

<style type="text/css">
.share-to-sosmed { display: inline-block; }
.share-to-sosmed .share-button-facebook { float: left; margin-right: 7px; }
</style>

Setelah semua kode di salin, langkah selanjuatnya yaitu memasukan url atau link yang akan anda share ke sosial media

<div class="share-to-sosmed">
<div class="fb-like share-button-facebook" data-action="like" data-href="{LINK}" data-layout="button_count" data-share="true" data-show-faces="false"></div>
<a class="twitter-share-button" data-lang="en" data-text="{JUDUL ARTIKEL}" data-url="{LINK}" href="https://twitter.com/share">Tweet</a>
<div class="g-plus" data-action="share" data-annotation="bubble" data-href="{LINK}"></div>
</div>

Keterangan :
- Kode {LINK} di ganti dengan link atau url
- Kode {JUDUL ARTIKEL} di ganti dengan judul artikel
OK. sekarang anda sudah bisa share artikel ke sosial media Facebook, Twitter, dan Google plus (G+) selamat mencoba dan semoga bisa bermanfaat.