Simple social sharing buttons with counter

In this tutorial we are sharing simple best social sharing buttons with show counter of facebook and linkedin using jquery which are used to share posts and or display total fans in the sidebar widget with counter. Displaying social counter on certain parts of the website.
If you want to add social counter on website or on any web page etc. for that you can use this code is very simple and light weight use it and make your website beautiful.

There are lots of jquery plugins, WordPress plugins available for website but these plugins might be make your website slow. I am developer so i know very well about this thing these plugins are using heavy lines of code as possible as avoid them to use. If you notice these plugins providing more then 100 number of icons but did you notice how money social networking sites your know or using so why you are using and make slow your website.

HTML Code For Social Media Sharing Icons

Here i am using 5 CSV icons for famous social networking site such as Twitter, Facebook, Google Plus, Linkedin and whatsapp.

<div class="swtssb_social">
 <ul>
 <li class="twitter" onclick="swtssbTwitterPostShare()">
 <svg class="swtssb_social_icon icon-twitter">
 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-twitter"></use>
 <symbol id="icon-twitter" viewBox="0 0 32 32">
 <title>twitter</title>
 <path d="M32 7.075c-1.175 0.525-2.444 0.875-3.769 1.031 1.356-0.813 2.394-2.1 2.887-3.631-1.269 0.75-2.675 1.3-4.169 1.594-1.2-1.275-2.906-2.069-4.794-2.069-3.625 0-6.563 2.938-6.563 6.563 0 0.512 0.056 1.012 0.169 1.494-5.456-0.275-10.294-2.888-13.531-6.862-0.563 0.969-0.887 2.1-0.887 3.3 0 2.275 1.156 4.287 2.919 5.463-1.075-0.031-2.087-0.331-2.975-0.819 0 0.025 0 0.056 0 0.081 0 3.181 2.263 5.838 5.269 6.437-0.55 0.15-1.131 0.231-1.731 0.231-0.425 0-0.831-0.044-1.237-0.119 0.838 2.606 3.263 4.506 6.131 4.563-2.25 1.762-5.075 2.813-8.156 2.813-0.531 0-1.050-0.031-1.569-0.094 2.913 1.869 6.362 2.95 10.069 2.95 12.075 0 18.681-10.006 18.681-18.681 0-0.287-0.006-0.569-0.019-0.85 1.281-0.919 2.394-2.075 3.275-3.394z"></path>
 </symbol>
 </svg>
 </li>
 <li class="facebook" onclick="swtssbFacebookPostShare()">
 <svg class="swtssb_social_icon icon-facebook">
 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-facebook"></use>
 <symbol id="icon-facebook" viewBox="0 0 32 32">
 <title>facebook</title>
 <path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
 </symbol>
 </svg>
 </li>
 <li class="gplus" onclick="swtssbGooglePlusPostShare()">
 <svg class="swtssb_social_icon icon-google-plus">
 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-google-plus"></use>
 <symbol id="icon-google-plus" viewBox="0 0 32 32">
 <title>google-plus</title>
 <path d="M10.181 14.294v3.494h5.775c-0.231 1.5-1.744 4.394-5.775 4.394-3.475 0-6.313-2.881-6.313-6.431s2.838-6.431 6.313-6.431c1.981 0 3.3 0.844 4.056 1.569l2.762-2.662c-1.775-1.656-4.075-2.662-6.819-2.662-5.631 0.006-10.181 4.556-10.181 10.188s4.55 10.181 10.181 10.181c5.875 0 9.775-4.131 9.775-9.95 0-0.669-0.075-1.181-0.163-1.688h-9.613z"></path>
 <path d="M32 14h-3v-3h-3v3h-3v3h3v3h3v-3h3z"></path>
 </symbol>
 </svg>
 </li>
 <li class="linkedin" onclick="swtssbLinkedinPostShare()">
 <svg class="swtssb_social_icon icon-linkedin2">
 <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-linkedin2"></use>
 <symbol id="icon-linkedin2" viewBox="0 0 32 32">
 <title>linkedin2</title>
 <path d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path>
 <path d="M2 12h6v18h-6v-18z"></path>
 <path d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path>
 </symbol>
 </svg>
 </li>
 <li class="whatsapp" onclick="swtssbWhatsappPostShare()">
 <svg class="swtssb_social_icon icon-whatsapp">
 <use xlink:href="#icon-whatsapp"></use>
 <symbol id="icon-whatsapp" viewBox="0 0 32 32">
 <title>whatsapp</title>
 <path d="M27.281 4.65c-2.994-3-6.975-4.65-11.219-4.65-8.738 0-15.85 7.112-15.85 15.856 0 2.794 0.731 5.525 2.119 7.925l-2.25 8.219 8.406-2.206c2.319 1.262 4.925 1.931 7.575 1.931h0.006c0 0 0 0 0 0 8.738 0 15.856-7.113 15.856-15.856 0-4.238-1.65-8.219-4.644-11.219zM16.069 29.050v0c-2.369 0-4.688-0.637-6.713-1.837l-0.481-0.288-4.987 1.306 1.331-4.863-0.313-0.5c-1.325-2.094-2.019-4.519-2.019-7.012 0-7.269 5.912-13.181 13.188-13.181 3.519 0 6.831 1.375 9.319 3.862 2.488 2.494 3.856 5.8 3.856 9.325-0.006 7.275-5.919 13.188-13.181 13.188zM23.294 19.175c-0.394-0.2-2.344-1.156-2.706-1.288s-0.625-0.2-0.894 0.2c-0.262 0.394-1.025 1.288-1.256 1.556-0.231 0.262-0.462 0.3-0.856 0.1s-1.675-0.619-3.188-1.969c-1.175-1.050-1.975-2.35-2.206-2.744s-0.025-0.613 0.175-0.806c0.181-0.175 0.394-0.463 0.594-0.694s0.262-0.394 0.394-0.662c0.131-0.262 0.069-0.494-0.031-0.694s-0.894-2.15-1.219-2.944c-0.319-0.775-0.65-0.669-0.894-0.681-0.231-0.012-0.494-0.012-0.756-0.012s-0.694 0.1-1.056 0.494c-0.363 0.394-1.387 1.356-1.387 3.306s1.419 3.831 1.619 4.1c0.2 0.262 2.794 4.269 6.769 5.981 0.944 0.406 1.681 0.65 2.256 0.837 0.95 0.3 1.813 0.256 2.494 0.156 0.762-0.113 2.344-0.956 2.675-1.881s0.331-1.719 0.231-1.881c-0.094-0.175-0.356-0.275-0.756-0.475z"></path>
 </symbol>
 </svg>
 </li>
 </ul>
</div>

CSS Code For Social Media Sharing Icons

Here i am writing couple of line of css for giving beautiful style to icons and make float left side fix.

<style>
.swtssb_social {transform-origin:50% 0%; transition:.5s; float:left; width: 80px; position:fixed; top:200px; z-index: 99;}
.swtssb_social ul {position:relative; left:0; right:0; margin:-5px auto 0; color:#fff; height:46px; width:auto; padding:0; list-style:none;}
.swtssb_social ul li {cursor:pointer; width:60px; margin:0; padding:6px 0; text-align:center; float:left; display:block; height:auto; -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */ transition: width 1s;}
.swtssb_social ul li a{color:#FFF; float: left; width: 100%;}
.swtssb_social ul li:hover {width: 80px;}
.swtssb_social ul .twitter {background:#1da1f2;}
.swtssb_social ul .gplus {background:#E34429;}
.swtssb_social ul .linkedin {background:#0077b5;}
.swtssb_social ul .facebook {background:#3b5998;}
.swtssb_social ul .whatsapp {background:#3EBE2B;}
.swtssb_social_count{float:left; width:100%; padding:5px; text-align:center; padding: 4px 0px 0px; font-size:12px; line-height: 12px; font-family: arial;}
.swtssb_total_share_count_li{background: #fff; color: #000; padding:5px; line-height: 18px;}
.swtssb_total_share_count_li span{float: left; width: 100%; font-family: arial;}
.swtssb_social_icon {display: inline-block; width: 24px; height: 24px; stroke-width: 0; stroke: currentColor; fill: currentColor; color: #FFFFFF; padding: 0px; margin-bottom: -5px;}
@media (max-width:992px)
{
 .swtssb_social {transform-origin:50% 0%; transition:.5s; float:left; width: 100%; top:auto; bottom:0px;}
 .swtssb_social ul{width: 100%;}
 .swtssb_social ul li{width: 25%;}
 .swtssb_social ul li:hover {width: 25%;}
 .swtssb_total_share_count_li{display:none !important;}
}
</style>

JavaScript Code For Social Media Sharing Icons

Here i am writing JavaScript code for onclick share post on social media.

<script>
var swtssbSharePostUrl = window.location.href;
function swtssbGooglePlusPostShare()
{
 sharelink = "https://plus.google.com/share?url="+swtssbSharePostUrl;
 newwindow=window.open(sharelink,'name','height=400,width=600');
 if (window.focus) {newwindow.focus()}
 return false;
}
function swtssbTwitterPostShare() {
 sharelink = "https://twitter.com/share?url="+swtssbSharePostUrl;
 newwindow=window.open(sharelink,'name','height=400,width=600');
 if (window.focus) {newwindow.focus()}
 return false;
}
function swtssbFacebookPostShare() {
 sharelink = "http://www.facebook.com/sharer.php?u="+swtssbSharePostUrl;
 newwindow=window.open(sharelink,'name','height=400,width=600');
 if (window.focus) {newwindow.focus()}
 return false;
}
function swtssbLinkedinPostShare() {
 sharelink = "http://www.linkedin.com/shareArticle?mini=true&amp;url="+swtssbSharePostUrl;
 newwindow=window.open(sharelink,'name','height=400,width=600');
 if (window.focus) {newwindow.focus()}
 return false;
}
function swtssbWhatsaapPostShare() {
 sharelink = "whatsapp://send?text=="+swtssbSharePostUrl;
 newwindow=window.open(sharelink,'name','height=400,width=600');
 if (window.focus) {newwindow.focus()}
 return false;
}
function swtssbLinkedinGetCount(){
 var request = jQuery.ajax({
 url: "https://www.linkedin.com/countserv/count/share",
 type: "POST",
 data: {url : swtssbSharePostUrl, swtssb_nonce : swtssb},
 dataType: "jsonp"
 });
 request.done(function(msg) {
 jQuery('.swtssbLinkedinCount').html(msg['count']);
 });
}
swtssbLinkedinGetCount();
function swtssbFacebookGetCount() {
 var request = jQuery.ajax({
 url: "https://graph.facebook.com/",
 type: "GET",
 data: {id : swtssbSharePostUrl, swtssb_nonce : swtssb}
 
 });
 request.done(function(msg) {
 jQuery('.swtssbFacebookCount').html(msg['share']['share_count']);
 }); 
}
swtssbFacebookGetCount();
</script>

Note: In Future using this simple code i am developing WordPress plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts: You may like

Select box with search option jquery

Simple Mobile Navigation Free Download

Stylish accordion menu jquery

What is the difference between jQuery and Angular JS

Simple responsive text slider css jquery

Responsive photo gallery template free download

Rounded our skill css jquery template

Simple bootstrap css jquery photo gallery free download

Simple jquery responsive slider with text

Flat responsive photo gallery using css jquery

PHPKIDA Offering Free Tools:

INSTA DOWNLOADER

Free online tool to download Instagram videos, photos and save Instagram videos, photos to your device. It's free & easy to use.

Download Now

CURRENCY CONVERTER

Our real time currency converter calculator will convert your money based on current values from around the world. It's free & easy to use.

Convert Now

ROBOST.TXT GEN.

Create robots txt file that help search engines to crawling and indexing your site with help of our free online Robots.txt Generator tool.

Create Now

HTML MINIFIER

Free online tool to minify or compress html code and reduce the size of html code in few clicks. It's free & easy to use.

Minify Now

CSS MINIFIER

Free online tool to minify or compress css code and reduce the size of css code in few clicks. It's free & easy to use.

Minify Now

JAVASCRIPT MINIFIER

Free online tool to minify or compress javascript code and reduce the size of javascript code in few clicks. It's free & easy to use.

Minify Now

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.