Siteniz için şık CSS paylaş butonları

Sitenize eklemeniz için şık olabilecek bir css paylaş butonu çalışması ile karşınızdayım. Bunun için öncelikle kullanmış olduğunuz sitenizde font-awesome modülünün entegre edilmiş olması gerekmektedir. Eğer henüz entegre edili değilse buradan resmi sitesine girerek indirebilirsiniz.

 

 

Öncelikle .html kodumuzu sayfamızda uygun yere ekleyelim.

<!-- Facebook Paylaş Butonu -->
<a class="paylasbuton share facebook" href="#"><i class="fa fa-facebook"></i> Paylaş</a>
<!-- Googple Plus Paylaş Butonu -->
<a class="paylasbuton share gplus" href="#"><i class="fa fa-google-plus"></i> Paylaş</a>
<!-- Twitter Paylaş Butonu -->
<a class="paylasbuton share twitter" href="#"><i class="fa fa-twitter"></i> Tweet</a>
<!-- Stumbleupon Paylaş Butonu -->
<a class="paylasbuton share stumbleupon" href="#"><i class="fa fa-stumbleupon"></i> Stumble</a>
<!-- Pinterest Paylaş Butonu -->
<a class="paylasbuton share pinterest" href="#"><i class="fa fa-pinterest"></i> Pinle</a>
<!-- LinkedIn Paylaş Butonu -->
<a class="paylasbuton share linkedin" href="#"><i class="fa fa-linkedin"></i> LinkedIn</a>
<!-- Buffer Paylaş Butonu -->
<a class="paylasbuton share buffer" href="#"><i class="fa fa-share-square-o"></i> Buffer</a>

Sıra geldi ikinci aşamaya, yani .css kodumuza. Normal style.css'nizin içerisine entegre edebilirsiniz.

.paylasbuton {
display: block;
float: left;
padding: 10px 15px;
border:none;
background-color: #ececec;
text-decoration: none;
font-size: 18px;
color: #FFF;
}
.paylasbuton:hover {
color: #efefef;
}

.facebook {
background-color: #3b5998;
}
.gplus {
background-color: #dd4b39;
}
.twitter {
background-color: #55acee;
}
.stumbleupon {
background-color: #eb4924;
}
.pinterest {
background-color: #cc2127;
}
.linkedin {
background-color: #0077b5;
}
.buffer {
background-color: #323b43;
}

Paylaşım için gerekli site linklerini sırasıyla aşağıda vereceğim.

Facebook http://www.facebook.com/sharer/sharer.php?u=url-linki

Google+ https://plus.google.com/share?url=url-linki

Twitter https://twitter.com/intent/tweet?text=baslık&url=url-linki&via=kullanici-adi

Stumbleupon http://www.stumbleupon.com/submit?url=url-linki&title=baslık

Pinterest http://pinterest.com/pin/create/button/?url=url-linki&description=açıklama&media=resim-linki

Buffer https://buffer.com/add?text=başlık&url=url-linki

Linkedin http://www.linkedin.com/shareArticle?mini=true&url=url-linki&title=baslık&source=url-linki

 

Son işlemimiz ise paylaş butonlarına verdiğimiz bu linklerin 300x600 boyutunda popup pencere ile açılmasını sağlamak olacak.

<script type="text/javascript">
    jQuery(document).ready(function($) {
   $('.share').click(function() {
     var NWin = window.open($(this).prop('href'), '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');
     if (window.focus)
     {
       NWin.focus();
     }
     return false;
    });
});
</script>