want.more.games

Wednesday, July 9, 2008

How to add Social Bookmarking buttons for your posts in blogger?

What is Social Bookmarking
Social bookmarking is a method for Internet users to store, organize, search, and manage bookmarks of web pages on the Internet with the help of metadata.
Reference: http://en.wikipedia.org/wiki/Social_bookmarking

Know the site...
In adding social bookmarking links to your posts, you must know what are the format of the URL for each social bookmarking site.

Here are some URL formats that my blog use: (Blogger format)

Digg:
http://digg.com/submit?url=URL&title=TITLE&bodytext=DESCRIPTION&media=MEDIA&topic=TOPIC
[more info]

StumbleUpon:
http://www.stumbleupon.com/submit?url=URL&title=TITLE
[more info]

Mixx:
http://www.mixx.com/submit?page_url=URL
[more info]

del.icio.us:
http://del.icio.us/post?url=URL&title=TITLE

Pownce:
http://pownce.com/send/link/?url=URL&note_body=TITLE
[more info]


Get some icons...
To make your button to be seen easily, you need an icon that is eye catching and blends in your site or blog.

AOD Design - http://www.aoddesign.com/blog/
Note: You can get default icons to each site.

The Code
It's simple, just create an anchor tag with an image tag inside.

<a href="[link here]" target="_blank"><img src="[image url here]" border="0" /></a>

The format of the href attribute inside the <a> tag only differs, the format must be:
expr:href=''

Inside the href attribute goes the Social Bookmarking site URL enclosed in double quotes.
expr:href=' "http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title '

Replace the URL with data:post.url and the TITLE with data:post.title.

How to integrate:
  1. Login to you Blogger.com account.
  2. In your Dashboard, click on the Layout link for the blog you want to edit.
  3. Click on Edit HTML, under Layout page.
  4. Check on the "Expand Widget Templates".
  5. Scroll down and find the line containing this text, "<data:post.body>".
  6. Paste the code before or after it, just inside the paragraph tag "<p></p>".
  7. Click on "SAVE TEMPLATE".


Sample Code
<p>
<data:post.body/>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&amp;title=" + data:post.title' target='_blank' title='Stumble Upon'>
<img align='right' alt='Stumble Upon' hspace='2' src='http://cdn.stumble-upon.com/images/32x32_su_round.gif' style='padding: 0; border: none;'/></a>
</p>

Stumble Upon Digg! Add to Mixx! Submit to del.icio.us Pownce it!