Cara Membuat Custom Tombol Share Dengan Counter

Cara Membuat Custom Tombol Share Dengan Counter - Pada kali ini kita akan membuat custom tombol share atau membuat tombol share sendiri lengkap dengan counter. Custom tombol share ini tentu lebih ringan dan cepat loadingnya. Saya menilai bahwa custom tombol share lebih efektif dibandingkan dengan social share button biasa. Ada banyak situs yg membahas mengenai custom tombol share, tapi jarang yg menggunakan counter. Counter ini sendiri adalah nilai seberapa banyak artikel blog dibagikan ke masing-masin sosial media. Bagi yg ingin membuat custom tombol share, simak langkah berikut.

Demo

CSS Custom Tombol Share

• Login ke blogger.
• Kemudian klik template.
• Edit html.
• Pastekan css berikut diatas ]]></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/AVvXsEiXwUgcsIdDREYUe4HbwyllEjp3MVCbBkp6RIOQHJkNC2i9tHFhJ-GLFl1k2Xp4aoQM1p3Y7OuRgSnZG9s38I8vaS8LNMuAWLC4PeR6UJPSUDR0iCZxMce48ufwIKSHmpufuG0LGJVnw3A/s1600/twitter.png)}.btnGo{background-color:#E0584B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje4V0gu8maN6YRfTdO-WBvUCULUi4HCd_5uA714j1oM9wHLsRIqCOgYKgwp-UdL0XJALn-VDLU70VYtPWMv8Iwr2A_1_5FmidKOIpiHkXhPFMvxlEtx_FQ8pzdZ7lPd9b8Os1e5gPEfiQ/s1600/google-plus.png)}.btnFb{background-color:#3A5BA1;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvuN9PSXE6p4yE8nh87isZNFWaaAfflo88QKHIcdpemlblqCeQiZXuvmyyUJ1z9Idwz76S5e08038eaynmKHIGf_8dHqEmFysFoHAf4CtkPQExd0RU29eUdV93BGpX2CpuSC3hs8DEsGo/s1600/facebook.png)}.btnPr{background-color:#C33C2D;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipoAzqk8BZEFk5c-IG7ZvGDiqB6rYVQZhbf9lBf31oFbk8SEGRUFn6veLtykg-lCJGju1ZI5uwqIcKNxGBJ0CkO8qqVH_mtRXdvTTIHOh3ObwUkWQkfQPXvOTqYXHhAb1Yb8juYmAExPI/s1600/pinterest.png)}.btnLi{background-color:#1983BC;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQ7VwJDxJBHZUtd6O6ILMzAhj-N4KPJh4F8ZODrZNHMZ6VdVRYU2vD6FFkjTUGR4ae8B7lT-204NJ7f-iaZeW8WN2FyoMD5dG8yJZHzCh_6o1rGEkt5EVdg0pzG0amVmJR0ghmfc1ZGs/s1600/linkedin.png)}.btnTa{background-color:#FF5848;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfuE_WtDN2kXMwumy1bI27kbhRi7znLBIntuqRBMI-U1rkAHvcm-U9gfviQvw1wMz-NEGwlr4rk-bKShBIOyhQ4fosGBSbEjLLcegfQ2CNxnVEtSyhV-wxjp23c9xUwqUUsSjryYWoG91Z/s1600/tapike-icon.png);background-size:14px!important}.share a span.buCount{color:#000}

HTML Custom Tombol Share

• Login akun blogger.
• Klik template.
• Klik Edit html.
• Pastekan dimana saja Anda inginkan.

<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>

Script Custom Tombol Share Counter

• Masuk ke blogger.
• Lalu klik template.
• Pilih edit html.
• Paste script berikut diatas </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)})})});

Pengaturan

Sayangnya twitter telah menutup API counter mereka, tapi saya telah menemukan API terbaru. Untuk mengaktifkan twitter share counter, Anda hanya perlu mendaftarkan domain situs anda di http://opensharecount.com. Satu akun hanya bisa untuk satu domain dan tidak berlaku untuk domain lain. Satu domain termasuk root domain (contoh: http://tapike.com) dan single URL (contoh: http://tapike.com/2016/03/membuat-custom-tombol-share-counter.html/). Akan butuh waktu 5 menit hingga satu jam untuk menampilkan counter twitter pada custom tombol share melalui API ini dari saat pertama kali pemanggilan. Jika semua counter tidak jalan atau "0" letakkan jquery ini diatas</head>.

<script src="https://code.jquery.com/jquery-2.2.1.min.js" type="text/javascript"></script>

Demikianlah penjelasan saya mengenai cara membuat custom tombol share atau membuat tombol share sendiri lengkap dengan counter. Semoga artikel ini dapat bermanfaat bagi kita semua.