Make a Recent Bookmarks Widget with LaterThis and PHP

I like LaterThis a lot, because I  work on two computers and I like to access my bookmarks on both of them.   It works like this: Find a page you want to save, click on the LaterThis bookmarklet in your browser toolbar (or bookmarks list) and walla-it’s automatically saved to your account.  As an extra bonus, LaterThis creates an RSS feed of all your saved pages, which we will be using here.

If you want to see this widget in action, check out the bottom of the sidebar on this page.

There are lots of ways to have an RSS feed display in your sidebar, but I think the best and most flexible is based on a great NETTUTS tutorial by Jeffery Way that uses PHP to parse the feed. This method takes an RSS feed and uses PHP to create an unordered list from the post titles, which is easily styleable to fit the rest of your blog.

Adding the Code

I can’t explain how it works nearly as well as Jeffery has, but here’s the gist:

Step 1: Add the following code to your functions.php file (if you’re using Wordpress):

function getFeed($feed_url) {

$content = file_get_contents($feed_url);
$x = new SimpleXmlElement($content);

echo “<ul>”;

foreach($x->channel->item as $entry) {
echo “<li><a href=’$entry->link’ title=’$entry->title’>” . $entry->title . “</a></li>”;
}
echo “</ul>”;
}

Step 2: In your sidebar (or wherever you want the feed to appear) add the following code:

<?php getFeed(“http://example.com/feed.rss”); ?>

where you substitute in the RSS feed of your choice. At this point you should have an unordered list (<ul>) of the posts in your feed.

Getting Your Feed

How do you find your LaterThis feed? Easy.  Login to your LaterThis account. In the top-left corner of the screen, you’ll see something like this:

Place your cursor over the RSS icon, and your custom feed url will appear in your browser’s status bar, like so:

If you can’t find it, the feed will be formatted like this: http://laterthis.com/username/links/feed.rss.

After all this, you may want to add in a bit of CSS for styling, although your blog theme will most likely already have styling for unordered lists. Go ahead and substitute your new LaterThis feed in your sidebar PHP:

<?php getFeed(“http://laterthis.com/username/links/feed.rss”); ?>

Add Some Styling

For this blog, I added some additional styling to make the bookmarks stand out a little from the rest of the sidebar.  After I enclosed the PHP code in a <div> with id=”laterthis,” I added the following CSS:

#laterthis ul {list-style-type:disc;}

#laterthis ul li {padding-bottom:20px;}

#laterthis {height:550px;overflow:auto; width:250px;background:#efefef; padding:20px;}

The first two lines add a disc (dot) to each post title in the list and ensure that there’s ample padding (20px) between each item. The third line establishes a box with a light grey background around the widget.

Since I did not want all  items in the feed to display at once, I gave the <div> a height of 550px and set overflow:auto so that the box would have a vertical scroll bar.  I assume there’s a way in the PHP function to only fetch the first x number of items in the feed, but this way, users can scroll down if they’re interested.