Add the Script & Style Feed to Your Website

By  on  

Script & Style

Script & Style is a website created by myself and Chris Coyier where bloggers and developers alike submit articles about CSS, XHTML, jQuery, MooTools, and other website design and development topics. The site's popularity continues to grow due the community's enthusiasm and number of quality articles submitted on a daily basis.

I love to share knowledge on my website and the first thing I did when we got the site going was get the feed on my site so that I could share links to other quality articles. The process took only 5 minutes. Here's how you can add the Script & Style feed to your website!

Step 1: Download SimplePie

SimplePie is an outstanding feed reading PHP library which we'll use to grab, read, and cache the Script & Style feed. Click here to hit the SimplePie download page.

Step 2: The PHP Code

//get teh simplepie library
require_once('simplepie/simplepie.inc');

//grab the feed
$feed = new SimplePie('http://feeds.feedburner.com/ScriptAndStyle');

//enable caching
$feed->enable_cache(true);

//provide the caching folder
$feed->set_cache_location($_SERVER['DOCUMENT_ROOT'].'/cache');

//set the amount of seconds you want to cache the feed
$feed->set_cache_duration(1800);

//init the process
$feed->init();

//let simplepie handle the content type (atom, RSS...)
$feed->handle_content_type();

//load my own array -- i like my own arrays...
for ($x = 0; $x < $feed->get_item_quantity(15); $x++) { $items[] = $feed->get_item($x); }

//loop through each item
foreach ($items as $item)
{
	echo '<a href="',$item->get_link(),'" class="sns-link">',$item->get_title(),'</a>';
}
David Walsh Script & Style feed

Once you have SimplePie available, pull in the Script & Style feed. You'll note that you want to enable caching and provide a caching folder to keep your site efficient. Once you've gotten each item into an $items array, you simply output the XHTML which you will eventually script and style. You can see examples on my site, davidwalsh.name, and Chris Coyier's website, CSS-Tricks.com.

That's All!

Adding the Script & Style feed to your website is a piece of cake! Well, thanks to SimplePie, it's a piece of pie. Have fun styling your Script & Style site feed. Post a link to your website when you're done -- we'd love to see what you've created!

Recent Features

  • By
    39 Shirts &#8211; Leaving Mozilla

    In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell...

  • By
    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in...

Incredible Demos

  • By
    MooTools Clipboard Plugin

    The ability to place content into a user's clipboard can be extremely convenient for the user. Instead of clicking and dragging down what could be a lengthy document, the user can copy the contents of a specific area by a single click of a mouse.

  • By
    Fullscreen API

    As we move toward more true web applications, our JavaScript APIs are doing their best to keep up.  One very simple but useful new JavaScript API is the Fullscreen API.  The Fullscreen API provides a programmatic way to request fullscreen display from the user, and exit...

Discussion

  1. Bogdan Popa
    for ($x = 0; $x < $feed->get_item_quantity(15); $x++)

    I’ve never used simple pie before so I might be totally off here but wouldn’t $x < 15 be a better/faster condition in that loop (and just call $feed->get_item_quantity(15) before the loop)?

  2. I’m using simplepie at the moment for my blog-roll, but is there a way to pull multiple URLs from a MYSQL database instead of entering just one?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!