Cara buat Tombol Share Ke Media Sosial Dengan Counter

Ngab ID
November 27, 2020


 Saat ini, media sosial tidak dapat dianggap sepele. Bukan hanya tempat untuk berkomunikasi dengan orang-orang, tetapi lebih dari itu. Dia menjadi media untuk menyebarluaskan informasi yang cukup cepat dan efisien. Seringkali satu hal untuk menjadi viral dan terkenal di Indonesia (bahkan dunia) berkat jumlah orang yang berbagi topik pada media sosial mereka. Apa efek yang baik jika blog atau artikel kami viral di media sosial?


  1.     Tampilan halaman naik.
  2.     Alexa Ranking Down.
  3.     Pendapatan meningkat.
  4.     Blog semakin terkenal.
  5.     Dll.




Nah kali ini saya ingin berbagi yang baru lagi. Standar sebenarnya, hanya tombol berbagi untuk media sosial seperti Facebook, Twitter, Google Plus, Pinterest, LinkedIn, Tumblr, dan StumbleUpon. Perbedaannya adalah, yang disertai dengan jumlah saham juga. Tombol Bagikan ke media sosial dengan penghitung ini digunakan dengan media besar. Jadi, blog Anda akan keren dan Kece jika Anda menginstal tombol ini. Igniel.com juga menggunakannya dari sebelumnya.

Cara Memasang Social Share Button With Counter Di Blog

Dalam contoh ini, tombol berbagi sosial dengan penghitung akan disimpan di bawah artikel. Tetapi kemudian Anda dapat menyesuaikan di mana posisi itu. Harap diingat, Twitter dan Google Plus tidak lagi mengeluarkan api untuk penghitung berbagi. Jadi tidak akan ada angka. Sangat buruk.

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=600,width=600&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 untuk menyimpan semua pengaturan dengan mengklik tombol Simpan Tema. Kemudian tombol Bagikan ke media sosial akan muncul di bawah artikel dan penghitung atau jumlah saham ada di sampingnya.

Itu sebelumnya, semoga bermanfaat. Semoga berhasil membuat kunci berbagi ke media sosial dengan jumlah saham di atas. Menumbuhkan komentar jika Anda membaca.