Webtropic

This is not a how to blog, but, as it is still under construction, I will blog about all the little tricks I apply here, that might have some use for the rest of the wordpress.com folks.

Here is a little nice one.

Problem:

Readburner is a service that aggregates all blogposts shared in NewsGator Online, Google Reader and Netvibes.

By counting the number of shares, it creates a popularity list. In effect, this is a truly democratical social bookmarking system, without the hickups of Digg and its likes.

Readburner provides its users with some nice widgets in the form of little chicklets, that display essential statistical measures.

The chicklets come in three flavors:

• Item of a specific user (i.e. his share page) registed with Readburner.
• Items authored by someone.
• Items of a specific source (say, a blog with many authors).

Readburner provides some javascript code that allows anyone to generate the chicklets for his part.

Now, I wanted to put such a readburner chicklet in my sidebar, but I stumbled on the usual wordpress.com problem: no javascript allowed.

Solution:

Since javascript is not allowed, we have to find a way of displaying the chicklet through pure html.

Let’s see what a chicklet is composed of:

• an image (the colored rectangle of the chicklet)
• a number (the counted items)
• a link (the link to the relevant page in readburner)

As a matter of fact, the number is in the image, so we have to find just two things: the image url and the link url.

• User.

( The number here is my number from the google reader shared items url http://www.google.com/reader/shared/11232096483858520222.

You have to figure out yours, and replace this one):

The required urls are of the following type:

Image: http://readburner.com/fire/shares.gif?user=11232096483858520222

Link: http://readburner.com/u/11232096483858520222

and the actual html code should be:

<a href=”http://readburner.com/u/11232096483858520222″  target=”_blank” title=”">

<img src=”http://readburner.com/fire/shares.gif?user=11232096483858520222″ alt=”"/>

</a>

which produces:

 

• Author:

Image: http://readburner.com/fire/shares.gif?author=Nikos%20Anagnostou

Link: http://readburner.com/u/Nikos Anagnostou

and the actual html code should be:

<a href=”http://readburner.com/u/Nikos Anagnostou” target=”_blank” title=”">

<img src=”http://readburner.com/fire/shares.gif?author=Nikos%20Anagnostou” alt=”"/>

</a>

which produces:

 

• Source:

Image: http://readburner.com/fire/shares.gif?source=webtropic

Link: http://readburner.com/source/webtropic

and the actual html code should be:

<a href=”http://readburner.com/source/webtropic” target=”_blank” title=”">

<img src=”http://readburner.com/fire/shares.gif?source=webtropic” alt=”"/>

</a>

which produces:

 

To figure out the proper links for yourselves, first of course you have to add your shared items url in readburner. Then replace your name, blog name or user id in the above code and paste it in a text widget in wordpress.

As I said, I am using Google Reader. The other services might have some slight variations in the url schemes, I did not bother to check. Please do for yourselves.

Good luck and ..happy sharing!