Add Social Bookmarking Share Button

Social bookmarking media is one of space where you can make your widely networking and share your opinion, article or "whatever" else. Tweeter, Facebook, Digg, Delicious, and Technorati are among the most popular of social bookmarking media right now. In most of blogs or websites using those kind of button, you will find "Tweet this", "Share on Facebook", "Subcribe to Feed", "Bookmark this to del.icio.us", or "Add to Technorati" to share the post to their visitor.

To do this from your site/blog, easily you can add "share button" on to your each post. It will attract your blog visitor and make them easier to share your posts on his/her own media.

I will share to add those button by modify HTML template in Blogger, although actually several third party also provide those kind of widget that can be installed instantly.

All you need to do is:
1) Construct or just copy paste below script on your text editor. You can choose all or only script you want to add to your post.

<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + data:post.url' target='_blank' title='Tweet it on Twitter'><img src='YourImage-URLaddress'/></a> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' title='Share on Facebook'><img src='YourImage-URLaddress'/></a> <a expr:href='"http://feeds.feedburner.com/gibboy"' title='Subcribe to Feed'><img src='YourImage-URLaddress'/></a> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' title='Bookmark This to del.icio.us'><img src='YourImage-URLaddress'/></a> <a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' title='add to technorati'><img src='YourImage-URLaddress'/></a>

2) Get the respective icon from internet and upload to your image hosting website (Photobucket, Picasa Web Album, ImageShack, TinyPic, VillagePhotos, etc). Note and copy the image URL address from each icon you want to add to your post. You will put these image URL address to replace "YourImage-URLaddress" at above script.

3) Log in into your Blogger-Dashboard-Layout-Edit HTML


4) Check on "expand widget template" and backup your template. This will avoid you from loosing any widget or template problem if your modification failed.

5) Scroll down and find below code: <div class='post-footer'> .. </div>

or similar code. Within this space, you will place your share button script above immediately after the "post-footer" code. Basically, you can put your  "share button" in anywhere you want. Still in post footer,  you can also put those button within below code, immediately after 'post-footer-line post-footer-line-..' line:

<div class='post-footer-line post-footer-line-1'>.. </div> or <div class='post-footer-line post-footer-line-2'>.. </div> or <div class='post-footer-line post-footer-line-3'>.. </div>

You can make your own experiment to see what the difference is.

6) Save your template
7) Preview your post page and you will see the share button exist on each of your post footer.