How to Make a Share Button with Counter

Nilesh    9/09/2020    Blogger Trick   

This time I will provide a tutorial on How to Create a Share Button with the number of shares, or Share Button with Count. Yo, just get to the point

1, Login to your Blogger> Templates> Edit HTML,
make sure your blog already has Fontawesome, usually those using responsive or html5 templates already exist. But, if not, please enter it on your blog

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

2. Add CSS below before </style>

/* CSS Share Button */
.abdurrahim_share_btn{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)}
.abdurrahim_share_btn .share_blog {display:block;}
.abdurrahim_share_btn .share_blog .wrap {text-align:center;margin:0 auto;display:inline-block;min-width:41px;}
.abdurrahim_share_btn .share_blog .wrap1 {display:inline-block;width:31px;float:left;}
.abdurrahim_share_btn .share_blog ul {margin:0;padding:0;}
.abdurrahim_share_btn .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}
.abdurrahim_share_btn .share_blog ul li a,.abdurrahim_share_btn .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;height:100%;display:block;text-decoration:none}
.abdurrahim_share_btn .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)}
.abdurrahim_share_btn .share_blog .btn_fb{background:#3a579a}.abdurrahim_share_btn .share_blog .btn_fb:hover{background:#314a83}.abdurrahim_share_btn .share_blog .btn_twtr{background:#00abf0}.abdurrahim_share_btn .share_blog .btn_twtr:hover{background:#0092cc}.abdurrahim_share_btn .share_blog .btn_gplus{background:#df4a32}.abdurrahim_share_btn .share_blog .btn_gplus:hover{background:#be3f2b}.abdurrahim_share_btn .share_blog .btn_pntrst{background:#cd1c1f}.abdurrahim_share_btn .share_blog .btn_pntrst:hover{background:#ae181a}.abdurrahim_share_btn .share_blog .btn_linkdin{background:#2554BF}.abdurrahim_share_btn .share_blog .btn_linkdin:hover{background:#224EB4}
.abdurrahim_share_btn .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}
.abdurrahim_share_btn .share_blog .share{margin:5px 5px 0 0;overflow:visible;width:95px}
.abdurrahim_share_btn .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}
.abdurrahim_share_btn .share_blog .btn_fb .share-btn,.abdurrahim_share_btn .share_blog .btn_twtr .share-btn,.abdurrahim_share_btn .share_blog .btn_gplus .share-btn,.abdurrahim_share_btn .share_blog .btn_pntrst .share-btn,.abdurrahim_share_btn .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) {
 .abdurrahim_share_btn .share_blog .btn_linkdin {width:34px;}
.abdurrahim_share_btn .share_blog .btn_fb .share-btn,.abdurrahim_share_btn .share_blog .btn_twtr .share-btn,.abdurrahim_share_btn .share_blog .btn_linkdin .share-btn,.abdurrahim_share_btn .share_blog .btn_gplus .share-btn,.abdurrahim_share_btn .share_blog .btn_pntrst .share-btn{display:none}}
 @media only screen and (max-width:768px) {
.abdurrahim_share_btn .share_blog ul li a,.abdurrahim_share_btn .share_blog ul li a:hover{color:#fff;cursor:pointer;line-height:32px;font-size:11px;height:100%;display:block}.abdurrahim_share_btn .share_blog .wrap{min-width:34px}.abdurrahim_share_btn .share_blog .btn_linkdin,.abdurrahim_share_btn .share_blog .btn_pntrst{width:30px}.abdurrahim_share_btn .share_blog ul li{margin:1px 3px}}
 @media only screen and (max-width:479px) {
 .abdurrahim_share_btn .share_blog .share{border:0;margin:0 5px 0 1px;overflow:visible;width:80px}.abdurrahim_share_btn .share_blog ul li{width:25px;margin:2px;}.abdurrahim_share_btn .share_blog .wrap{display:none}.abdurrahim_share_btn .share_blog ul li .fa{width:25px}}

3. Then add the Javascript below before </body>

<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter
  $(document).ready(function(){var t=$("link[rel=canonical]").attr("href");$.getJSON("http://tbncounts-sharecounts.rhcloud.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>

4. and enter the Share script below after <data: post.body />

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='abdurrahim_share_btn'>
<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='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via www.abdurrahim.id - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   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='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   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_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   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>

For the Demos, you can go to this blog,
if you have a problem, please comment below.