Mengganti default share button di blogspot

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.