We all have a list of links (blogroll) on our blogs, mostly pointing to other blogs. My friend Karan Misra decided to make his blogroll a bit more interesting on his (excellent) blog by arranging the links in the order by which they were last updated. I dug the idea and decided to implement it on my blog as well. Halfway through I realised a lot of people may like to do the same with their blogrolls so I created LinkedList.
WordPress users check out LinkedList.wp, a WordPress plugin.
LinkedList is free software and has been released under the GPLv3 license.
Nothing explains better than an example – links to a few popular blogs.
Some other places where you can see the LinkedList script at work – Souvik's blog, Varenya's blog and my photoblog.
LinkedList uses Google’s excellent AJAX Feed API to read the RSS/Atom feeds of the websites you want to link to and then arranges the list with the most recently updated website on the top.
- The Deep Breath
Download the LinkedList.js script. If you have access to a web server, upload the file there.
- The Pieces
Place the following bit of code in the
<head>tag of the page you wish to display the links on.
If you have uploaded the linkedlist.js file to a web server then paste:
PATH_TO_LINKEDLIST.JSwith the path to the linkedlist.js file you uploaded earlier.
If you haven't uploaded the file to a web server, paste the following instead:
Copy and paste the entire contents of the linkedlist.js file in the second
Finally, place this tag in the
<body>of your page—wherever you want the links to be displayed (your sidebar for example).
- The Plunge
Back to the <head> tag of the page. Paste the following AFTER the code that you just added.
Add as many links as you want!
LinkedList.js is written using object-oriented programming concepts. It provides a LinkedList class, each instance of which is, as the name suggests, a list of links.
LinkedList (String elementId [, int numberOfEntires [, bool fadeIn [, bool useCookies]]])
Creates a new LinkedList instance to which you can add links.
– id of the DOM element inside which the list is displayed.
numberOfEntriesoptional (defaults to
– sets the number of entry titles that are displayed from each of RSS/Atom feeds provided. If set to 0 (zero) each of the links will be suffixed with the date of the latest entry in its feed.
fadeInoptional (defaults to
– takes a boolean value of
falseto prevent the fade in animation when the list is displayed on the page.
useCookiesoptional (defaults to
– takes a boolean value of
trueto store auto–discovered feed urls for sites looked up by LinkedList.
add ( String url [, String title [, boolean isFeed]] )
Adds a new link to the LinkedList instance.
– a valid URL. Can be a syndicated RSS/Atom feed or a regular web page.
titleoptional (defaults to the title supplied by the feed)
– sets the name of the link.
isFeedoptional (defaults to
– indicates if the
urlis a syndicated feed. When set to false, LinkedList will attempt to auto–discover a feed associated with that web page, and if found, use that feed for sorting its link. However, it is recommended that feed URLs be specified whenever possible in order to decrease the number of Ajax requests made by LinkedList. (Feed discovery is made possible by the lookupFeed method in Google’s API)
limitTo ( int n )
Limits the list to the last
display ( )
As the name suggests, draws the linked list in the DOM element passed to the constructor. Static page links are placed at the end of the list. Feeds for which the Google API returns an error are excluded from the list.
- HTML Structure
The list drawn by the script is enclosed in semantic HTML markup. Should you want to use CSS to style the list, you can make use of the class names of the elements in the list to do the same. This is the basic skeleton of the list drawn by a LinkedList instance.
<ul class="ll-linksList"> <li> <div> <a href="<!-- target url -->"><!-- link title --></a> <ul class="ll-entriesList"> <li> <!-- entry title --> <span class="ll-entryDate"><!-- entry date --></span> </li> </ul> </div> </li> </ul>
- Change Log
21st July '08 Version 1.2
- Shows a status message while the feeds are loading
- Shows relative time for feeds updated within the last 24 hours
- Can specify max number of links to display by calling
- Reduced file size by using YUI Compressor
24th April '08 Version 1.1.4
- Cookies are now optional, and turned off by default
3rd April '08 Version 1.1.3
- Changed license to GPLv3
2nd February '08 Version 1.1.2
- Fixed a bug with error cases during feed auto-discovery
12th December '07 Version 1.1.1
- Added the ability to recognize a feed’s
lastBuildDateif individual item
pubDates are missing
Like it? Hate it? Want something more out of it? Spotted a bug? General feedback? —I'd love to hear about it!
Feeling generous? I like cash feedback just as much (ok, maybe a little more) ;).