O'Reilly Media Inc.: Lightweight Portals with Meerkat

Tech Jobs | Forum

TOPICS
	Web Design and Development Classification Community Getting Started ICE OCS RDF RSS ScriptingNews Weblogs

Lightweight Portals with Meerkat
Pages: 1, 2, 3, 4

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. ...

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).

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!

Pages: 1, 2, 3, 4





Copyright © 2000-2006 O’Reilly Media, Inc. All Rights Reserved. All trademarks and registered trademarks appearing on the O'Reilly Network are the property of their respective owners. For problems or assistance with this site, email