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
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    PHP Woot Checker &#8211; Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

  • By
    Xbox Live Gamer API

    My sharpshooter status aside, I've always been surprised upset that Microsoft has never provided an API for the vast amount of information about users, the games they play, and statistics within the games. Namely, I'd like to publicly shame every n00b I've baptized with my...

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!