Home / Blogger / CSS / Javascript

Tombol Share Ke Media Sosial Dengan Counter


Tombol Share Media Sosial Dengan Counter

Jaman sekarang, media sosial nggak bisa dipandang sepele. Bukan sekedar tempat berkomunikasi dengan orang-orang, tapi lebih dari itu. Dia menjadi media penyebaran informasi yang cukup cepat dan efisien. Sering banget satu hal menjadi viral dan terkenal se-Indonesia (bahkan sedunia) berkat banyaknya orang yang membagikan topik tersebut di media sosialnya. Memang apasih efek bagusnya kalau blog atau artikel kita viral di media sosial?

  1. Pageview naik.

  2. Ranking Alexa turun.

  3. Penghasilan bertambah.

  4. Blog semakin terkenal.

  5. Dan sebagainya.

Dulu saya pernah share tool gratis social signal checker, yaitu tool untuk mengetahui berapa jumlah share blog atau artikel di berbagai media sosial. Hanya saja disana perlu menuliskan URL dulu.

Nah kali ini saya mau bagikan yang baru lagi nih. Standar sih sebenernya, cuma tombol share ke media sosial seperti Facebook, Twitter, Google Plus, Pinterest, Linkedin, Tumblr, dan Stumbleupon. Bedanya, yang ini disertai jumlah sharenya juga. Tombol share ke media sosial dengan counter ini banyak dipakai sama media-media besar. So, blog kamu bakal tambah keren dan kece abis kalo pasang tombol ini. igniel.com pun udah pakai dari dulu.

Cara Memasang Social Share Button With Counter Di Blog

Pada contoh kali ini, tombol share social dengan counter akan disimpan dibawah artikel. Tapi nanti kamu bisa sesuaikan sendiri posisinya dimana. Harap diingat, Twitter dan Google Plus nggak lagi mengeluarkan API untuk share counter. Jadi nggak bakal ada angkanya. Sayang sekali ya.

Masuk dulu ke akun Blogger » Theme » Edit HTML.

1. CSS

Tambahkan kode CSS berikut SEBELUM / DI ATAS ]]></b:skin> (biasanya template lama masih pakai tag ini). Atau bisa juga SESUDAH / DI BAWAH <style>. Kalau kode <style>-nya ada banyak, Pastikan pilih kode yang ada di DI DALAM tag kondisional post <b:if cond='data:view.isPost'> atau <b:if cond='data:blog.pageType == &quot;item&quot;'>.
/* Share Button Dengan Counter by IGNIEL.COM */
.igniel-share-button .igniel-share svg {width:25px;height:25px; vertical-align:-8px; text-align:left}
.igniel-share-button .igniel-share svg path {fill:#fff}
.igniel-share-button {display:block; margin-top:20px;line-height:0px; background:transparent; width:100%; max-width:738px; padding:20px 0; border-top:2px solid #dddfe2}
.igniel-share-button .igniel-share {display: block;} .igniel-share-button .igniel-share .wrap {text-align: center; margin: 0 auto; display: none; min-width: 40px;} .igniel-share-button .igniel-share .wrap1 {float:left; display: inline-block; width:50%; text-align:center}  .igniel-share-button .igniel-share ul {margin:0px; padding:0px;}
.igniel-share-button .igniel-share ul li {width:12.4%; margin-left:3px; line-height: 35px; list-style: none; list-style-type: none; padding:0px; display:inline-block; font-size: 12px; text-align:center; color: #fff; border: 1px solid rgba(0,0,0,0.04); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.igniel-share-button .igniel-share ul li a, .igniel-share-button .igniel-share ul li a:hover {color: #FFF !important; cursor: pointer; text-decoration: none;}
.igniel-share-button .igniel-share .btn_fb {background: #3a579a;} .igniel-share-button .igniel-share .btn_fb:hover { background: #314a83; }
.igniel-share-button .igniel-share .btn_twtr {background: #00abf0} .igniel-share-button .igniel-share .btn_twtr:hover { background: #0092cc; }
.igniel-share-button .igniel-share .btn_gplus {background: #df4a32;} .igniel-share-button .igniel-share .btn_gplus:hover { background: #be3f2b; }
.igniel-share-button .igniel-share .btn_pntrst {background: #cd1c1f;} .igniel-share-button .igniel-share .btn_pntrst:hover { background: #ae181a; }
.igniel-share-button .igniel-share .btn_linkedin {background: #2554BF;} .igniel-share-button .igniel-share .btn_linkedin:hover {
background: #224EB4; }
.igniel-share-button .igniel-share .btn_stumbleupon {background: #EB4823} .igniel-share-button .igniel-share .btn_stumbleupon:hover {
background: #d23614; }
.igniel-share-button .igniel-share .btn_tumblr {background: #314358} .igniel-share-button .igniel-share .btn_tumblr:hover {
background: #2e3f52; }
.igniel-share-button .igniel-share .share {width:auto; height:auto; line-height:0px; margin-bottom
:20px; margin-right:5px; border:0px}
.igniel-share-button .igniel-share .share .count.h4 {font-size:18px; font-weight:bold; font-family:Arial,sans-serif; text-align:center; color:#cc0000; margin:0px; padding:0px; position: relative; top:-17px}
.igniel-share-button .igniel-share .share .count.h4:after {font-weight:bold; font-size:11px; color:#008c5f; content:'SHARE'; display:block; position:relative; bottom:-18px}
.igniel-share-button .igniel-share .btn_fb .share-btn, .igniel-share-button .igniel-share .btn_twtr .share-btn, .igniel-share-button .igniel-share .btn_gplus .share-btn, .igniel-share-button .igniel-share .btn_pntrst .share-btn, .igniel-share-button .igniel-share .btn_linkedin .share-btn, .igniel-share-button .igniel-share .btn_stumbleupon .share-btn, .igniel-share-button .igniel-share .btn_tumblr .share-btn {display:block; overflow: hidden; width:50%; text-align:center; background-color: rgba(0,0,0,0.13); white-space:nowrap}
@media only screen and (max-width:1024px){.igniel-share-button .igniel-share ul li {width:11%}}
@media screen and (max-width:480px) {.igniel-share-button .igniel-share ul li{width:10%} .igniel-share-button .igniel-share .btn_fb .share-btn, .igniel-share-button .igniel-share .btn_twtr .share-btn, .igniel-share-button .igniel-share .btn_gplus .share-btn, .igniel-share-button .igniel-share .btn_pntrst .share-btn, .igniel-share-button .igniel-share .btn_linkedin .share-btn, .igniel-share-button .igniel-share .btn_stumbleupon .share-btn, .igniel-share-button .igniel-share .btn_tumblr .share-btn {display:none} 
.igniel-share-button .igniel-share .wrap1{width:100%}
.igniel-share-button .igniel-share .share{top:-5px; margin-right:0px}}
@media screen and (max-width:320px) {.igniel-share-button .igniel-share ul li{width:9%}}

2. HTML

Cari kode <data:post.body/>. Kodenya ada banyak? Lagi-lagi, pastikan pilih kode yang ada di DI DALAM tag kondisional post <b:if cond='data:view.isPost'> atau <b:if cond='data:blog.pageType == &quot;item&quot;'>. Lalu tambahkan kode HTML berikut SESUDAH / DI BAWAH <data:post.body/>.
<!-- Share Button Dengan Counter by IGNIEL.COM -->
<div class='igniel-share-button'><div class='igniel-share'>
  <ul>
    <li class='share'>
      <div class='share-btn' data-service='total'>
        <div class='count h4'/>
      </div>
    </li>
    <li class='btn_fb'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.facebook.com/sharer/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='Share to Facebook'>
        <div class='wrap1'><svg viewbox='0 0 24 24'><path d='M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z'/></svg>
        </div>
        <div class='share-btn' data-service='facebook'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_twtr'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot; (by: @igniel) &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow' title='Share to Twitter'>
        <div class='wrap1'><svg viewbox='0 0 24 24'> <path d='M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z'/></svg>
        </div>
        <div class='share-btn' data-service='twitter'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_gplus'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=0,width=0&quot;   );   return false;   ' rel='nofollow' title='Share to Google Plus'>
        <div class='wrap1'><svg viewbox='0 0 24 24'> <path d='M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z'/></svg>
        </div>
        <div class='share-btn' data-service='gplus'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_pntrst'>
      <a data-pin-config='beside' expr:data-img='data:post.thumbnailUrl' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &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' title='Share to Pinterest'>
        <div class='wrap1'><svg viewBox='0 0 24 24'><path d='M13.25,17.25C12.25,17.25 11.29,16.82 10.6,16.1L9.41,20.1L9.33,20.36L9.29,20.34C9.04,20.75 8.61,21 8.12,21C7.37,21 6.75,20.38 6.75,19.62C6.75,19.56 6.76,19.5 6.77,19.44L6.75,19.43L6.81,19.21L9.12,12.26C9.12,12.26 8.87,11.5 8.87,10.42C8.87,8.27 10.03,7.62 10.95,7.62C11.88,7.62 12.73,7.95 12.73,9.26C12.73,10.94 11.61,11.8 11.61,13C11.61,13.94 12.37,14.69 13.29,14.69C16.21,14.69 17.25,12.5 17.25,10.44C17.25,7.71 14.89,5.5 12,5.5C9.1,5.5 6.75,7.71 6.75,10.44C6.75,11.28 7,12.12 7.43,12.85C7.54,13.05 7.6,13.27 7.6,13.5A1.25,1.25 0 0,1 6.35,14.75C5.91,14.75 5.5,14.5 5.27,14.13C4.6,13 4.25,11.73 4.25,10.44C4.25,6.33 7.73,3 12,3C16.27,3 19.75,6.33 19.75,10.44C19.75,13.72 17.71,17.25 13.25,17.25Z'/></svg>
        </div>
        <div class='share-btn' data-service='pinterest'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_linkedin'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&quot; + data:post.snippet' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Linkedin'>
        <div class='wrap1'><svg viewBox='0 0 24 24'><path d='M21,21H17V14.25C17,13.19 15.81,12.31 14.75,12.31C13.69,12.31 13,13.19 13,14.25V21H9V9H13V11C13.66,9.93 15.36,9.24 16.5,9.24C19,9.24 21,11.28 21,13.75V21M7,21H3V9H7V21M5,3A2,2 0 0,1 7,5A2,2 0 0,1 5,7A2,2 0 0,1 3,5A2,2 0 0,1 5,3Z'/></svg>
        </div>
        <div class='share-btn' data-service='linkedin'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_tumblr'>
      <a data-notes='right' expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.tumblr.com/share/link?url=&quot; + data:post.url' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=626,height=500&quot;);   return false;' rel='nofollow' title='Share to Tumblr'>
        <div class='wrap1'><svg viewBox='0 0 512 512'><path d='M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2 -6 11.9-13.9 22-23.9 30.5 -9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5 12.5 4.1 26.8 6.1 43 6.1 14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5 -10.1 0-19.1-2.4-27-7.1 -5.9-3.5-10-8.2-12.2-14 -2.2-5.8-3.3-19.1-3.3-39.7v-91.1H345.5v-55.8h-84.4v-90H210.8z'/></svg>
        </div>
        <div class='share-btn' data-service='tumblr'>
          <div class='count'/></div>
      </a>
    </li>
    <li class='btn_stumbleupon'>
      <a expr:data-text='data:post.title' expr:data-url='data:post.url' expr:href='&quot;https://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;toolbar=0,status=0,width=680,height=500&quot;);   return false;' rel='nofollow' title='Share to Stumbleupon'>
        <div class='wrap1'><svg viewBox='0 0 512 512'><path d='M274.5 216.4l23.1 12.8 36.5-12.3v-24.7c0-42.7-35.7-75.9-78.1-75.9 -42.3 0-78.1 31.1-78.1 75.4 0 44.4 0 113.1 0 113.1 0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-47.9H80.9c0 0 0 48 0 48.6 0 43.2 35 78.3 78.3 78.3 42.9 0 77.7-34.4 78.3-77.2v-111.7c0-10.2 8.3-18.5 18.5-18.5 10.2 0 18.5 8.3 18.5 18.5L274.5 216.4 274.5 216.4zM371.2 256.9v50.2c0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-49.2l-36.5 12.4 -23.1-12.8v48.8c0.4 42.9 35.3 77.6 78.3 77.6 43.2 0 78.3-35 78.3-78.3 0-0.6 0-48.6 0-48.6L371.2 256.9 371.2 256.9z'/></svg>
        </div>
        <div class='share-btn' data-service='stumbleupon'>
          <div class='count'/></div>
      </a>
    </li>
  </ul>
  </div></div>
<div class='clear'/>

Ganti @igniel dengan username Twitter kamu.


3. Javascript

Terakhir, pastikan blog kamu sudah memasang script jQuery. Kalau sudah ada jangan dipasang lagi. Kalau belum, tambahkan script berikut SEBELUM / DI ATAS </head>.
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

Lanjut. Simpan kode buatan igniel.com berikut SEBELUM / DI ATAS </body>.
<b:if cond='data:view.isPost'>
<script> //<![CDATA[
// Share Button Dengan Counter by IGNIEL.COM
$(document).ready(function(){
 ignielShareCounter = 'https://source.igniel.com/sharecounter';
 eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c])}}return p}('K a=["\J\M\G\F","\D\k\j\e","\x\h\b\C","\d\c\c\h","\n\g\e\o\u\h\b\n\s\i\d\e\j\e\g\i\d\n\t","\C\d\i\b\A\j\j\o","\g\E\e\g\b\n\G\x\d\h\b","\x\c\z\n","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\C\d\i\b\A\j\j\o\m\t\f\w\f\p\i\j\l\e\c","\F\I\b\b\c","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\c\I\g\c\c\b\h\m\t\f\w\f\p\i\j\l\e\c","\B\g\e\c\b\h\b\k\c","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\B\g\e\c\b\h\b\k\c\m\t\f\w\f\p\i\j\l\e\c","\n\g\e\o\b\r\g\e","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\n\g\e\o\b\r\g\e\m\t\f\w\f\p\i\j\l\e\c","\c\l\z\A\n\h","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\c\l\z\A\n\h\m\t\f\w\f\p\i\j\l\e\c","\G\x\d\h\b","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\E\B\n\l\k\m\t\f\w\f\p\i\j\l\e\c","\k\c\l\z\A\n\b\l\B\j\e","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\k\c\l\z\A\n\b\l\B\j\e\m\t\f\w\f\p\i\j\l\e\c","\u\r\d\c\d\v\k\b\h\y\g\i\b\s\m\c\j\c\d\n\m\t\f\w\f\p\i\j\l\e\c\p\x\O","\F\b\h\D\d\r\g\f\o\b\k\d\n\d\x\d\e\p\f\N\b\o\f\o\j\e\b\o\k\g\f\g\e\c\b\h\e\b\c\f\d\c\d\l\f\h\b\C\h\b\k\x\f\x\d\n\d\z\d\e\L\f\o\d\o\p","\n\j\E","\d\D\d\P"];$[a[1b]]({1a:Y,1d:a[0],Z:a[1],R:{Q:$(a[4])[a[3]](a[2])},T:H(q){$(a[8])[a[7]](q[a[6]][a[5]]);$(a[10])[a[7]](a[9]);$(a[12])[a[7]](q[a[6]][a[11]]);$(a[14])[a[7]](q[a[6]][a[13]]);$(a[16])[a[7]](q[a[6]][a[15]]);$(a[18])[a[7]](a[17]);$(a[S])[a[7]](q[a[6]][a[19]]);$(a[U])[a[7]](q[a[6]][a[5]]+q[a[6]][a[11]]+q[a[6]][a[13]]+q[a[6]][a[15]]+q[a[6]][a[19]])},X:H(){W[a[1c]](a[V])}})',62,76,'||||||||||_0xe266|x65|x74|x61|x6E|x20|x69|x72|x63|x6F|x73|x75|x22|x6C|x6B|x2E|_0x1c15x1|x64|x3D|x5D|x5B|x2D|x3E|x68|x76|x6D|x62|x70|x66|x6A|x67|x54|x53|function|x77|x50|var|x2C|x4F|x43|x34|x78|id|data|20|success|21|22|console|error|ignielShareCounter|dataType|||||||||||url|24|23|type'.split('|'),0,{}));
});
//]]> </script>
</b:if>

Jangan lupa simpan semua pengaturan dengan klik tombol Save theme. Maka tombol bagikan ke media sosial akan muncul di bawah artikel dan counter atau jumlah share ada di sampingnya.

Segitu dulu ya, mudah-mudahan bermanfaat. Semoga sukses membuat tombol berbagi ke media sosial dengan jumlah share diatas. Budayakan komentar kalau sudah membaca.