Membuat Tombol Share Dengan Counter

Share Button Ke Media Sosial

Media sosial adalah tempat orang-orang berkomunikasi, berinteraksi dan juga berbagi. Saat ini media sosial berperan besar pada ketenaran sebuah hal. Media sosial juga berperan pada penyebaran sebuah informasi yang cepat dan efisien.

Banyak orang yang menjadi viral atau terkenal se-indonesia bahkan sedunia akibat media sosial, karena hampir seluruh warga dunia mempunyai akun media sosial sendiri.

Oleh karena itu tombol share adalah fitur yang harus ada pada blog atau situs kalian. karena media sosial punya efek yang baik jika artikel kita viral di media sosial.

Apa saja sih dampak positifnya jika artikel kita viral di media sosial? berikut dampak positifnya.

Dampak Positif

Ada banyak dampak positif yang didapat blog kita jika artikel kalian viral di media sosial. Berikut dampak positifnya.

Meningkatkan Pageview

Semakin banyak orang yang membagikan artikel kita di media sosial, semakin banyak juga orang yang mengunjungi situs kita. ini jelas dapat meningkatkan traffic blog atau situs kalian. traffic yang tinggi adalah dambaan setiap blogger.

Membuat Blog Terkenal

Jika artikel pada blog kita sering dibagikan orang-orang, maka, banyak orang yang akan semakin kenal atau familiar dengan blog kita. blog menjadi terkenal sangatlah penting. Mengingat saat ini ada banyak blog baru dan persaingan pun menjadi sangat ketat.

Meningkatkan Penghasilan

Jika blog kita terkenal di media sosial ini akan meningkatkan penghasilan kita, semakin banyak orang yang berkunjung semakin banyak juga pendapatan dari adsense. Bagi kalian yang sudah punya adsense atau media iklan lainnya.

Share Button With Counter

Nah, kali ini saya ingin membagikan Cara Membuat Tombol Share Dengan Counter, tombol share kali ini sedikit berbeda, tombol share yang satu ini dilengkapi dengan counter.

Jadi, fungsi counter ini adalah menghitung dan menampilkan jumlah share pada suatu artikel. Banyak situs-situs besar yang menggunakan ini, jika kalian ingin menerapkan Tombol Share Dengan Counter ini ke situs/blog kalian, simak tutorial berikut.

Pertama, kalian tambahkan CSS berikut di atas kode ]]></b:skin>.

.share{font-family:sans-serif;font-size:11px;width:100%;text-align:left}.share a span{font-weight:700;display:block;color:#fff;text-align:right}.share a{text-decoration:none;width:60px;padding:0 4px 0 0;line-height:24px;display:inline-block;border-radius:2px;background-size:20px;background-position:center left 2px;background-repeat:no-repeat;box-shadow:0 1px 0 rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.05)}.btnTw{background-color:#1EBEF0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bYShaM1K9EK_7lkUc6hb6pG3HWcXAmA0thb2axXwZ2thi1KUxcW2BfUGq38vzpXFH0Ft6gy6-ZobeSb9gKWY-HHZhzgQHcALiZqHFhCLk-Gt_cyMWhucZvhviZjEzJEpM2lsM6J7l_Q/s1600/twitter.png)}.btnGo{background-color:#E0584B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhebD5BLeE4g0k6GFyQ6wdIZd9jFjX0ouCfYbw5Y7CWkR1E4dbUD_Bagx21iSz9_hVbh_dfWMaPKh4XL1DhZgxLN-gbb2tKIYvmJbwayEA6PZsl_Q6i4sv_Bbn5Ja1wXnrQgqPD8njJ7l4/s1600/google-plus.png)}.btnFb{background-color:#3A5BA1;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPvmJl5W5-NFN9nanAXJ8fXI1LmLq4zl9wGKIfrMiNCeuoDlZpq7kq8B3Mj3b_jJujh07ckfD5DIMovBw2Xc-rSoWgfZown10qhiOpSj74ZpKtvO_-dQ8JuJ3064EjAqk52UxK27hWP8/s1600/facebook.png)}.btnPr{background-color:#C33C2D;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5OzVkayxvLK16A27YibiwsRif-4mIJYv-mznJYDd3w6Yhmc-tzm1xxjG-y1b0JvV2atZ5f7_B9CmBOB4bd22avT3WuuFKQW6dGmVH6Rgn86hvsBKnM172UzzoxG_pm24pmuR2Fi4YmA/s1600/pinterest.png)}.btnLi{background-color:#1983BC;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRx7Xh6X09EB751f97jIbN3uDPw8yQ73dBCS4sGUGcQ_6kPh8O4I69StfkOyQgxYku7h8zOG2GlncXghBwq4N2bsLSydT5-0MZhwucyKzho6tZyLz307bc8DnSZls5Fmi6FENx64ZLyjk/s1600/linkedin.png)}.btnTa{background-color:#FF5848;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbPMSI2qvj94n-dyfSS0c6TmquF1xTvzV_RPmSg9qWV13-VF3Xo9wSO-lewZFyIn4r-WzGaqQDnR2jddrJCiY3sxGbALKvMx4lBTlDA63xCuJmUkNNFrhetB9bOnRlqo0dwljAm97OjoU/s1600/tapike-icon.png);background-size:14px!important}.share a span.buCount{color:#000}

Lalu, tambahkan kode berikut di bawah <data:post.body/>. Jika ada banyak pastikan pilih kode yang ada di tag kondisional post <b:if cond='data:view.isPost'>.

<div class='share'>
<a class='btnFb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Facebook'><span class='fbCount'>0</span></a>
  <a class='btnTw' expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Twitter'><span class='twCount'>0</span></a>
<a class='btnGo' expr:href='"http://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Google+'><span class='goCount'>Share</span></a>
  <a class='btnPr' expr:href='"https://pinterest.com/pin/create/button/?url=" + data:blog.url + "&media=" + data:post.thumbnailUrl + "&description=" + data:blog.metaDescription' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='Pinterest'><span class='prCount'>0</span></a>
  <a class='btnLi' expr:href='"https://www.linkedin.com/shareArticle?mini=true&url=" + data:blog.url + "&title=" + data:post.title + "&summary=" + data:blog.metaDescription' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' title='LinkedIn'><span class='liCount'>0</span></a>
<a href="http://www.tapike.com/2016/03/membuat-custom-tombol-share-counter.html" class="btnTa" title="More"><span class="taCount">More +</span></a>
  </div>

Kemudian, pastekan kode berikut di atas kode </head>.

function custom(t){t+="";for(var e=t.split("."),n=e[0],o=e.length>1?"."+e[1]:"",u=/(\d+)(\d{3})/;u.test(n);)n=n.replace(u,"$1.$2");return n+o}function custom(t){return t>=1e9?(t/1e9).toFixed(1).replace(/\.0$/,"")+"G":t>=1e6?(t/1e6).toFixed(1).replace(/\.0$/,"")+"M":t>=1e3?(t/1e3).toFixed(1).replace(/\.0$/,"")+"K":t}var share,tapike,url;url=document.URL,$.getJSON("//opensharecount.com/count.json?url="+url,function(t){var e=custom(t.count);$(".twCount").text(e)}),$.getJSON("http://graph.facebook.com/"+url,function(t){var e=custom(t.shares);$(".fbCount").text(e)}),$.getJSON("http://api.pinterest.com/v1/urls/count.json?url="+url+"&callback=?",function(t){var e=custom(t.count);$(".prCount").text(e)}),$.getJSON("http://www.linkedin.com/countserv/count/share?url="+url+"&callback=?",function(t){var e=custom(t.count);$(".liCount").text(e)}),share=function(t){return setTimeout(function(){var e,n,o;return e=1*t.attr("data-current-count"),o=1*t.attr("data-target-count"),n=e+Math.ceil((o-e)/2),t.attr("data-current-count",n),t.html(n),o>n?share(t):void 0},100)},tapike=function(t,e,n){return null===e&&(e=null),t.attr("data-target-count",e),t.attr("data-current-count",0),share(t)},$(document).ready(function(){$.getJSON("https://count.donreach.com/?url="+url+"&callback=?",function(t){shares=t.shares,shares.total=t.total,$(".goCount").each(function(t,e){service=$(e).parents(".btnGo").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)})})});

Terakhir, klik simpan tema kalian dan lihat perubahannya.

Demo:

See the Pen Share-button by Andra (@InfoAndra) on CodePen.

Akhir Kata

Oke, sekian tutorial dari saya, yang berjudul Membuat Tombol Share Dengan Counter. Semoga bermanfaat.

Jika kalian punya saran atau pertanyaan, silahkan komen dibawah. Terimakasih.

Infokudia

Search Suggest