Stylish Social Share Button for Wapkiz Site Download Page

Sharing your wap/web page on social site will boost your traffic.

By a adding a simple code to your wapkiz site’s download page , you and your users also can share your site on social (facebook, whatsapp, twitter, instagram, pinterest and via email).

Add below codes to your wapkiz site to create stylish share buttons 😍

Demo

Meta Header

(Insert below tag in meta header)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

CSS

.sharebox{background:rgba(70,130,180,0.1);margin:7px;padding:3px;border-radius:30px;text-align:center;}
.share_btn{display:inline-block;text-decoration:none;width:45px;height:45px;line-height: 45px;font-size:21px;border-radius:50%;text-align:center;vertical-align:middle;overflow:hidden;font-weight:bold;text-shadow:1px 1px 1px rgba(255, 255, 255, 0.66);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);margin:3px;}
.share_btn .fa{line-height: 45px;}
.share_btn:hover{box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);}
.share_btn:active{transform:translateY(5px);}
.shtw {color: #22b8ff;background-image: -webkit-linear-gradient(#aeecff 0%, #57c8ff 100%);background-image: linear-gradient(#aeecff 0%, #57c8ff 100%);}
.shfb {color:#6183f3;background-image: -webkit-linear-gradient(#b5d3ff 0%, #6b8bff 100%);background-image: linear-gradient(#b5d3ff 0%, #6b8bff 100%);}
.shmail{color:#ff6d82;background-image: -webkit-linear-gradient(#ffcfd7 0%, #ff7285 100%);background-image: linear-gradient(#ffcfd7 0%, #ff7285 100%);}
.shwhatsapp{color:#60d245;background-image: -webkit-linear-gradient(#b9ffca 0%, #80e067 100%);background-image: linear-gradient(#b9ffca 0%, #80e067 100%);}
.shpin{color:#ea4158;background-image: -webkit-linear-gradient(#ffa8a8 0%, #ff5d5d 100%);background-image: linear-gradient(#ffa8a8 0%, #ff5d5d 100%);}
.shtg {color: #0077b3;background-image: -webkit-linear-gradient(#80d4ff 0%, #0088cc 100%);background-image: linear-gradient(#80d4ff 0%, #0088cc 100%);}

Html/Tag Code

(Place this code on your download page anywhere you want to display share buttons)

Replace YOUR-FACEBOOK-APP-ID by your facebook app id.

Learn How to get a Facebook App ID for your Website

<div class="sharebox">[fm]to=:url-1(:to-fid:):,fn=1||<!--twitter-->
<div class="share_btn shtw"><a href="https://twitter.com/intent/tweet?text=%name%&url=:page_url:" target="_blank" style="color:#22b8ff;"><i class="fa fa-twitter"></i></a></div>
<!--facebook-->
<div class="share_btn shfb"><a href="https://www.facebook.com/dialog/share?href=:page_url:&app_id=YOUR-FACEBOOK-APP-ID&quote=%name%" target="_blank" style="color:#6183f3;"><i class="fa fa-facebook"></i></a></div>
<!--email-->
<div class="share_btn shmail"><a href="mailto:?subject=%name%&body=%name% %0A%0A:page_url:" style="color:#ff6d82;"><i class="fa fa-envelope"></i></a></div>
<!--whatsapp-->
<div class="share_btn shwhatsapp"><a href="whatsapp://send?text=%name%. %0A%0A:page_url:" style="color:#10d245;">  <i class="fa fa-whatsapp"></i></a></div>
<!--telegram-->
<div class="share_btn shtg"><a href="https://telegram.me/share/url?url=:page_url:&text=%name%" target="_blank" style="color:#0077b3;"><i class="fa fa-telegram"></i></a></div>
<!--pinterest-->
<div class="share_btn shpin"><a href="https://www.pinterest.com/pin/create/button/?url=:page_url:&description=%name% %0A%0A:page_url:&media=%urlthumb%" target="_blank" style="color:#ea4158;">  <i class="fa fa-pinterest"></i></a></div>[/fm]</div>

You are done! 👍

Support Us! Please Comment below for more stylish social button code.