Tombol Share Ke Media Umum Dengan Counter

0
45

Tombol Share Media Sosial Dengan Counter Tombol Share Ke Media Sosial Dengan Counter

Jaman sekarang, media umum nggak dapat dipandang sepele. Bukan sekedar kawasan berkomunikasi dengan orang-orang, tapi lebih dari itu. Dia menjadi media penyebaran isu yang cukup cepat dan efisien. Sering banget satu hal menjadi viral dan populer se-Indonesia (bahkan sedunia) berkat banyaknya orang yang membagikan topik tersebut di media sosialnya. Memang apasih efek bagusnya jika 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, ialah tool untuk mengetahui berapa jumlah share blog atau artikel di banyak sekali media sosial. Hanya saja disana perlu menuliskan URL dulu.

Nah kali ini saya mau bagikan yang gres lagi nih. Standar sih sebenernya, cuma tombol share ke media umum ibarat Facebook, Twitter, Google Plus, Pinterest, Linkedin, Tumblr, dan Stumbleupon. Bedanya, yang ini disertai jumlah sharenya juga. Tombol share ke media umum dengan counter ini banyak digunakan sama media-media besar. So, blog kau 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 teladan kali ini, tombol share social dengan counter akan disimpan dibawah artikel. Tapi nanti kau dapat sesuaikan sendiri posisinya dimana. Harap diingat, Twitter dan Google Plus nggak lagi mengeluarkan API untuk share counter. Makara nggak bakal ada angkanya. Sayang sekali ya.

Masuk dulu ke akun Blogger » Theme » Edit HTML.

1. CSS

Tambahkan isyarat CSS berikut SEBELUM / DI ATAS ]]></b:skin> (biasanya template usang masih pakai tag ini). Atau dapat juga SESUDAH / DI BAWAH <style>. Kalau isyarat <style>-nya ada banyak, Pastikan pilih isyarat 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 isyarat <data:post.body/>. Kodenya ada banyak? Lagi-lagi, pastikan pilih isyarat 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 isyarat 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 kau 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 isyarat 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 umum akan muncul di bawah artikel dan counter atau jumlah share ada di sampingnya.

Segitu dulu ya, mudah-mudahan bermanfaat. Semoga sukses membuat tombol membuatkan ke media umum dengan jumlah share diatas. Budayakan komentar jika sudah membaca.