Tech tip: For WordPress/Google Reader users

EDIT: One drawback to this method is that it’s based on individual posts, not posts-per-feed. So if someone’s blog twitches and reposts all of their content to their RSS feed as new… well, that’s what you’ll see.

Two things were bugging me.

  1. I really like the “recently updated blogs” widget thingy that blogger users have access to. It’s very cool. I wanted it for Mysterious Buttons, which is self-hosted using WordPress.
  2. Maintaining a blogroll is a pain. I’m still adding 2-3 new wowblogs/week to my reading list 7-8 new wowblogs/week to my reading list (thank you FollowFriday) and exporting/editing/importing the OMPL file from Google Reader into WordPress is a pain.

So I did some looking. And some fiddling. And played a bit with WP Social Blogroll before giving up. And did some more fiddling. And found a solution I think I like.

I now have two folders of WoW-related links in Reader – a “main” set which is shared, and second set which contains the feed from MB, my armoury feed and any sites I’m still unsure of (sites I’ve just discovered, basically). Any sites I add to the main set are automatically included in the blogroll, and updates to those sites appear in the “Blogroll updates” box.

Here’s what I did.

WARNING: for this to work, you have to make your WoWblogs folder(s) “public” in Google Reader. You’ll want to play with the privacy settings and potentially edit your user details in the account page, lest you inadvertently expose yourself (oo-er).

In Reader, go to Settings > Reader Settings > Folders and Tags. Choose the folder of links you want to include and change it’s sharing setting to “public”. Four options are then available.

To start with, choose “add a blogroll to your site”. Delete the text in the “title” box (as you’ll add a title to the container box on your site) and change the colour scheme to “none”. This should mean that, when we add the list to WordPress, it picks up styling from your theme. Then select the HTML snippet in the box and copy it.

Go to the Appearance>Widgets section in your WordPress dashboard, and drag a new “Text” widget to an appropriate place on your sidebar. Give it an appropriate name (“Rollblog”?) and paste the HTML you copied into the box. Hit save.

If you also want to add the “recently updated” feed, then read on. If you’re done, skip ahead two paragraphs.

To get the “recently updated items” feed, head back to Reader, to Settings > Reader Settings > Folders and Tags, and this time choose “add a clip to your site”. Once again, remove the text in the title box and choose “none” as your colour scheme. You’ll also want to make sure the “show item sources” box is ticked. You might want to untick the “show item notes” box, depending on how you use Reader. Again, copy the HTML snippet from the box and return to WordPress.

In WordPress, as with the blogroll item, add a new Text widget to your sidebar, give it a title and paste in your HTML. Save. Almost done!

If you view your site now you should hopefully see these new items which (hopefully!) will have picked up styling from your site’s theme. I found it necessary, however, to tweak just a couple of things in the CSS so things worked how I wanted them to. To fix these, you need to edit your theme’s CSS file. For the theme I’m currently using, I could do this in a single file, accessible from Appearance > Editor in the WordPress Dashboard, but depending on permissions YMMV.

I added the text below to the CSS file:

/* Google Reader specific styles */
#readerpublishermodule0 .s a { font-weight:normal;}
#readerpublishermodule0 .s { font-size: 9px; margin-bottom: 15px; }
#readerpublishermodule1 .f { margin-left: 10px; margin-top: 25px; }
#readerpublishermodule0 .f { margin-left: 10px; margin-top: 25px; }

A quick explaination

The snippet from Google reader you pasted in generates divblocks with IDs of “readerpublishermoduleX”, where X is a number starting at 0 and corresponds to the number of snippets from Reader on the page. On Mysterious Buttons, there are two, hence the styles for 0 and 1. These divs also have an overarching class, but I chose to work with the ID values to allow me to adjust them individually if necessary.

Individual elements have one-letter classes applied:

  • “i” is the item title & link (I didn’t need to style this)
  • “s” is the source, complete with link
  • “f” is the footer (the “view all” link)

My styles are specific to the current theme I’m using: for the “recently updated” section (module0) I removed the boldface from the source link, reduced the typesize of the source line and added some clear space below to separate the entries. For both sections, I indented the “View all” link so it aligned with the other elements and added some clear space above it.

13 thoughts on “Tech tip: For WordPress/Google Reader users”

  1. I’ve done my “complete blogroll” this way (auto-update) for quite a while. Because mine is so long, I actually have had it as a separate static page on the blog (html is html, works everywhere) and put a short-list of “featured blogs” on the sidebar. I had used a different color “theme” for each grouping (i.e. green for healers, blue for tanks, etc)

    However, I didn’t know that you could remove the icky formatting with “none”, and that tip just made my day. I LIKE!

    See, here’s how it looks on a separate page, now with “format-none”.

  2. Very nice! I also like the “recently read” widget on blogspot and I’ve been looking for something like it for WordPress, will try this out and see if I can make it work.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>