Posts Tagged ‘rss’
|Selectable RSS with SimplePie and jQuery
Monday, August 17th, 2009

I was building an RSS reader for a project last week and it turned out to be a cool little app. So I thought I’d share some of the code.
Let’s start off with the HTML we need to get some user interaction with the form. It’s a pretty basic, just some of checkboxes.

HTML
<form action="" method="post" id="selection">
<h2>Choose your news sources</h2>
<!--
Setting all the checkbox names to "source[] helps us build the array on submit"
We're also adding the RSS feed url to the checkbox value so we can save it in the array values
-->
<ul>
<li><input type="checkbox" id="csskarma" name="source[]" value="http://www.csskarma.com/blog/feed/"/><label for="csskarma">CSSKarma</label></li>
<li><input type="checkbox" id="cnn" name="source[]" value="http://rss.cnn.com/rss/cnn_topstories.rss"/><label for="cnn">CNN</label></li>
<li><input type="checkbox" id="espn" name="source[]" value="http://sports-ak.espn.go.com/espn/rss/news"/><label for="espn">ESPN</label></li>
<li><input type="checkbox" id="vitamin" name="source[]" value="http://feeds.feedburner.com/vitaminmasterfeed"/><label for="vitamin">Think Vitamin</label></li>
</ul>
<!-- Setting the submit name to "btn" -->
<input type="submit" value="submit" name="btn" id="btn-submit"/>
</form>
</div><!--/#selectnews-->
The only real thing worth noting in the form code are the names of the checkboxes. We use all the same name to group them together and the [ ] helps create the array on submit. I just chose to use source[] because it made sense to me, but you can use anything as long as the names are consistent and the brackets are there. Just adjust your PHP accordingly.
SimplePie PHP
<?php
/* Get the SimplePie library */
require_once ('inc/simplepie.inc');
/* Create a new instance of SimplePie */
$feed = new SimplePie();
/* Get array */
// If the form has been submitted and the user selected news sources
if (isset ($_POST['btn']) && isset($_POST['source'])) {
// Save the array of news sources to a variable $checked
$checked = $_POST['source'];
// Pass the array of news sources through the SimplePie set_feed_url() function
$feed->set_feed_url($checked);
// Also, save this data to a cookie called "feedurls" that will expire when the browser closes
setcookie('feedurls', serialize($checked));
// If the form wasn't submitted look for the "feedurls" cookie
} else if (isset ($_COOKIE['feedurls'])) {
// If the cookie was found, pass the data through set_feed_urls()
$feed->set_feed_url(unserialize($_COOKIE['feedurls']));
}
/* Set item limit */
$feed->set_item_limit(3);
/* Enable caching */
$feed->enable_cache(true);
/* Provide the caching folder */
$feed->set_cache_location('cache');
/* Set the amount of seconds you want to cache the feed */
$feed->set_cache_duration(1800);
/* I don't know what "init" means */
$feed->init();
/* Handle the content type (atom, RSS...) */
$feed->handle_content_type();
?>
This is nothing that can’t be read in the comments, but the guts of the PHP comes in right under the “Get Array” comment. We’re checking to see if the form was submitted and the user selected news sources; if so, dump the values into SimplePie and save them to a cookie we can refer to later. The initial idea was for this to live at a pretty open place (a computer lab or something), that’s why the cookie expires on browser close.
I limited the per-feed output to 3 to keep it a little clean, but you can set that to whatever you want. It’d be pretty easy to let the user choose this as well with a select menu:
<select name="displayNumber">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
And replace $feed->set_item_limit(3); with $feed->set_item_limit($_POST['displayNumber']);. There may be some extra tweaking beyond that, but the general idea is to pass the submitted value into SimplePie.
jQuery
Now that we have the form fully functional we can layer some JavaScript on top of it to make it a little more nifty. This is using the jQuery Form Plugin. It’s the first time I’ve really used this plugin, but it’s actually pretty nice and easy to use. I had some little quirks with it, but nothing too major.
$(function() {
/* If JavaScript is active create a link to slide the form out */
$('#getform a').click(function(){
$('#selection').slideToggle('slow');
return false;
});//
/* make it look like something happened */
$('#selection, #reader').hide(); //
$('#reader').fadeIn('slow'); //
/* bind form using 'ajaxForm' */
$('#selection').ajaxForm(options);
/* Submit form via Ajax */
var options = {
target: '#rssloader',
}; //
});// End jQuery
Anyway, that’s all I have for today. It’s a pretty unpolished demo so let me know what you think, where I screwed up and if you can build on it and make it better. I’ll try to write some more soon.
Ingredient list
Tags: advanced, ajax, rss, simplepie, ui
Posted in Web Development | 6 Comments »
Where I Get My News
Friday, January 16th, 2009

This morning it occurred to me that I haven’t written a post about my RSS feeds. I’ve been meaning to for about a year now, but for whatever reason it hasn’t happened until now. I rely on my feed reader for a lot of inspiration so I feel like I should share that and maybe promote some great sites at the same time.
I Break my feeds into 2 categories: Work & Fun
Work
- 465 Berea Street
- A List Apart
- Authentic Boredom
- Cindy Li
- CSS Juice
- CSS-Tricks
- CSS3 . info
- CSS Newbie
- David Walsh
- Design View
- del.icio.us [CSS tags]
- Digg RSS search results [CSS]
- Elliot Jay Stocks
- For a Beautiful Web
- Hicks Design
- Jeff Croft
- jQuery for Designers
- Kyle Fox
- Meyerweb
- Mezzoblue
- Net Tuts
- Noupe
- Ordered List
- Pab’s Corner
- Position Absolute
- Script & Style
- Signal vs. Noise
- SimpleBits
- SitePoint
- Smashing Magazine
- Snook.ca
- Stop Design
- styl.eti.me
- TechCrunch
- Usability Post
- Vector Tuts
- Vitamin
- Web Designer Wall
- Yoast
- Zeldman
Fun
So, that’s all of them. Did I miss any big ones? Let me know if there’s some great resource we should all be reading.
Tags: rss
Posted in News, Web Development | 8 Comments »
Keeping up with the times
Friday, August 29th, 2008
Everytime you turn around there’s something new in the web to learn. Whether it be another JQuery plugin (YAJPI), a new blogging service (YABS), social networking site (YASNS) a new way to handle CSS Sprites or yet another acronym to learn (YAATL). There’s so much to do and learn about, how do we keep up?
I think most of us (the people who read this blog) keep up with the times by monitoring RSS feeds or reading books, I know that’s how I do it. But over the past few years my RSS reader has become more and more bloated. From time to time you may run through your feeds and delete the older ones, one’s that haven’t posted in a while or people who just complain about the government. But they’re all still valuable!
I try very hard to never delete an RSS feed. In fact, not too long ago I noticed that my feed menu had started to run off the page (I use Firefox to manage my RSS), so I got a bigger monitor to compensate; because you never really know where that bit of genius, that air of brilliance will come from. It could be from Eric Meyer, David Shea or from your random Swatkins blog.
I first noticed that I was neglecting my feeds when I saw 2 cycles of A List Apart and at least 10 CSS-Tricks posts/screencasts whiz past me, and that I hadn’t made a blog post in over a month (not cool with that at all). We’re all very busy at work, some more than others, but we still need to keep up with what’s happening in the industry.
Many times when I’m busy and I look at that long list of RSS feeds in front of me I just let out a :sigh: and say “I’ll just check a couple since I’m busy, and then maybe some more tomorrow when it calms down.” It had been happening a lot lately so I came to the conclusion that it’s not going to calm down, and that it’s time to get back into my old RSS groove. It’s really not that difficult to take some time out of every day for a little news reading. In fact, the ALA news days usually take the most time.
Many of us get to work, have our coffee, sit down, chat a little and before you know it, 20-30 minutes have gone by and you haven’t really “started” work yet. This is the time I use to read my news.
Not every blog/site you follow will update content on the same day. If you run through them every morning before you start your “heads-down” development/design you’ll find 1, maybe 2 sites that have made updates.
Keeping up with your RSS is really important, especially if your one of those psycho/learn everything about everything Web designer (like me
P). I find that at least checking your feeds once a day, or even every other day can save you tons of time, energy and frustration in the long run.
But that’s just me hoping that I haven’t lost too many readers because of my month off
).
How do YOU keep up with your news?
Tags: firefox, rss, time
Posted in Life, Web Development | 2 Comments »


