Membuat Tombol Share atau Share Button sebenarnya cukup mudah bila kita mau belajar dan mencobanya. Saya sendiri baru mencoba memasangnya ke dalam blog saya ini, Anda bisa melihat sendiri penampakannya (jika belum dirubah). Bila Anda tertarik, Berikut akan saya bagikan cara memasang tombol share sosial media yang sudah saya coba.
Anda tidak perlu jago koding, bahkan tidak tahu yang namanya koding juga tidak masalah. Seperti saya yang belum pernah sama sekali berkenalan dengan koding jugga bisa memasang tombol share button ke dalam blog. Berikut caranya :
1. Silakan Anda login Blogger, pilih Template >> Esit HTML
Salin dan tempelkan kode dibawah ini diatas kode ]]></b:skin>
/* social share buttons */
.social-buttons-box {height: 67px;margin:20px 0 15px;overflow:hidden;}
.social-buttons {margin:0 0;height:67px;float:left;}
.social-buttons .share {float:left;margin-right:10px;display:inline-block;}
.share-btn {margin:15px 0 25px;height:20px;overflow:hidden;}
Selanjutnya silakan copy kode berikut ini, lalu tempelkan di bawah kode : <data:post.body/> atau bisa juga <div class='post-footer'>
<div class='social-buttons-box'>
<div class='social-buttons'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
<div class='share linkedin'><script src='//platform.linkedin.com/in.js' type='text-javascript'> lang:en_US</script><script data-counter='top' expr:data-url='data:post.url' type='IN/Share'/></div>
</div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div style='clear: both;'/>
Langkah selanjutnya kita tinggal memasang kode script dibawah ini dan diletakan diatas kode </body>. Berikut kodenya :
<script>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Langkah terakhir 'simpan'.
2. Silakan cek tampilan blog Anda, coba lihat apakah tombol share button sudah menampakkan dirinya, kalau sudah berarti Anda sudah berhasil membuat tombol share button. Silakan baca juga cara memasang script 'google tag manager'.
Semoga bermanfaat.
