RSS: How to integrate feeds into your website with AJAX…
Update 10th November 2007 : Please note the code attached to this post will no longer function correctly with the latest version of SimplePie.
This post is a continuation of Integrating RSS feeds into your website…
Here I will provide the step by step instructions and code samples to make this a simple task. As explained in the previous post, Simplepie is the feed parser that we will utilise for this example.
What you will need :
- Download the Simplepie application
- Download the Prototype AJAX framework
- A little knowledge of PHP, Javascript and HTML
On the front page of the McNicholl Holdings website you will be able to see the end result of this tutorial. Here is how it happens :
<div id="blog_news"><script type="text/Javascript">get_feed('blog_news');</script></div>
When the page loads the Javascript inside the div element above gets called. I have created a simple Javascript function called “get_feed” which handles the AJAX call. This will be included in the files at the end of the tutorial. Obviously you will want to include this Javascript file in your HTML in the HEAD section :
<head>
<script type="text/Javascript" src="./js/prototype.js"></script>
<script type="text/Javascript" src="./js/mcnicholl.js"></script>
</head>
In the HEAD section of your HTML code you will want to also include the Prototype AJAX framework as well – as this is what actually loads the data from the server and places it in the page at your desired location. Lets look at the “get_feed” function :
function get_feed(target) {
var url = "./feeds/feedsinc.php";
var hndle = new Ajax.Updater ({success:target}, url, { method : 'GET', evalScripts:true });
}
The parameter “target” specifies the place on the page that you want the data to appear after the AJAX call has returned from the server. This is usually a DIV element and in my example I have chosen the DIV with an ID of “blog_news”. The Prototype AJAX framework will call “./feeds/feedsinc.php” on the server to return the feed information and it will place the returned data in the “blog_news” div. Simple.
One thing I will point out here before explaining the PHP backend side of things is the directory structure. Here is how I order my files :
- .index.php (root directory)
- ./js/prototype.js (“js” directory for the Javascript files)
- ./js/mcnicholl.js
- ./feeds/feedsinc.php (“feeds” directory for all things relating to the feed)
- ./feeds/simplepie.inc
- ./feeds/cache (SimplePie requires a cache directory)
I find this is the clearest way to organise things and my code will reflect a structure like this so please recreate it if you are not intending to amend my code.
Onto the feed…
Here is the server side backend to parsing the feed from the blog of your choice and displaying the information :
<?php
/* Feed implementation for mcnicholl.com from the blog at blog.mcnicholl.com. */
require './simplepie.inc';
$cache_loc = "./cache"; // SimplePie Cache directory
$blog_loc = "http://blog.mcnicholl.com";
$blog_feed = "http://blog.mcnicholl.com/feed";
$posts_to_display = 5; // Post limiter
$feed = new SimplePie(); //Create an instance of SimplePie
$feed->feed_url($blog_feed); // Set the link to the feed
$feed->cache_location($cache_loc); // Set the cache directory
$feed->init(); // Get the feed
if($feed->data) { // If the feed has any data
// Output the posts
echo '<h2><a href="'.$feed->get_feed_link().'">Blog Latest</a></h2>';
$i = 0;
echo '<ul id="unList">';
while (($item = $feed->get_item($i)) && ($i < $posts_to_display)) {
echo '<li>» <p>'.substr($item->get_date(), 0, strpos($item->get_date(), ",")).'</p> ';
echo '<a href="'.$item->get_permalink().'" title="'.$item->get_description().'">'.$item->get_title().'</a><br>';
echo '</li>';
$i++;
}
echo '</ul>';
echo '<p id="BF_note" style="display:inline-block;font-size:9px; color:#000000">*This is an RSS feed from the <a href="http://blog.mcnicholl.com" title="McNicholl Holdings Blog" alt="McNicholl Holdings Blog">McNicholl Holdings Blog</a></p>';
}
?>
First of all, I apologise for the code layout above. I did try to have it tabbed and spaced for easy reading – but wordpress is a nightmare for such things and I eventually gave up. If anyone knows how best to add newlines and whitespace properly – then please let me know.
In order to customize the blog feed that you are integrating into your website, simply change the values of both “$blog_loc” and “$blog_feed” in the code above. Ofcourse, if you wish to display the feed posts in a different manner to my layout – then simply change the steps carried out within the “if($feed->data) { ” section. And thats that.
Below you will find the files necessary for all this to happen. Ensure that you use the folder layout I explained so that all files are referenced properly.
-
- Feedsinc.zip
- Make sure you download the SimplePie and Prototype frameworks.
Any questions, just let me know.
Thanks! This is a great article.
Thanks Kaya.
Positive feedback is always welcome!
Hi, I allways get that error:
Fatal error: Call to undefined method SimplePie::feed_url() in /home/trockend/public_html/leichtgewichte/feeds/feedsinc.php on line 14
integrated everything as you described above.
Hi Muelli,
Have you been sure to include the SimplePie.inc file in your script? A la :
require ‘./simplepie.inc’;
If you have the above included – can you post your php code?
Just a small sample of where you create an instance of simplePie
e.g
$mypie = new SimplePie();
and where you call the function feed_url()
This is Ryan from the SimplePie project. In regards to muelli’s comment, the code you provided was for our Beta 3 release. When we launched 1.0 over the summer, there were a few API tweaks that weren’t backwards-compatible. We noted what changed here: http://simplepie.org/wiki/setup/upgrade
Also, if you’re wanting to use SimplePie with AJAX, our new SimplePie Live! service might be more interesting and less work for you. Currently in beta: http://live.simplepie.org
Hi Ryan,
Thanks for your comment. It was nice of you to drop by.
I should have placed a warning in this post to indicate that SimplePie was still in beta (at the time of writing). Opps. I’ll update it with a little note.
Its understandable with new iterations that the code will change – especially in Beta.
If I get a change I’ll update the code and make a new post – shouldnt take to long considering how easy RSS integration is with SimplePie.
Recently I was recommended to use your site for generating code to integrate RSS feeds on my site. However, I have a query on how to read RSS feeds from an intranet site and display them on a site on the same intranet.
I require common username & password to login to both the intranet sites. Please provide me the code which I can use to integrate RSS feeds. Can you please help me to develop code for customized RSS reader?
Hi Gemini,
If both of the intranet sites provide an rss feed ( e.g both sites are powered by WordPress ) then there should be no reason why you cannot simply follow the instructions in this article.
Can you explain a little more about the intranets? Are they bridged? i.e If any computer in network 1 can access the server in network 2 then you should be able to connect quite easily.
What application powers the sites?
If you give some further details I am sure all the readers would be glad to add their two cents in hoping that they can help.
[...] RSS: How to integrate feeds into your website with AJAX… [...]
RSS Feeds are really very helpful and you could get site and news updates from it.~“
Hi, is there an updated version of the feedsinc script? This is something I was looking for and it’s a bummer that it says it’s no longer working with the newer version of Simplepie.