Social Share Button Sederhana

Bagi seorang web ataupun blog developer, social sharing button merupakan hal yang wajib dan harus ada di website atau blog kita. Social share button berfungsi untuk membagikan postingan web kita ke berbagai media sosial. Selain fungsinya sebagai salah satu cara untuk mempromosikan website kita secara gratis, social sharing juga sekarang dijadikan pengukur bagus tidaknya SEO website atau blog kita.

Saat ini sudah banyak berkembang plug-in ataupun tutorial yang membahas tentang social share button. Namun ketika kita memakai plug-in dari pihak lain, biasanya mereka menitipkan link-link mereka ke plug-in tersebut. Disamping itu, bentuk plug-in social share button hanya sebatas itu-itu saja dan jarang bervariasi. Hal tersebut menjadikan tampilan website atau blog kita serupa dengan orang lain. Kalau kita mempunyai tampilan yang berbeda dari yang lain, tentunya itu akan menjadi nilai plus tersendiri.

Berikut merupakan tampilan social share button sederhana yang dapat dijadikan referensi buat kalian yang menyukainya.

Untuk membuatnya, berikut kode-kode yang diperlukan.

Kode HTML

<div class='share-box'>
<div align='center'>
  <h4>Share this post <i class='fa fa-smile-o'/></h4>
<div class='share-btn twitter'><a href="https://twitter.com/share"
data-count='vertical' class="twitter-share-button" data-related="blognusa" data-hashtags="blognusa">Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class='share-btn google-plus'>
<g:plus action='share' annotation='vertical-bubble' lang='en-US'/>
</div>
<div class='share-btn facebook'>
<div class='fb-share-button' data-layout='box_count'/>
</div>
  </div>
</div>

Tempatkan kode html tersebut di posisi dimana anda ingin menampilkan share button. Kemudian, untuk kode CSS nya, berikut kode-kodenya :

<style type='text/css'>
.share-box {
  background-color:#fff;
  font-size:14px;
  padding:10px 0 11px;
  position:relative;
  margin-top:10px;
  color:#444;
  box-shadow:0 0 0px 2px #f5f5f5;
}
a.more {
  font-family:&#39;Oswald&#39;;
  text-transform:uppercase;
  background:#01c0f4;
  font-size:14px;
  color:#fff;
  text-align:center;
  padding:1px 6px;
  margin-top:-6px;
  border-radius:2px;
}
a.more:before {
  content:&quot;\f0fe&quot;;
  font-family:FontAwesome;
  font-style:normal;
  font-weight:normal;
  font-size:18px;
}
a.more:hover {
  background:#eac965;
  color:#fff;
}
.share-btn {
    display: inline-block;
    color: #ffffff;
    border: none;
    padding: 0.2em;
    width: 80px;
    height: 70px;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
    outline: none;
    text-align: center;
}
.share-btn:hover {
  color: #eeeeee;
}
.share-btn:active {
  position: relative;
  top: 2px;
  box-shadow: none;
  color: #e2e2e2;
  outline: none;
}
.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.email       { background: #444444; }
</style> 

Share button ini disesuaikan dengan model vertikal dengan penghitung jumlah pengguna yang membagikan konten anda. Kalian dapat mengedit sendiri tampilannya, baik warna background maupun bentuk social share nya dengan mengedit kode html dan css di atas.

Social share button sederhana ini dapat dipasang di blog atau website kalian. Untuk melihat tampilan demo kode social share sederhana ini di CodePen, silahkan klik link dibawah.

• LIVE PREVIEW