O'Reilly NetworkO'Reilly.com
BooksAll ArticlesSafari BookshelfO'Reilly GearFree NewslettersSearch
RSS DevCenter Tech Jobs | Forum

O'Reilly Network RSS DevCenter


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

  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!

Pages: 1, 2, 3, 4

Next Pagearrow





Sponsored by:

Get Red Hat training and certification.

Contact UsMedia KitPrivacy PolicyPress NewsJobs @ O'Reilly
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