Nút chia sẻ mạng xã hội cho Blogspot (Có lượt đếm số lần chia sẻ)

Tạo nút chia sẻ bài viết lên mạng xã hội cho Blogspot thì không còn lạ gì nữa, đa số những template blogspot hiện nay đều có, không thì cũng chỉ cần một lát lên google tìm ra cả một lô bài hướng dẫn cài đặt tiện ích này cho blog của bạn với đủ kiểu dáng và hình thức khác nhau...Bla..Bla...
Sử dụng tiện ích này vào blog sẽ giúp người dùng dễ dàng chia link bài viết lên những trang mạng xã hội hơn, từ đó tăng lượt truy cập cho blog, website.
Bình thường mình cũng chẳng định viết bài này làm gì vì tìm trên google cũng ra một đống, nhưng hôm nay lang thang trên blog của một bạn Indonesia thì thấy bài chia sẻ này, điều khá hay là tiện ích nút chia sẻ lên mạng xã hội cho Blogspot của bạn ấy có thêm tính năng tự động đếm lượt số chia sẻ thông qua API của trang web http://donreach.com/social-share-count vì mình chưa thấy bài nào trên google (hay mình không biết) nên giờ viết bài chia sẻ với mọi người.

Chỉ cần 3 bước đơn giản dưới đây là bạn đã cài đặt thành công tiện ích chia sẻ bài viết lên mạng xã hội cho Blogspot mới này rồi.

Bước 1:

Đăng nhập vào blog và chọn chỉnh sửa template, dán đoạn CSS sau lên trên thẻ ]]></b:skin>

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

Bước 2:

Dán đoạn code sau vào bên trên hoặc dưới thẻ <data:post.body/> hay là thẻ <div class='post-footer'> cũng được, tùy bố cục và mục đích sử dụng của bạn.

HTML
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='phanhung_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='&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 @PhanHungBlog - &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_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' 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-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='&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>

Ở phần chia sẻ lên Twitter bạn thay tên tài khoản của bạn vào nhé!

Bước 3:

Cuối cùng là thêm đoạn Script sao vào trên thẻ </body> rồi lưu template lại.

JS
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Share Button with Counter by PhanHung.Info
$(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>

Như vậy ở trên mình đã chia sẻ bài viết tạo nút share mạng xã hội cho Blogspot phiên bản có lượt đếm, khá nhanh và đơn giản để có một tiện ích khá OK không thua kém gì mấy mã nguồn mở khác như Wordpress đúng không? :))