September 2009 Archives
(this post is in English as it might be interesting for a larger audience)
If you're using Google Reader and want to put your shared items on your blog/homepage, this post is for you. It focuses on Movabletype users but the approach described can be applied to all web sites.
Google's excellent Reader provides the functionality to mark items as 'shared'. Google also provides a tiny piece of HTML/JavaScript which enables you to embed the latest shared items on any web page. In case you're embedding this on your Movabletype powered blog, the 'problem' with this JavaScript is that it might not match your Blog's layout. The reason for that is quite simple: Simply spoken, the HTML generated from Google Reader's JavaScript does not contain any style information. It's basically just an unordered list represented by the HTML <ul> tag.
If you add it just like that to your Movabletype blog it will look something like seen on the left.
Obviously the list's bullets do not match the other lists in the sidebar (look on the right hand side of this blog).
To circumvent this glitch in the overall layout, I simply added the widget-list CSS class to the <ul> items of the shared items list et voilà, it neatly fits your Movabletype theme's sidebar layout.
So how is this done?
Google Reader's HTML/JavaScript combo basically consists of two JavaScript files. One is generated per user containing the data for the most recent shared items (i.e. headline, URL and some more metadata). Click here to see mine.
A second JavaScript file is used to generate the HTML for this data. Google's own 'renderer' (as I would call it) can be found here.
Obviously the last one needs to be modified to include our CSS class information. The secret lies within the call of the T JavaScript function. A simple change from
d = T("ul");
to
d = T("ul",
{
"class" : "widget-list"
}
);
does the job. You can find the resulting JavaScript file here (Google removes all whitespace from the JavaScript files so the files are not as legible as shown above).
The resulting layout without bullets is shown on the right.
Actually this procedure can of course be used to add any CSS class you like to Google Reader's HTML and thus can be used to modify the shared items list's layout in any way you like.
