Right after the reading lists publishing feature was released we started to intensively look for some new reading lists applications. One of the answers came from a sudden observation. I was clicking through one site when its sidebar grabbed my attention. There was a blogroll – the list of the blogs the author recommended.
Can you already feel what I’m getting at? In order to publish your reading list as a dynamically updated blogroll on the site all you need is a piece of JavaScript code. This code should render a small chunk of HTML containing the list of feeds from your reading list. And voila, you’ve got a dynamically updated blogroll following all your changes in BlogBridge.
Basic Usage
From now on you can access any of your published reading lists in a way which is very similar to that you use for getting OPML.
Here’s my Favorites reading list OPML link:
http://www.blogbridge.com/rl/2/Favorites.opml
And now my Favorites JavaScript link:
http://www.blogbridge.com/rl/2/Favorites.js
Noticed the extension change? Right, no other tricks.
In order to get any use of it you need this JavaScript file to be included somewhere on your site. Most often it will be a sidebar, but there could be other interesting solutions. Just type this script line anywhere you want and it will be replaced with generated HTML.
<script src=”http://www.blogbridge.com/rl/2/Favorites.js”></script>
Two things to note here:
- This script code contains a link to my favorites
- You can’t replace <script …></script> with <script/> due to the problem in some browsers.
Displaying Tags
After a day of using this feature in my own blog I realized that it could be even better if I could show the tags I had given to my favorite blogs. It looks more friendly if there are couple of words behind every blog link describing why exactly it was added to my favorites.
By adding a query parameter “tags” you can tell our service that you are interested in having feed tags mentioned in the list.
http://www.blogbridge.com/x/y.js?tags=true
It’s very simple, right?
Styling
As a Wordpress user, I have got the style almost right from the first try even without any style changes. Later, I decided to move tags a bit to the right to have them aligned with the blog names.
Let’s see what HTML code our JavaScript generates. It’s important for those who are interested in applying custom CSS rules to make the list fit better the overall site design.
Assuming that the reading list has two feeds:
- Title “Feed A”, HTML URL “http://a.feed.com/”, tags “photo” and “stream”.
- Title “Feed B”, HTML URL “http://b.feed.com/” and no tags.
the generated basic HTML will look like this:
<ul class="bbrl">
<li><a class="site" href="http://a.feed.com/">Feed A</a></li>
<li><a class="site" href="http://b.feed.com/">Feed B</a></li>
</ul>
and the HTML with tags included will look as follows:
<ul class="bbrl">
<li><a class="site" href="http://a.feed.com/">Feed A</a>
<div class="tags">photo stream</div></li>
<li><a class="site" href="http://b.feed.com/">Feed B</a></li>
</ul>
Note that the second list item has no tags section because it has no tags. Again everything is very simple and straightforward.
Those familiar with CSS will have no difficulties with styling. For others, here’s what you might need:
/** Moving a list slightly to the right and bottom. */
.bbrl { margin-left: 10px; margin-top: 5px; }
/** Adding space between list items */
.bbrl li { margin-bottom: 5px; }
/** Removing underlining of links. */
.bbrl a.site { text-decoration: none; }
/** Moving tags to the right. */
.bbrl .tags { margin-left: 10px; }
Summary
Given the URL after the successful publication of your reading list (see Guide Properties -> Publication) you can easily make the JavaScript link to use for in-HTML access by replacing “.opml” with “.js” and adding optional parameters (”tags=true” is the only available for now).
Insert the following script tag into your HTML with your own JavaScript link. It will be replaced with a nicely formatted HTML display of the indicated Reading List.
<script src=”http://www.blogbridge.com/rl/abc/xyz.js”></script>
Notes:
- You can’t replace <script …></script> with <script/> due to a problem in some browsers.
- Add “?tags=true” after “.js” to request that the feed tags also be included.
These icons link to social bookmarking sites where readers can share and discover new web pages.
