اضافة أزرار مشاركة المواضيع عبر مواقع التواصل الإجتماعي بشكل إحترافي

* {list-style:none;text-decoration:none;margin:0;padding:0;outline:0;}


.share-inside > span{display:inline-block;background:#8539b5;padding:3px 14px;padding-bottom:8px;z-index:999999999;width:186px;position:relative;cursor:pointer;color:#fff;border-radius:2px}


.share-inside{position:relative;text-align:center;margin-top:8px}


.share-inside #share-bb ul li:nth-of-type(2){transition-delay:.1s}


.share-inside #share-bb ul li:nth-of-type(3){transition-delay:.2s}


.share-inside #share-bb ul li:nth-of-type(4){transition-delay:.3s}


.share-inside #share-bb ul li:nth-of-type(5){transition-delay:.4s}


.share-inside .selected ul li{opacity:1!important}


.share-inside .selected ul li:nth-child(5){position:absolute;right:0!important;left:-178px!important;top:58px!important}


.share-inside .selected ul li:nth-child(4){position:absolute;right:0!important;left:-95px!important;top:104px!important}


.share-inside .selected ul li:nth-child(3){position:absolute;right:0!important;left:4px!important;top:142px!important}


.share-inside .selected ul li:nth-child(2){position:absolute;right:0!important;left:95px!important;top:104px!important}


.share-inside #share-bb ul li{left:0;position:absolute;top:0;right:0;opacity:0;transition:all .4s cubic-bezier(0.935,0,0.34,1.33);-webkit-transition:all .5s cubic-bezier(0.935,0,0.34,1.33)}


#share-bb{z-index:9999999999999;display:block}


.share-inside div#share-bb ul li a{color:#fff;background:#8539b5;display:inline-block;width:50px;text-align:center;line-height:50px;font-size:16px;border-radius:50%;height:50px;position:relative!important;z-index:99999999999999999999!important}


.share-inside #share-bb ul li:nth-child(1){position:absolute;right:0;left:178px;top:58px}


.share-inside #share-bb ul li a img{width:25px;max-width:25px;margin-top:12px}

<script>


//<![CDATA[


$(".share-inside > span").click(function(){$("#share-bb").toggleClass("selected")});


$( ".whatsapp-btn" ).click(function() {


var ua = navigator.userAgent.toLowerCase();


var isAndroid = ua.indexOf("android") > -1;


var Ismobile = ua.indexOf("mobile") > -1;


var isiPhone = ua.indexOf("iPhone") > -1;


if(isAndroid) {


}else if(Ismobile){


}


else if(isiPhone){


} else {


alert("لا يمكنك مشاركة التدوينة على الواتساب الا من الهاتف !");


}


});


//]]>


</script>

<div class='share-inside'>


<div class='share-inside'>


<span><i class='fa fa-share-alt'/> شارك الموضوع</span>


<div id='share-bb'>


<ul>


<li>


<a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='noopener' target='_blank' title='Twitter Tweet'>


<i class='fa fa-twitter'/></a></li>


<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='noopener' target='_blank' title='Facebook Share'>


<i class='fa fa-facebook'/></a></li>


<li><a class='google' expr:href='"http://plus.google.com/share?url=" + data:post.url' rel='noopener' target='_blank' title='+1'>


<i class='fa fa-google-plus'/></a></li>


<li>


<a class='whatsapp-btn' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' title='Share on Whatsapp'>


<i class='fa fa-whatsapp'/></a></li>


<li><a class='pinterest' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&media=" + (data:post.firstImageUrl ? data:post.firstImageUrl : "https://3.bp.blogspot.com/-KwmN4jf70kk/VjEnrjuF-7I/AAAAAAAABq0/0ga5WDnDjZI/s1600-r/alt%2Bimage.png" ) + "&description=" + data:post.title' onclick='window.open(this.href,"_blank","width=640,height=320"); return false;' rel='noopener' target='_blank'><i class='fa fa-pinterest'/></a></li>


</ul>


</div>


</div>