Monday, September 04, 2006

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

18 comments:

Unknown said...

Vivek, this is great! I picked up the Furl hotlink from you. Just one small correction is needed. As I said before, any instance of & in the URL should be converted to "&". Otherwise, we get an error while saving the changes. And for it show up as "&" in your post (which it doesn't now), you have to type "&amp;"!

I will announce about this and few others' hacks in my next post. Also, leave a comment in Freshblog, a famous blogger hacks blog. If John likes what you have done, he will announce it in his blog. Also, check out their social bookmarking hack for non-Beta blogs called PopMarks.

Vivek Sanghi said...

Hey thanks! I have added the amp;amp; as suggested. Popmarks is cool. Hope they modify it for beta blogs as well.

Eric Wendelin said...

This is exactly what I have been looking for! Cheers!

Vivek Sanghi said...

thanks eric!

me said...

Hi Vivek

Nice Job, now implementing in my blog.

Relating &, it the google page You have set up, there's an error in the Digg link, as there's an extra quote before de & causing the template to break:

[...]e=3"&url=" + data:po[...]

Should be
[...]e=3&url=" + data:po[...]

Vivek Sanghi said...

Thanks Cuauhtémoc. I have made the correction as per your suggestion. Thanks for dropping by.

Anonymous said...

hi vivek,you hv a great work here,bt y my blog cant show up the picture?im i miss anything?pls visit my blog:www.moneylah.blogspot.com

thanks for your help!

Vivek Sanghi said...

hello louiss. I am sory for the late response. My internet connection is gone and currently I am browsing from a cafe. It will be some time before I come back to normalcy. Please e-mail me your template code in as a text file attachment and I will look into it when possible.

LOUI$$ said...

thanks vivek,i hv fix it,it work great man!btw,can you teach me how to do "listen to this article"?i already follow ur instruction,bt my home page didnt show the post content,only post content!help please!^^

Vivek Sanghi said...

@LOUI$$
I will have to look into your template code. PLease e-mail it to me as a text file attachment and I will look into it. There will be a delay in my response as My internet connection service is currently down.

protesto said...

Hi Vivek,

I've found a new socializer with cool buttons named AddThis and modified for blogger beta.

Vivek Sanghi said...

Good find protesto! I have updated my latest post on social bookmarking where I mentioned about extreme socializer.

protesto said...

Great, thanks Vivek ;)

Anonymous said...

i'm trying to make this a widget so that people with no html knowledge can easily use this.

any idea?
tia
dny

Vivek Sanghi said...

Hello dennyhalim. That's a good idea. You can offer it as one click widget. Checkout this link to learn more about one-click widgets. Also checkout the code in translation widget offered by Hoctro. That code will pick up the blog URL automatically without anybody having to mention it manually. So the Social bookmarking hrefs here and the code from Hoctro's (Amit's) translation widget can be combined to offer social bookmarking as a single click installation.

Alternatively there are one-link social bookmarking sites like extreme socializer, add this etc which are also helpful and serve the purpose (See end of this post for their links).

Unknown said...

this will bookmark particular post (not the page).. fail to understand, why someone would want to bookmark particular...!? is it not best, to have this in sidebar to bookmark the page..!?

Unknown said...

also, as i understand - for some reason if edit the blog post (after someone has included in their favourite).. the permanent link changes - so bookmark will not be valid any more.

Top Surgeons said...

Very nice post, Vivek. I learned something new here.

Please also visit my blog
http://intactinfo.blogspot.com
when you get a chance.

Other posts @ Stubborn Fanatic

Click here to view all my posts.

Creative Commons License
This work is licensed under a
Creative Commons Attribution-ShareAlike 2.5 License.

However, prior permission is required before you can display any content from this blog on your site. The author reserves the right to demand removal of such content at any time for any reason. (Not applicable for back-linking)
Note: The author is not responsible for any loss of data or damages to your homepage as a result of using the hacks suggested here. Please observe all necessary precautions while modifying template code.

© 2006 Vivek Sanghi a.k.a Stubborn-Fanatic