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:
Very Cool, Simple and Cool
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.
If anyone gets this working please let me no!
I might use it to keep an updated feed on my music blog with tweets about the blog :P
Nice one ;)
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.
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.
Hi,
Excellent screencast. Been playing with this one for hours, just one quick question: How do I chnage the timezone to GMT/BST?
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.
I was just looking for something like this. Thanks!
Great job!
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!
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.
This tutorial was very informative. One question though. Do you need jquery installed on your website server or just downloaded on your operating system?
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
Cool stuff,
it’s been a while since I last checked
CSS-Tricks – design lookin nice bro
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 ?
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
https://css-tricks.com/video-screencasts/55-adding-rss-content-with-simplepie/
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:
Thanks Chris, that was exactly what I was looking for.
Now how about those Coda Clips? :)
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
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!
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!
He uses the jw flv player found here : http://www.longtailvideo.com/players/jw-flv-player/
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!
As requested: http://www.tricitymusic.net/samples/twitterajax.php
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?
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="" />
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?
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?
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
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.
getting a
Anyone have this also?
I dont have it but I’m thinking that can be the hot link protection, but I dont know.
Look here http://br2.php.net/manual/en/filesystem.configuration.php#ini.allow-url-fopen
This should be fix your error
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.
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?
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.
Sorry, I should mention that what I posted was a solution to cjbates’ modified script, I haven’t actually looked at the original code.
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?
Hey Chris, is this AJAX-Refreshing doing like the NBA-refreshing(when you’re watching the NBA box score)?
While I know this hasn’t been updated in a couple years, the current simplepie.inc no longer works with this script (the AJAX refresh doesn’t either).
I did get this script working with a couple tweaks…
First, get the latest SimplePie at http://simplepie.org/downloads/
Upload the entire uncompressed ZIP file into your “inc” folder (remove all other items inside of this folder first).
In your feeder.php, use the following line, instead:
That addresses the SimplePie issue.
Chris, can you get the ajax refresh portion working? I ended up having to do an iframe with a meta refresh (I think the javascript in this script is conflicting with http://jquery.malsup.com/cycle2/.
Also, I’ve tested this with the latest version of JQuery (3.2.1), successfully.
This is for the 8th oldest Diocese in the US, to show up on their front lobby monitor. There’s a lot going on here… but it’s worth it. :)
http://richmonddiocese.org/frontdesk/
Thanks, Chris!