Seperti yang terlihat di blog ini kalau default share button kepunyaan blogspot digantikan dengan widget dari Twitter, Google+, dan Facebook. Lalu bagaimana saya mengubah share button tersebut? caranya sangatlah mudah, berikut langkah-langkah cara menggantinya.
Pertama cari kode berikut:
<b:includable id='shareButtons' var='post'>
Kode lengkap yang akan diganti adalah:
<b:includable id='shareButtons' var='post'>
<b:if cond='data:top.showEmailButton'>
<a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'>
<data:top.emailThisMsg/>
</span>
</a>
</b:if>
<b:if cond='data:top.showBlogThisButton'>
<a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'>
<data:top.blogThisMsg/>
</span>
</a>
</b:if>
<b:if cond='data:top.showTwitterButton'>
<a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'>
<data:top.shareToTwitterMsg/>
</span>
</a>
</b:if>
<b:if cond='data:top.showFacebookButton'>
<a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'>
<data:top.shareToFacebookMsg/>
</span>
</a>
</b:if>
<b:if cond='data:top.showOrkutButton'>
<a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'>
<span class='share-button-link-text'>
<data:top.shareToOrkutMsg/>
</span>
</a>
</b:if>
<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container'>
<data:post.dummyTag/>
</div>
</b:if>
</b:includable>
Ganti kode di atas dengan yang di bawah ini:
<b:includable id='shareButtons' var='post'>
<div class='t-wrap' style='display:inline; float:left; width:60px; height:21px; margin-right:6px;'>
<a class='twitter-share-button' data-count='none' expr:href='"http://twitter.com/share?url=" + data:post.canonicalUrl + "&text=" + data:post.title + ""'>
Tweet
</a>
</div>
<div class='g-wrap' style='display:inline; float:left; width:71px; height:21px; margin-right:6px;'>
<div class='g-plus' data-action='share' data-annotation='none' expr:data-href='data:post.canonicalUrl'>
</div>
</div>
<div class='f-wrap' style='display:inline; float:left; width:100px; height:21px;'>
<iframe allowTransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font=lucida+grande&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px;'>
</iframe>
</div>
</b:includable>
Di sini saya menambahkan wrapper yang berupa div, bisa dihilangkan sesuai kebutuhan.
Untuk widget Twitter kita pelu menambahkan script-nya secara manual, dan untuk alasan perfoma saya taruh dibagian akhir html:
<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";js.async=true;fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
Untuk widget Google+, secara default blogspot sudah menyertakan script yang diperlukan, dan untuk Facebook saya menggunakan iframe karena perfoma lebih cepat dibandingkan dengan versi scriptnya.
