O'Reilly    
 Published on O'Reilly (http://oreilly.com/)
 See this if you're having trouble printing code examples


Lightweight Portals with Meerkat

by Rael Dornfest
12/08/2000

Editor's note: Meerkat predated the popularity of syndication, feed services, and feed readers. Now that other groups are providing this service, we have removed Meerkat in favor of their better solutions. We maintain these articles for the sense of historical interest.

Meerkat's Open Service API and powerful feed-building tools provide a simple framework for building lightweight portals or bringing fresh syndicated content to your web site.

Some of you may not know this, but quite a bit of what you see on the O'Reilly Network is built out of Meerkat's RSS database. Some, such as our Weblogs and Forums boxes, are automagically generated via a combination of profiles, search patterns, and programmatic wizardry. Others, like our Digests, pull in stories from various channels, some of which are hand-picked for display on our pages.

Meerkat makes building lightweight portals a snap! Whether you want to hand pick stories or set up profiles and filters for automagic feeds, Meerkat will flow fresh content to your pages with little effort. If you can point and click (or the equivalent) and have even minimal experience with HTML, you're on your way. Even programmers should find this pretty easy. ;-)

This article takes you step-by-step through the rather simple process of:

  1. Borrowing an existing feed profile

  2. Point-click-and-dragging your own hand-crafted feed

  3. Embedding the feed in your web page(s)

    And, for the more adventurous among you,

  4. Adding two or three lines of programming magic for some advanced(ish) fun(ctionality)

We'll build the mythical "PHPerlthon" (that's PHP, Perl, and Python), a site for the language agnostic programmer. And it'll all be done with only a feed or three, a touch of HTML, and a pinch of PHP. Along the way I'll (re-)introduce you to Meerkat's misunderstood mobs, simple, yet powerful profiles, and the beauty of one line of JavaScript.

To begin, point your web browser at http://meerkat.oreillynet.com/. For access to features we use a little further on in the article, you'll need to be logged in to the O'Reilly Network. To do so, click Login in Meerkat's black toolbar; if you've not already signed up, now would be a good time to do so.

Borrowing a feed

We'll start simply by using a couple of the "global" profiles provided out of the box for your convenience. The "Python" and "Perl" profiles are composed of some rather nice sources and don't need any fine-tuning for our purposes, so we'll borrow them.

Selecting the Python Profile

Selecting the Python profile in Meerkat.

  1. From Meerkat's Profiles/Mobs popup-menu, select Python. The screen will refresh, pre-setting Meerkat's "Category" to "Lang: Python" and "Show me" widget to "7 DAY".



  2. Now the thing we're most interested in is the URL for the "Python" profile. Copy it from your browser's Address/Location bar and paste it somewhere for safekeeping -- don't forget to note what it is. ;-)
    Copy the URL for Meerkat's Python Profile

    Copy the URL for Meerkat's Python profile.

  3. Repeat steps 1 and 2 for the Perl profile, copying the associated URL.

These URLs will provide us with feeds of the latest stories in the "Lang: Python" and "Lang: Perl" categories' associated channels. This works nicely for solid feeds, but sometimes you'll want to tweak a little here and there, hand-crafting a feed to suit your particular slant.

Hand-crafting a feed

Feeds come in two flavors:

Automagically with profiles

Let's build a simple PHP profile, pulling from stories in the "Lang: PHP" category.

  1. Set Meerkat's controls so that "Category" is set to "Lang: PHP," the "Search For" box is empty, and "Show me" is set to "ALL" (PHP items are few and far between).

  2. Select Save Settings to Profile... from the Profiles/Mobs popup-menu.

  3. Saving the new Profile

    Saving the new profile.

  4. The screen refreshes and a "Save Settings to" window appears. Type php into the New profile field and click the Save button to save these settings. The "Save Settings to" window closes.



  5. Restoring the custom PHP Profile.

    Restoring the custom PHP profile.

  6. Again, we're interested in the URL for our new "PHP" profile. Restore it by selecting PHP from the "My Profiles..." section of the Profiles/Mobs popup-menu.

  7. Copy the URL from your browser's Address/Location bar and paste it somewhere for safekeeping -- again, make note of what it is.

That's all there is to creating a profile. You can always adjust stored settings by restoring the profile, making desired changes, selecting "Save Settings to Profile...," and selecting an "Existing profile" to save to.

Manually with mobs

Next we'll try our hand at building a mob, a hand-picked list of items for inclusion in a feed. By the way, in case you were wondering, a "mob" is the collective term for more than one Meerkat: "a mob of meerkats."

  1. If you've never created a mob before, you'll need to do so now. Select Manage my Mobs... from the Profiles/Mobs popup menu. The "Mob Manager" window appears.

  2. Click the New button to create your first mob. Name it top_news and click the OK dialog box button.

    Creating the top_news Meerkat mob.

    Creating the top_news Meerkat mob.


  3. Your empty "top_news" mob is created and displayed. Now we'll need that URL again, so copy it and paste it along with the others.

    Getting the URL of the mob.

    Getting the URL of the mob.


  4. I'd suggest supplying a description and category for reference. Click the Save button and close the "Mob Manager" window when finished. You can always make changes to your mob information by selecting it from the "Mob Manager," making changes, and saving them.

    Saving changes to a mob.

    Saving changes to a mob.


  5. Adding an item to a mob.

    Adding an item to a mob.

  6. Let's get on to adding items to our new mob. You'll notice in Meerkat's "Action" column a set of icons alongside each item; the dotted-circular one is used to add the associated item to a mob. Clicking the icon summons the "Meerkat Mobs" window.

  7. Select the appropriate mob from the "Meerkat Mobs" window; the window will disappear automatically. Add items to any of your mobs at any time this way.


    Adding and removing items from a Mob.

    Adding and removing items from a mob.


    Remove items from a mob by un-checking their associated checkbox(s) and clicking Save.

That's all there is to creating feeds. You can also whip up feeds on-the-fly using Meerkat's URL-line API, documented in Meerkat: An Open Service API.

Embedding feeds in your web page(s)

Of course, one can grab a feed in one of Meerkat's various flavors and insert it programmatically into a page, but there's a simpler way. With only one line of JavaScript, we can instruct our visitor's web browser to embed the feed in the appropriate place. We can even style it to suite our own tastes.

Meerkat's JavaScript Source flavor produces a .js file containing a snippet of code for inclusion into our Web page. This code is nothing more than a few document.writeln() calls to write the Meerkat items into the document on-the-fly. And the magical line is:

<script 
language="JavaScript" 
src="http://meerkat.oreillynet.com/?_fl=js">
</script>

Notice the URL in there? We'll be replacing part of it with those URLs we've been faithfully copying as we went along.

Let's start with the "PHPerlthon" home page and our "top_news" mob. ...

  1. In your favorite text editor (vi, Notepad, SimpleText), create a new HTML page like so:

    <html>
    
    <head>
     <title>PHPerlthon Home</title>
    </head>
    
    <body>
    
    <h1>PHPerlthon</h1>
    <h3>For the Language Agnostic Programmer</h3>
    
    <script 
    language="JavaScript" 
    src="http://meerkat.oreillynet.com/?_fl=js&m=212">
    </script>
    
    </body>
    
    </html>

    You'll notice that we altered the URL slightly, adding &m=212 to indicate that we're requesting Mob #212 in JavaScript Source flavor (_fl=js).

  2. Rinse, lather, repeat ... for each of the three profiles (Globals "Python" and "Perl" and our own "PHP"). Simply replace &m=212 with &p=17, &p=1064, and &p=4791 respectively.

That's all there is to embedding Meerkat feeds in your web pages. Take a gander at our four feeds in action...

A touch of style!

Now our pages are a little, shall we say, "style-free"! Meerkat's JavaScript Source flavor includes CSS stylesheet support. We'll whip up a quick CSS stylesheet, phperlthon.css, like so:

h1,h3               { font-family: Arial, helvetica, sans-serif; 
                      font-weight: bold; 
                      color: black;            }
.meerkatTitle       { font-family: Arial, helvetica, sans-serif; 
                      font-size: 10pt; 
                      font-weight: bold; 
                      color: black;            }
.meerkatDescription { font-family: Arial, helvetica, sans-serif; 
                      font-size: 9pt; 
                      color: black;            }
.meerkatCategory    { font-family: Arial, helvetica, sans-serif; 
                      font-size: 8pt; 
                      font-weight: bold; 
                      font-style: italic; 
                      color: brown;            }
.meerkatChannel     { font-family: Arial, helvetica, sans-serif; 
                      font-size: 8pt; 
                      font-style: italic; 
                      color: brown;            }
.meerkatDate        { font-family: Arial, helvetica, sans-serif; 
                      font-size: 8pt; 
                      color: green;            }

To link it into our "PHPerlthon" home page, we just add <link rel="stylesheet" type="text/css" href="./phperlthon.css" /> to phperlthon.html's <head> element and we've got style!

Advanced(ish) programmatic fun(ctionality)

Those of you with a modicum of programming know-how can easily build more advanced functionality. We'll use a little PHP to pull all of our site into only one page with links between our Home, Python, Perl, and PHP views. And we'll add bit of HTML to spice things up.

<html>

<head>
 <title>PHPerlthon</title>
 <link rel="stylesheet" type="text/css" href="./phperlthon.css" />
</head>

<body bgcolor="#000000" text="#000000" link="#990066" vlink="#006699">

<table border="0" cellpadding="20" cellspacing="4" width="100%">

 <tr valign="top">

  <td bgcolor="#999999">
      <p>   </p>
   <h3><em><a href="./phperlthon.php?m=212">Home</em></h3>
   <h3><em><a href="./phperlthon.php?title=Perl&p=1064">Perl</em></h3p>
   <h3><em><a href="./phperlthon.php?title=PHP&p=4791">PHP</em></h3>
   <h3><em><a href="./phperlthon.php?title=Python&p=17">Python</em></h3>
  </td>

  <td bgcolor="#ffffff">
  <img src="./phperlthon.gif" width="403" height="75" border="0" alt="PHPerlthon" />
  <h3> <? echo $title ? $title . ' News..' : '   ' ?> </h3>

   <script 
   language="JavaScript" 
   src="http://meerkat.oreillynet.com/?_fl=js&<?
   
    if ($m) echo "m=$m";
    elseif ($p) echo "p=$p";
    else echo "m=212";
   
   ?>"></script>
  </td>

 </tr>

</table>

</body>

</html>

(Note: The long URL line was broken up for presentation purposes.)

Give phperlthon.php a whirl. The links pass appropriate arguments back to the PHP page itself, which in turn passes the appropriate switches on to Meerkat on the URL-line. This sort of tomfoolery could just as easily have been accomplished with Server-Side Includes (SSI), CGI scripting, and the like. Hopefully this simple demo provides you with programmatic inspiration on new ways to use Meerkat in your coding.

The end

I hope this article inspires you to use Meerkat in interesting and novel ways. Be sure to drop us a line in the O'Reilly Network RSS Forum and let us know. And, if you're so inclined, spread the Meerkat word with a nifty "Meerkat Powered!" button. To do so, simply copy-and-paste the following HTML into your document:

<a href="http://meerkat.oreillynet.com">
<img 
src='http://meerkat.oreillynet.com/icons/meerkat-powered.jpg'>
</a>

Resources

The following is a list of starting points from which to explore further some of the topics covered (or not) in this article.

Rael Dornfest is Founder and CEO of Portland, Oregon-based Values of n. Rael leads the Values of n charge with passion, unearthly creativity, and a repertoire of puns and jokes — some of which are actually good. Prior to founding Values of n, he was O'Reilly's Chief Technical Officer, program chair for the O'Reilly Emerging Technology Conference (which he continues to chair), series editor of the bestselling Hacks book series, and instigator of O'Reilly's Rough Cuts early access program. He built Meerkat, the first web-based feed aggregator, was champion and co-author of the RSS 1.0 specification, and has written and contributed to six O'Reilly books. Rael's programmatic pride and joy is the nimble, open source blogging application Blosxom, the principles of which you'll find in the Values of n philosophy and embodied in Stikkit: Little yellow notes that think.


Discuss this article in the O'Reilly Network RSS Forum.

Return to the RSS DevCenter.

Copyright © 2009 O'Reilly Media, Inc.