Tired of managing links inside different browsers across various computers? Ready to build your link collection in the cloud? How about in your own cloud (for some definition of “cloud”, that is)?

Textpattern allows you to easily build a bookmarklet system for quickly adding links to your website. Combine this with its link description and categorization features, along with the <txp:linklist> tag, and you’ve got a complete system for storing, cataloging, and retrieving links.

In my experience, this has been really useful. I use several different browsers across various computing platforms, so in the past I’ve always been a bit pessimistic about the idea of keeping track of the various websites I add to my favorites in each browser. But links are still an extremely helpful resource—the real value of the world wide web rests on the concept of hypertext.

Some background

After I began to realize that the web I love has become more commercial, more sponsored, and more walled-off than ever, I started plans to build my own information portal. This portal would allow me to cast a wider net and open up my web experience to websites beyond the standard social channels and news organizations.

This information portal project started as a simple website that listed some of my favorite but easily-forgotten links, and quickly grew from there into a database of over 2,200 links, the majority of which are entered into Textpattern’s link database by a bookmarklet. The links in their various categories are shuffled and displayed so that I don’t lose track of older links that may continue to be useful.

I also collect and display other information in the portal, like the weather, a to-do list, and randomly-selected excerpts from some of my favorite books, but in this article I’ll be focusing on building the link collection.

Getting started

You’ll need to have Textpattern installed, but no plugins are required for this project. I recommend that you head over to Content -> Categories and set up some link categories first. While taxonomy is out of the scope of this article, my own category list looks a lot like a simple version of Dewey’s list. Keep in mind that Textpattern makes it easy to modify and expand your categories later.

After you have some basic categories set up, you’re ready to start adding links with the bookmarklet. The bookmarklet is simply a link that you can drag to your browser’s bookmark bar. Inside your Textpattern page code, the link will look like this:

<a href="javascript:location.href='http://www.example.com/textpattern/?event=link&step=link_edit&url='+encodeURIComponent(location.href)+'&linkname='+encodeURIComponent(document.title)">Add to my links</a>

You will need to place your own domain name in the code snippet above, to replace “example.com”. In addition, you’ll need to log in to your own website to save a link, but thanks to Textpattern’s sensible login session settings, you shouldn’t have to do this every time you add a link.

In case you haven’t done so already, you may also wish to use something like an Apache .htaccess rewrite to automatically convert your website requests into either “www.example.com” or “example.com”. If you frequently use your Textpattern website, forcing the domain name to be either one of those could prevent the website from asking you to log in constantly, as it will view a login session for www.example.com and a login session for example.com as two different sessions, each requiring a login.

The example website – 1920s History Links

To demonstrate how the bookmarklet works, I built a small demonstration website called The 1920s: A History Database. This website displays various links relating to the 1920s, along with descriptive text that I have entered for each link. I used the bookmarklet to add each link to the website as I surfed around the web.

At the bottom of the website you’ll see the convenient bookmarklet link, along with instructions for its use. For the purposes of this tutorial, the button is visible to the general public right now, but on your own website you may wish to place it behind some sort of a logged-in user check.

How the page works

Behind the scenes, I have a single Textpattern page template generating the lists of links. The code used looks like this:

<h3>Science and Technology</h3>
           <txp:linklist break="li" category="1920s-science-and-technology" limit="5" sort="linksort asc" wraptag="ul">
             <txp:link /><br />
<txp:link_description />
         </txp:linklist>

The <txp:linklist> tag specifies that the links are to be displayed as an unordered list, and also denotes the category from which to draw links, the number of links desired, and the sorting method.

Inside the tag, you can see that I’m keeping it simple—I display the links using the <txp:link> tag, a <br> tag, and the <txp:link_description> tag.

My favorite aspect of Textpattern is its incredible flexibility combined with lots of built-in functionality. You can insert that code anywhere inside of your own HTML and make your link list look however you want. You can also customize the link display, for example by randomizing the selection of links. I’ll let you read more about the features available with the linklist tag in the official txp:linklist documentation.

Summary

There are a surprising number of uses available for link lists, so I encourage you to “think beyond the blogroll” if you haven’t added links to a website in a while.

For example, Textpattern’s link system could help you collaborate with editorial team members to come up with ideas. You can even share links to Google Docs or private YouTube videos and use the linklist tag’s ability to sort links by the person who added them to the database. In this way (and perhaps involving some neat add-ons to do things like displaying videos or imagery) a very simple team blog could be put into place really quickly.

I hope you enjoy using your new Textpattern link bookmarklet!