Get socially bookmarked! (blogger beta)

See the image links to the social book marking sites under each of my post footers?

Working on Ramani’s original post regarding adding hotlinks to Del.icio.us and digit!. I learnt how to rearrange the stuff that appears under each post using the widget code in the template and also added images instead of plain text links for hot linking purpose. Thanks to one Cal Evans I was able to get all the images in one place from the plug-in file on this page. All I had to do was some coding. I must tell you that I am not a programmer or some thing and know very little about coding. But ever since Ramani modified beta blogger templates into 3-column templates I think I have moved from knowledge to knowledge while exploring its code. Thanks to him for that.

While the tags for Del.icio.us and diggit! were with me from Ramani’s blog, I was lucky to stumble upon this site. It has additional hotlinks and I got the “submit” URL from there. Here is how the code goes:

http://www.furl.net/storeIt.jsp?u=http://www.broobles.com/blog/posts/46&t=Furl+vs.+Spurl

becomes (based on the syntax from Ramani’s post)

http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&t=" + data:post.title'

This is important to know because if you find other “submit’ hotlinks you can develop the tag on your own. If you like to have all of my hotlinks for your Beta blog template, expand your template widgets and search for "post-labels". You will find the portion of code shown below. Insert the code in red above the /span tag.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Click here for the hotlink code to social bookmarking site (updated to 22)

</span>

Know that [image source] should be replaced with the image URL. Between each set of “span” and “/span” tags, an individual element (like label or quick e-mail icon or comments) is located. And the line on which it is displayed depends on this tag:

<p class='post-footer-line post-footer-line-2'>(it encloses elements in line 2, in my blog the hotlinks).

Here is how the code in my template looks:

<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>
[Author and time stamp code]
</span>
<span class='post-comment-link'>
[Comments code]
</span>
<span class='post-labels'>
[ label code ]
</span>
<span class='post-icons'>
<!-- email post links -->
<!-- quickedit pencil -->
</span> </p>
<p class='post-footer-line post-footer-line-2'>

code is here

</p>

Though this was not much of a task I feel happy to have done some thing that might be useful for other bloggers.

P.S. For links to other bookmarking sites in my post footer, copy the link from there and follow the code above. Incase you have any issues implementing this or if you need links for some more sites (checkout this and this) and/or drop a line here.

Update: Also check out:

1. An extension to a social bookmarking hack
2. Feeds, Social Bookmark Drop-downs and alternatives