#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. User Avatar
    nanochrome
    Permalink to comment#

    Very Cool, Simple and Cool

  2. User Avatar
    nanochrome
    Permalink to comment#

    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. User Avatar
    ZenemiG
    Permalink to comment#

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

    Nice one ;)

  4. User Avatar
    ZenemiG
    Permalink to comment#

    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. User Avatar
    Mike McMullan
    Permalink to comment#

    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. User Avatar
    Daniel Groves
    Permalink to comment#

    Hi,

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

  7. User Avatar
    Niki Brown
    Permalink to comment#

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

    • User Avatar
      Daniel Groves
      Permalink to comment#

      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. User Avatar
    Paul Randall
    Permalink to comment#

    I was just looking for something like this. Thanks!

  9. User Avatar
    ooo_o
    Permalink to comment#

    Great job!

  10. User Avatar
    Justin Sainton
    Permalink to comment#

    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. User Avatar
    cancel bubble
    Permalink to comment#

    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. User Avatar
    Elena
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Phild
    Permalink to comment#

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

  14. User Avatar
    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. User Avatar
    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!

    • User Avatar
      Niki Brown
      Permalink to comment#

      @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/

    • User Avatar
      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!

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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);
      }
      
    • User Avatar
      Jannis
      Permalink to comment#

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

      Now how about those Coda Clips? :)

  16. User Avatar
    Daniel Groves
    Permalink to comment#

    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. User Avatar
    Patrick DeVivo
    Permalink to comment#

    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. User Avatar
    Coy
    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. User Avatar
    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"));
    }
    });

    }

    • User Avatar
      Chris Coyier
      Permalink to comment#

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

    • User Avatar
      Niki Brown
      Permalink to comment#

      i second that! show us a link of this!

    • User Avatar
      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.

    • User Avatar
      Montana Flynn
      Permalink to comment#

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

    • User Avatar
      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="" />

    • User Avatar
      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?

    • User Avatar
      Jeroen

      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. User Avatar
    Jack F
    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?

    • User Avatar
      Niki Brown | The Design O'Blog
      Permalink to comment#

      Hey jack! This is how I did it:

      < ?php

      if ($author = $item->get_author())
      {
      preg_match(‘/(([^)]*))/’, $author->get_name(), $matches);
      echo ‘get_link() . ‘”>’ . $matches[1] . ‘‘;
      }

      ?>

      Just found it somewhere in the simple pie API stuff

  21. User Avatar
    landonwisely
    Permalink to comment#

    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. User Avatar
    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. User Avatar
    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. User Avatar
    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?

    • User Avatar
      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.

    • User Avatar
      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. User Avatar
    Rafael Nascimento Sampaio
    Permalink to comment#

    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. User Avatar
    Junrel
    Permalink to comment#

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

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag