Right on the heels of the announcement of our API, we’re announcing one of the first applications of it: the Tagalus Widget.
The Tagalus Widget provides a way for other web-apps to leverage the power of Tagalus by letting users view and set tag definitions without leaving the page. In the pictured example (from Combotweet), a user has clicked on the Tagalus icon next to the tag #sf09. When they click, a box pops up displaying the definition of the tag. Also, if the user has entered an API key (or the site has set one for the user), they are allowed to create their own definition and submit it to Tagalus.
Because of cookie restrictions, the user has to set their API key for each site, but if they check “Remember your API key,” the key will be stored so that they don’t have to enter it each time that come back to the site.
Adding the widget to your site
Adding the widget to your site is relatively easy. There are three required files:
- jQuery (http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js)
- Tagalus Widget CSS (http://tagal.us/stylesheets/tagalus_widget.css)
- Tagalus API Interface script (http://tagal.us/javascripts/tagalus_api_interface.js)
To add the functionality to this blog (running a modified version of the default theme), here’s the code that I put in the <head> section of the document:
<script src="http://tagal.us/javascripts/tagalus_api_interface.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<link href="http://tagal.us/stylesheets/tagalus_widget.css" media="screen, projection" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
jQuery(document).ready(function() {
TagalusAPI.load_widget();
TagalusAPI.add_buttons_to_elements("a[rel='tag']")
});
</script>
The code is fairly self-explanitory, with the exception of the last bit. First, it imports the three required files (<script> and <link> elements). Then, it uses jQuery’s docment.ready to determine when the page is ready, and proceeds to load the widget. The next call is where the magic is: TagalusAPI.add_buttons_to_elements. This is the function that puts the clickable Tagalus icons next to tags in your page (note that the link still clicks through to its original destination) – if you would like to just have the link open up the widget and forgoe the icon, use TagalusAPI.bind_to_links(selector). The argument that you feed it is a jQuery selector. So, if you wanted it on every link of the page, you would call TagalusAPI.add_buttons_to_elements(“a”). For every link of class ‘tagalus_link’, you would call TagalusAPI.add_buttons_to_elements(“a.tagalus_tag”). In this case, we’re looking for all of the links that have “tag” in their ‘rel’ element – something that all pages that use the Tag microformat would use. Read more about jQuery selectors here.
We hope to have a WordPress plugin automating this functionality soon for your blogs. But, keep in mind this is not limited to blogs – it is already in use on Combotweet, which is a Twitter client, for example. It could also be used on photo viewers, video pages, or whatever you want.