Ok tadi kita sudah membahas cara membuat button share secara horizontal, kali ini saya akan share cara membuat button share secara vertikal kebalikan dari horizontal, caranya tidak jauh berbeda dengan yang horizontal
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. 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. 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>

2. Google plus

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

Jika sudah sekarang salin kode css berikut

<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 sobat share ke sosial media

<div class="share-to-sosmed">
<div class='fb-like share-button-facebook' data-action='like' data-href='{LINK}' data-layout='box_count' data-share='false' data-show-faces='false'></div>
<div class='fb-share-button share-button-facebook' data-href='{LINK}' data-layout='box_count'></div>
<a class='twitter-share-button' data-count='vertical' data-lang='en' data-text='{JUDUL ARTIKEL}' data-url='{LINK}' href='https://twitter.com/share'>Tweet</a>
<div class='g-plusone' data-href='{LINK}' data-size='tall'></div>
</div>

Keterangan :
- Kode {LINK} di ganti dengan link atau url
- Kode {JUDUL ARTIKEL} di ganti dengan judul artikel
OK. selesai, selamat mencoba dan semoga bermanfaat.