Feed Your Home Page

With the help of Magpie, feed2js, and jQuery I added feeds of my blogs to my home page at ignotus.com. I wanted a solution that would let me tailor HTML markup and CSS styles to my liking. I discovered quite a few services that will aggregate feeds for you and then let you install a widget within a page, some of them apparently quite useful–as this post at Wild Apricot Blog explains. However, I really didn’t want to depend on another site and I initially only needed to post my own, local blog feeds to my home page. Drupal can handle feeds, of course, but I wasn’t enthusiastic about swapping Drupal in for my home page. Powerful though Drupal is, it is far from transparent, especially if you want to port a pre-existing design of your own into Drupal. WordPress blogs that I had already started provided more tools for customization and page creation than Drupal blogging offers. No jQuery widget that I looked at quite fit the bill either. I settled on feed2js because I could completely tailor the processing of a feed and its HTML output with some PHP and jQuery coding to get it massaged into shape. The fact that it was written by someone I knew and whose code I trusted was a clincher.

Customizing feed2js

Feed2js can be used as a remote service, but it also can be downloaded onto your own server and customized, which is what I did. It uses a JavaScript widget embedded in a host page to call a php process that calls the RSS parser Magpie to capture a feed. It parses the feed into a series of JS document.write statements that write out HTML in your page. It has a handy tool for generating and customizing the script you embed, and a useful approach to handling CSS (you can generate custom markup for each feed on the page). If you choose to show only titles of your post as links in your host page, feed2js.php tucks the first 256 characters of your post into the “title” field of the link. You will see part of the post when you roll over the link. I changed the code to show fewer characters and prepend the date of the post.

As a consequence of using JavaScript that was waiting on a PHP process while the page was being displayed, there was an annoying flash when the page loaded. Caching in Magpie reduced the flash on subsequent loads, but I suspected that using jQuery to load HTML into a page element would solve the problem. I copied feed2js.php to a new file, feed2html.php, where I basically removed all the “document.write” statements, returning bare HTML. In my target page, rather than embedding a JavaScript in a page element, <div id=”#page”>, I put the following code in the HEAD section:

<script type="text/javascript" language="javascript">
    var mnem = 'js/feed2js/feed2html.php?'
    + 'src=http://www.ignotus.com/spumoni/?feed=rss2'
    + '&chan=title&num=3&date=y&tz=-6&css=mnem';
    $(document).ready(function(){
        var html = $.ajax({
            url: intr,
            async: false
        }).responseText;
        $("#feed").append(html);
    });
</script>

JQuery’s $(document).ready function will execute scripts before an onload attribute in the body would. It executes before the page is actually displayed. I used jQuery’s ajax function and specified the calls to execute synchronously to be sure the html was fully loaded before the page displayed–this represented a small but acceptable delay in loading the page, about 1 second for three separate calls to the PHP script, one for each of three blogs.

Security

If you decide to use feed2js and Magpie, there are a few security considerations, which you can read about here.  Once you’re past the intial setup, you’ll need to change a line in the config file and delete some files. You may also find it expedient to protect your files from external calls, either by checking the HTTP_REFERER within the PHP script or with a .htaccess file in the feed2js directory, as explained here.

It’s also worth noting that AJAX functions, including the call from jQuery that is used here, are restricted to local URLs. In this case, we call a local PHP file and do so with a relative URL (“js/feed2js/feed2html.php”) to simplify matters. The feeds, of course, can come from anywhere.

Code

Feed2js was created by Alan Levine. It is available as a free service at http://feed2js.org/ Or you can get the open source code at Google Code and run your own server. You can find my file feed2html.php here, in a .zip file. Alan no longer has time to develop the code (developers are welcome to continue his work), but it still seems eminently useful.

Afterword

Added a Twitter badge and a Flickr widget of my own concoction. The flash I found so annoying is back sometimes in Safari, absent in Firefox–despite image caching, etc. I’ll have to test IE and FF on Win. Aside from doing everything in Java or Actionscript, it seems very hard to control the caching and drawing of the browser contents. Go figure.

0 Responses to “Feed Your Home Page”


  • No Comments

Leave a Reply

You must be logged in to post a comment.