Add Responsive Social Sharing Button With Counter

How to add a stylish and responsive social sharing widget with count function - If you are an Indian blogger then you know that the importance of the month of October. This is the month of joy and happiness because our god Durga comes in this month. Okay, it is not enough to explain everything but now I'm going to move to the main topic. In my previous article I already shared some social widgets, however today I'm going to share with you a new and stylish widget for your blog, called "social share button".

This social sharing widget is awesome and responsive, it will fitting in every device or smartphone according to their size. One more thing the facility of this sharing button is not end here because its comes with counter plugin.

Yes, when your visitors share your content then you will be able to see the number of shares. Okay, if you like this widget and want to install it in your own blog, then my suggestion to you is that before adding this first take a look of this widget by clicking on the below demo button.

Demo

Now follow the below simple steps if you want to add this social sharing widget in your blog.

Add Responsive Social Sharing Button In Blogger

Go to your blogger dashboard - Login
Now go to "Template" and then click on "Edit html" button.
After that, Copy and paste the below code just before </head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Now find the below code by pressing "Ctrl + f " key from you keyboard.

]]></b:skin>

After that, copy and paste the below CSS code just before ]]></b:skin>

/* Responsive Share Button with Counter plugin Blogger by http://Askwithloud.com */
.askwithloud_share_button{position:relative;z-index:2;width:100%;padding:20px 0;display:inline-block;margin:20px auto;border-bottom:2px solid rgba(0,0,0,.08)}
.askwithloud_share_button .share_blog {display:block;}
.askwithloud_share_button .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.askwithloud_share_button .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.askwithloud_share_button .share_blog ul {margin:0;padding:0;}
.askwithloud_share_button .share_blog ul li{list-style:none;list-style-type:none;padding:0;margin:2px;float:left;width:16%;max-width:115px;display:inline-block;font-size:13px;overflow:hidden;text-align:left;height:32px;line-height:32px;color:#fff;border-radius:3px;transition:all .4s}
.askwithloud_share_button .share_blog ul li a,.askwithloud_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.askwithloud_share_button .share_blog ul li .fa{color:#fff;font-size:16px;font-weight:normal;font-family:FontAwesome;display:inline-block;text-align:center;padding:0;height:32px;line-height:inherit;width:30px;background-color:rgba(0,0,0,.05)}
.askwithloud_share_button .share_blog .btn_fb{background:#3a579a}.askwithloud_share_button .share_blog .btn_fb:hover{background:#314a83}.askwithloud_share_button .share_blog .btn_twtr{background:#00abf0}.askwithloud_share_button .share_blog .btn_twtr:hover{background:#0092cc}.askwithloud_share_button .share_blog .btn_gplus{background:#df4a32}.askwithloud_share_button .share_blog .btn_gplus:hover{background:#be3f2b}.askwithloud_share_button .share_blog .btn_pntrst{background:#cd1c1f}.askwithloud_share_button .share_blog .btn_pntrst:hover{background:#ae181a}.askwithloud_share_button .share_blog .btn_linkdin{background:#2554BF}.askwithloud_share_button .share_blog .btn_linkdin:hover{background:#224EB4}
.askwithloud_share_button .share_blog .share.h6{font-size:10px;font-weight:700;text-align:center;color:#999;border-top:1px solid #e3e3e3;padding:8px 0 0;margin:8px auto 0;line-height:8px;width:42px;letter-spacing:.5px}
.askwithloud_share_button .share_blog .share{margin:0px 18px 0 0;overflow:visible;width:43px}
.askwithloud_share_button .share_blog .share .count.h4{font-size:22px;font-weight:700;text-align:center;color:#ff8349;line-height:16px;margin:-8px 0 0;min-height:15px}
.askwithloud_share_button .share_blog .btn_fb .share-btn,.askwithloud_share_button .share_blog .btn_twtr .share-btn,.askwithloud_share_button .share_blog .btn_gplus .share-btn,.askwithloud_share_button .share_blog .btn_pntrst .share-btn,.askwithloud_share_button .share_blog .btn_linkdin .share-btn{position:relative;color:#fff;display:inline-block;text-align:center;font-weight:700;font-size:11px;float:right;min-width:12px;padding:0 8px 0 0}
 @media only screen and (max-width: 979px) {
 .askwithloud_share_button .share_blog .btn_linkdin {width:34px;}
.askwithloud_share_button .share_blog .btn_fb .share-btn,.askwithloud_share_button  .share_blog .btn_twtr .share-btn,.askwithloud_share_button .share_blog .btn_linkdin .share-btn,.askwithloud_share_button .share_blog .btn_gplus .share-btn,.askwithloud_share_button .share_blog .btn_pntrst .share-btn{display:none}}
 @media only screen and (max-width:768px) {
.askwithloud_share_button .share_blog ul li a,.askwithloud_share_button .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.askwithloud_share_button .share_blog .wrap{min-width:34px}.askwithloud_share_button .share_blog .btn_linkdin,.askwithloud_share_button .share_blog .btn_pntrst{width:30px}.askwithloud_share_button .share_blog ul li{margin:1px 3px}}
 @media only screen and (max-width:479px) {
 .askwithloud_share_button .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.askwithloud_share_button .share_blog ul li{width:25px;margin:2px;}.askwithloud_share_button .share_blog .wrap{display:none}.askwithloud_share_button .share_blog ul li .fa{width:25px}}

Again copy the below jQuery script and paste it just before </body>.

<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by Askwithloud.com
$(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://sharecount.twistblogger.com/?url="+encodeURIComponent(t)+"&callback=?",function(t){shares=t.shares,$(".count").each(function(t,e){service=$(e).parents(".share-btn").attr("data-service"),count=shares[service],count>1e3&&(count=(count/1e3).toFixed(1),count>1e3?count=(count/1e3).toFixed(1)+"M":count+="k"),$(e).html(count)})})});
//]]>
</script>
</b:if>

Now copy the below HTML code and paste it in your template where you want to show this widget.

<b:if cond='data:blog.pageType == "item"'>
<div class='askwithloud_share_button'>
<div class='share_blog'>
<ul>
<li class='share'>
<div class='share-btn' data-service='total'>
<div class='count h4'/>
<div class='share h6'>SHARES</div>
</div>
</li>
  <li class='btn_fb'><a expr:href='"   http://www.facebook.com/share.php?v=4&   src=bm&   u=" + data:post.url + "   &   t=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow'>
<div class='wrap1'><i class='fa fa-facebook'/> </div>
  <div class='wrap'>Share</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + " via @Askwithloud - "' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=436"   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-twitter'/></div>
  <div class='wrap'>Tweet</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='javascript:window.open(this.href,"   "   ,"   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600"   );   return false;   ' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-google-plus'/></div>
  <div class='wrap'>Share</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='"   http://pinterest.com/pin/create/button/?url=" + data:post.url + "   &media=" + data:blog.postImageUrl + "&description=" + data:post.title' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-pinterest'/></div>
  <div class='wrap'>Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_linkdin'><a expr:href='"   http://www.linkedin.com/shareArticle?mini=true&   url=" + data:post.url + "   &   title=" + data:post.title + "   &   summary=&   source="   ' onclick='window.open(this.href,"   sharer"   ,"   toolbar=0,status=0,width=626,height=500"   );   return false;' rel='nofollow'>
  <div class='wrap1'><i class='fa fa-linkedin'/></div>
  <div class='wrap'>Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
</li>
</ul>
</div>
</div>
</b:if>

After that click on the orange save template button to apply the changes.

That's it! I hope you like this widget! Stay tuned for more cool widgets! Thanks for reading @Prince

Share this

Tweet

Share

Share

Share

Share

RELATED ARTICLES