Cara Mebuat Tombol Share Sosial

Dalam meningkatkan Search engine optimization atau yang sering dikenal dengan SEO, berbagi backlink bisa menjadi sejata ampuh untuk menarik para pembaca atau meramaikan pengunjung pada website kita.

Lalu apakah kita harus repot repot utuk membagikannya ke website - website lain. itu tidak perlu jika anda seorang pemalas.

Jawabanya cukup untuk memasang tombol share agar sesorang yang sempat membaca artikel anda jika mereka merasa senang atau artikel anda di rasa berguna, mereka bisa membagikan link anda secara cuma - cuma.

Nah untuk kali ini berinisiatif utuk memberikan code yang sangat simple dan mudah tentang bagaimana membuat tombol share untuk facebook, twitter dan google plus.

Pertama anda harus memiliki gambar icon dari facebook, twitter dan google plus tersebut.

jika anda blum memilikinya anda bisa download dengan cara klik link dibawah ini, tepatkan kursor anda pada gambar, setelah itu klik kanan save as.

yosh... setelah anda sudah mempunyai iconnya kita siap untuk mengkoding

pertama kita bentuk html dimana kita menaruh icon tersebut, namun bisa anda ganti dengan icon yang kamu suka.

<div class="button-share">

<a class="social-button" href="http://www.twitter.com/intent/tweet?text=" title="Berbagi ke Twitter" onclick="return share_click(this.href)" target="_blank"><img src="twitter.png"></a>

<a class="social-button" href="http://www.facebook.com/sharer/sharer.php?u=" title="Berbagi ke Facebook" onclick="return share_click(this.href)" target="_blank"><img src="facebook.png"></a>

<a class="social-button" href="http://plus.google.com/share?url=" onclick="return share_click(this.href)" target="_blank" title="Berbagi ke Google plus"><img src="google.png"></a>

</div>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

setelah kita selesai dengan html nya. kita lengkapi dengan css nya.

.button-share {
    display: inline-block;
}
.button-share:after {
    content:"";
    display:table;
    clear:both;
}
.button-share .social-button {
    float: left;
    height: 40px;
    width: 40px;
    margin-right: 5px;
    transition: 0.5s;
}
.button-share .social-button:last-child {
    float: left;
    height: 40px;
    width: 40px;
    margin-right: 5px;
}
.button-share .social-button:last-child {
    margin-right: 0;
}
.button-share .social-button img {
    max-width: 100%;
}
.button-share:hover .social-button{
    opacity:0.5;
}
.button-share:hover .social-button:hover{
    opacity:1;
}
.social-button {
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 2px 3px #AAAAAA;
    display: block;
    margin-bottom: 5px;
    padding: 5px;
    position: relative;
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.

sesudah htmlnya dan cssnya terbentuk sesuai keinginan anda, lalu sekarang script function nya.

function share_click(url){
    var width  = 500;
    var height = 400;
    var top    = 20;
    var left   = (screen.width  - width)/2;
    var params = "width="+width+", height="+height;
    params += ", top="+top+", left="+left;
    params += ", toolbar=no";
    var site = document.URL;
    var title = document.title.replace(/[^\w\s]/gi, '');
    var domain = url.split("/")[2];
    switch(domain) {
        case "www.facebook.com":
        link = url+site+"&t="+title;
        break;
        case "plus.google.com":
        link = url+site;
        break;
        default:
        link = url+site+title;
    }
    newwin=window.open(link,"indocodex", params);
    if (window.focus) {newwin.focus()}
    return false;
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

LIVE DEMO