Grow your CSS skills. Land your dream job.

#60: AJAX Refreshing RSS Content

In video #55 the end result was the FeedSmusher, which inserted content from external RSS feeds onto a page of our own. In this screencast, we will start there and use AJAX (with help from jQuery) to refresh that content without requiring a page refresh.

Links from Video:

Comments

  1. Very Cool, Simple and Cool

  2. Taking about AJAX maybe the comments could be AJAX Because i was Watching the video and posting a comment and i had to Watch most of it again because of my Comment went to a different page.

  3. I might use it to keep an updated feed on my music blog with tweets about the blog :P

    Nice one ;)

  4. Hey, that AJAXed comments thing my work well on my music blog also, since you can listen to music from the post and if you comment the music will get cut off.

    Im gonna start working on it right away.

  5. The thing about the technique used in this tutorial is, it could be used in so many different ways. I though the tweet that popped up at 7:52 in the video was hilarious.

    Great Work Chris.

  6. Hi,

    Excellent screencast. Been playing with this one for hours, just one quick question: How do I chnage the timezone to GMT/BST?

  7. Thanks so much Chris! I got my example up and working last night: http://nikibrown.com/bananatweets

    • Niki,
      One note about your one. I think you should force scroll-bars @ all times others you get a lot of movement on content refreash.

      Just a thought.
      Dan.

  8. I was just looking for something like this. Thanks!

  9. ooo_o
    Permalink to comment#

    Great job!

  10. Agree on the scroll-bar, that’s a good call. It’s a minor point, but I think if you chained the fadeIn and fadeOut differently, it would look even better in terms of animation. Also, I’d probably want to work out some kind of noscript action for those who do not have JS enabled. I know it’s not awfully common, but it’s a good practice nonetheless. Great tutorial!

  11. I’ve used SimplePie before and while it’s cool, it’s slow when you have multiple (like 6+) feeds on one page. It looks like it has to parse every single feed before it displays any of them. It would be really nice if each feed would default with a “loading” gif and load in individually. Also, from what I remember, SimplePie is a big chunk of code (the simplepie.inc).

    If you’re doing just one feed, I think it’d be more efficient to roll your own JavaScript code, especially if it’s just parsing RSS. From what I remember, SimplePie seemed to be a lot of overhead.

    Also, while I love jQuery, any Prototype users out there are probably aware of Ajax.PeriodicalUpdater which makes auto-refreshing an absolute no-brainer. Couple it with Scriptaculous for ui/effects and you’re golden.

  12. This tutorial was very informative. One question though. Do you need jquery installed on your website server or just downloaded on your operating system?

    • Brian
      Permalink to comment#

      Elena you will have to point to Jquery that should be located somewhere on your server. This is up to you to upload.

      I would recommend placing any Jquery files within a js or javascript named folder. This way it can be called up and serve it’s purpose

  13. Phild
    Permalink to comment#

    Cool stuff,
    it’s been a while since I last checked
    CSS-Tricks – design lookin nice bro

  14. Martin
    Permalink to comment#

    If we use $item->get_link() or $item->get_link(0) we get the link to page. It’s OK. But in source of this twitter rss is also link to user twitter image. How get this? I try $item->get_link(1) but it’s not working.
    Here is part of print_r($feed->get_items()) – http://pastie.org/442289
    and on this example how to get http://static.twitter.com/images/default_profile_normal.png ?

  15. Jannis
    Permalink to comment#

    I like it! Excellent intro to AJAX which remained a mistery to me until now.
    mostly because of my lazyness to get with the times but hey.. what can you do…

    One Question however:
    If I were to build myself a RSS reader dashboard type of setup with all my feeds that I regularly read getting pulled into one site, how would I get each feed?

    Would I need to create a different ‘feeder.php’ file per feed or can I just add more feeds to the one php file?

    Also, If i do that, how would I separate the different feeds into individual divs so that I can build a layout around them?

    Thanks again for these screencasts, very helpful stuff.
    Jannis

    PS: Could you share your Coda Clips with us? They also seem highly useful!

    • @jannis check out the feedsmushing tutorial – download the code – hes got 2 rss feeds in the simple pie php in there

      http://css-tricks.com/video-screencasts/55-adding-rss-content-with-simplepie/

    • Jannis
      Permalink to comment#

      Thanks. I did watch that tut as well but as Chris is saying below, that one creates one object out of all feeds. I am looking for a way to separate each feed into its own object.

      Thanks though!

    • Yep, you can get multiple feeds at once (hence, “feedsmusher”), but if you wanted to get multiple feeds separately, and have them in separate locations, you can always just create multiple different SimplePie objects:

      $psdtutsfeed = new SimplePie('http://feeds2.feedburner.com/psdtuts');
          $psdtutsfeed->handle_content_type();
          for ($x = 0; $x < $psdtutsfeed->get&#95;item&#95;quantity($total&#95;articles); $x++)
          {
              $psdtutsarticles[] = $psdtutsfeed->get&#95;item($x);
          }
      
      
      $nettutsfeed = new SimplePie('http://feeds2.feedburner.com/nettuts');
      $nettutsfeed->handle&#95;content&#95;type();
      for ($x = 0; $x < $nettutsfeed->get&#95;item&#95;quantity($total&#95;articles); $x++)
      {
          $nettutsarticles[] = $nettutsfeed->get&#95;item($x);
      }
      
    • Jannis
      Permalink to comment#

      Thanks Chris, that was exactly what I was looking for.

      Now how about those Coda Clips? :)

  16. I’m trying to make a home-page for with a “Feed Smusher” on it, but I read a lot of websites. How could I add a loading image to this? I have managed to get this far:
    link text
    But it only works if:
    – time is set to 100000
    – Loading image does not re-appear on content refresh

    I am no JavaScript expert what so ever, can you suggest?
    Thanks,
    Dan

  17. Great screencast Chris.

    I’ve never used AJAX before, although I knew what is was. The code didn’t seem too complicated, and it’s been something I’ve been meaning to implement on my SimplePie powered site (using SweetCron). Unfortunately, I was unable to get it working. It would be awesome if you could do a tutorial about using AJAX with SweetCron, I know you have some experience with it – your post on Netttuts was very helpful.

    Thanks a lot!

  18. Permalink to comment#

    This is EXACTLY what I need on a site I’m working on. Chris, what do you use to embed your videos on CSS-tricks? Thanks!

  19. cjbates
    Permalink to comment#

    Nice tutorial Chris. I played around with this and thought I’d share my twist on it. I wanted new tweets to be appended to the top of the list instead of the entire list refreshing every 5 seconds. With a few more lines of code in the getFresh() function I was able to do this. You will need to add an additional div#hiddenData to your page, and you will want to hide it with CSS.

    My getFresh function loads the updated feed into the hidden div, then checks each item to see if the title matches an existing tweet that is already on the page. If not, it prepends it to the top of the list. I’m sure this could be optimized, but you get the point.

    function getFresh() {
    $("#hiddenData").load("feeder.php");
    $("#hiddenData .item").each(function() {
    item = $(this);
    append = true;
    newTweet = $(this).children("p").eq(0).text();
    $("#loadArea .item").each(function() {
    existingTweet = $(this).children("p").eq(0).text();
    if (existingTweet==newTweet) {
    append = false;
    }
    });
    if (append==true) {
    $("#loadArea").prepend(item.fadeIn("slow"));
    }
    });

    }

    • Nice work! That would nicely mimic what happens on the real Twitter search pages. You should link us up!

    • i second that! show us a link of this!

    • alfbrand
      Permalink to comment#

      Awesome Stuff!! I would love to have a peek at your feeder.php to see how you pulled in the twitter profile icons. I’ve been tinkering with the SimplePie APIs, but I’m really not that technical.

    • I would love to know how you got the twitter Icons to show up! Could you release the code?

    • cjbates
      Permalink to comment#

      Sure – to get the image to display, just add this code to your foreach loop:

      <img src="<?php echo $item->get_link(0,'image'); ?>" alt="" />

    • Shawn Wasson
      Permalink to comment#

      What I would like to do is have multiple feeds updating the way your twitter search is… I want to do this with several news websites so I can stay on top of stories. I can get two feeds up… but I’m not sure where to put the code you provided. Any suggestions?

    • Can’t seem to get this working.. Firebug shows a nice GET but there is no new data within the feeder. How did you set your cache options in the feeder.php?

  20. Permalink to comment#

    Great video Chris, really enjoyed it, going to try and create a “lifestream” type thing today.

    One question, on your Twitter feed, it never says the name of the person, whereas on Niki’s banana stream it does, how would I go about showing the person’s name?

  21. just threw one of these together to try and convince pandora.com to get my favorite artist on the site… tychomusic.landonwisely.com

    this is sweet.

  22. jwood
    Permalink to comment#

    getting a

    Warning: require_once()
    [function.require-once]: URL
    file-access is disabled in the server
    configuration in
    /home/content/w/o/o/woodj/html/newsque/wp-content/themes/newspaper/feeder.php
    on line 4

    Anyone have this also?

  23. Evan
    Permalink to comment#

    That ajaxified twitter ‘Barack Obama’ feed is hilariously great way to show someone the power of ajax (and the amount of people tweeting about Barack lol)

    Good tutorial.

  24. idoremus
    Permalink to comment#

    Chris, thanks for this tutorial it was very helpful. I have it up and working great in FF3, for some reason the feeds don’t refresh in IE7 or IE8. Do others have this same problem?

    • Paul
      Permalink to comment#

      It doesn’t work in IE because of a javascript error. What worked for me was this:

      Remove this line:

      item = $(this);

      Change this line:

      $(“#feedData”).prepend(item.fadeIn(“slow”));

      to:

      $(“#feedData”).prepend($(this).fadeIn(“slow”));

      I’m no javascript whiz, so perhaps there’s a better solution, but this seems to work.

    • Paul
      Permalink to comment#

      Sorry, I should mention that what I posted was a solution to cjbates’ modified script, I haven’t actually looked at the original code.

  25. Hey Crhis Where you upload your videos files, I Wanna now, because in some files when i click to download they just dont download, and I have to use a proxy(I think that is something about my adsl provider) u can pass-me the url of this site to try see if can I fix it?

  26. Junrel
    Permalink to comment#

    Hey Chris, is this AJAX-Refreshing doing like the NBA-refreshing(when you’re watching the NBA box score)?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".