Part 1
Introduction
This 2 part tutorial will teach you how you can mashup several RSS feeds into one using Yahoo Pipes, then customize the look and feel of it with the magic of CSS.
What Is Yahoo Pipes?
Yahoo Pipes is a powerful tool that allows you to mashup RSS feeds and content from around the web. Here are just a few of the things Pipes can do:
- Create a slideshow of pictures based on keywords you specify
- Plot Craigslist real estate listings on an interactive map
- Combine your favorite RSS feeds into one
- Replace links with your own affiliate links
- Scrape web pages without knowing PHP
- Combine YouTube, Twitter and Facebook links into one giant RSS feed
- And a heckuva lot more…
Yahoo Pipes is widely used by Internet marketers for link building, auto blogging and affiliate marketing. If you find Yahoo Pipes overwhelming, check out the Pipes Tutorial, where you will be guided step by step through each module using real life examples. You’ll be a Yahoo Pipes master in no time with the Pipes Tutorial.
Ok, now down to business…
Grab A Yahoo Pipes Account
To mashup your RSS feeds with Yahoo Pipes and style them with CSS, you’ll need to register for a free account with Yahoo to begin creating and editing Pipes.
RSS Feeds Mashup Overview
In this tutorial, we are going to mashup 13 RSS feeds. from various SEO, design, copywriting, and CSS blogs. In my opinion, these are some of the best resources on the web for web design, copywriting, search engine optimization, content creation, and affiliate marketing:
The Feeds:
- A List Apart – http://www.alistapart.com/site/rss
- Copyblogger – http://feeds.copyblogger.com/copyblogger
- CSS-Tricks – http://feeds.feedburner.com/CssTricks
- David Airey, graphic designer – http://feeds.feedburner.com/CreativeDesign
- Entrepreneurs-Journey.com by Yaro Starak – http://feeds.feedburner.com/EntrepreneursJourney
- Just Creative Design – http://feeds.feedburner.com/JustCreativeDesignBlog
- New Think Tank – http://www.newthinktank.com/feed/
- Psdtuts+ – http://feeds.feedburner.com/psdtuts
- Pushing Social – http://feeds.feedburner.com/PushingSocial
- SEO Book.com – Learn. Rank. Dominate – http://www.seobook.com/rss.xml
- Smashing Magazine – http://rss1.smashingmagazine.com/feed/
- The 99 Percent – http://feeds.feedburner.com/The99Percent
- Yoast – Tweaking Websites & The WordPress Podcast – http://feeds2.feedburner.com/joostdevalk
Mashup RSS Feeds With Yahoo Pipes:
Now that we have all of our feeds, we are ready to create our Yahoo Pipe. Make sure you are logged into your Yahoo Pipes account, and click on “Create a pipe”.
Now you’ll be taken to the area where you can create your Pipe!
I’ll just briefly explain the elements of this page, so everyone who is brand new to Yahoo Pipes can follow along.
Library: The library contains all of the modules you can use to create your Pipe.
Canvas: The canvas is where you can edit your Pipe and drag and drop modules.
Debugger: The debugger is where you can see the output of your Pipe while you are working on it.
Because we are wanting to mashup our RSS feeds, we will be working with the “Fetch Feed’ module. The “Fetch Feed” module will grab the RSS feed and output the results in the Debugger pane.
First, drag and drop the “Fetch Feed” module onto the canvas.
Note: The “Pipe Output” module automatically appears when you start working on a Pipe. You will need to connect your Pipe to the “Pipe Output” when you are finished, in order for it to run!
Now Pipes wants to know the addresses of our RSS feeds. Because we have 13 feeds we are working with. We will need to hit the “+” sign next to URL, so we have enough fields for all of our RSS feeds, like so:
Now it’s time to insert our RSS feeds into our Pipe.
Copy and paste these RSS feeds into the “Fetch Feed” module:
http://www.alistapart.com/site/rss
http://feeds.copyblogger.com/copyblogger
http://feeds.feedburner.com/CssTricks
http://feeds.feedburner.com/CreativeDesign
http://feeds.feedburner.com/EntrepreneursJourney
http://feeds.feedburner.com/JustCreativeDesignBlog
http://www.newthinktank.com/feed/
http://feeds.feedburner.com/psdtuts
http://feeds.feedburner.com/PushingSocial
http://www.seobook.com/rss.xml
http://rss1.smashingmagazine.com/feed/
http://feeds.feedburner.com/The99Percent
http://feeds2.feedburner.com/joostdevalk
Like so:
Now if we click on the “Fetch Feed” module and highlight it orange like in the image above, that will make it the active module and show the results in the Debugger pane…
Pipes is showing us the output for the RSS feeds that we entered into the “Fetch Feed” module. It is displaying 8 results, + 272 more. If we drill down the triangle next to each result, we will get a whole lot more information including description, publish date, images etc., but we will save that for another tutorial.
So far we have combined our 13 RSS feeds into one “super feed”, packed with tons of great information for affiliate marketers. Before we style our RSS feed however, we are going to sort the results by date, so the newest results are on top.
Under the “Operators” category in the Library, drag and drop a “Sort” module onto the Canvas, like so:
Now before we can sort our RSS feeds by date, we need to connect our “Fetch Feed” module to the “Sort” module, by clicking on the output circle of the “Fetch Feed” module and dragging it into the input circle of the “Sort” module, like so:
Note: When you click on the output of a module, all the inputs of the available modules that you can connect it to will light up orange.
Now that we’ve connected our “Fetch Feed” module to our “Sort” module, the “Sort by” list has automatically populated with elements we can sort our feed by. Because we want to sort our RSS feed by date, we will select “item.pubDate” from the list. And sort it in “descending” order, like so:
Looking good so far! Now lets check the Debugger Pane to see if our results have changed…
Yup, they sure have! Now our results are displayed from newest to oldest so our readers can get the most up-to-date information first.
Now all we have to do, is connect our Pipe to the “Pipe Output”, save it, and run it. Then we can begin styling our Yahoo Pipe!
First connect the “Sort” module to “Pipe Output” so it looks like the picture below…
Now hit the “Save” button at the top right of the page, and give your Pipe a name…
And click the “Run Pipe” link at the top of the page to run your Pipe and view the results as a List…
Great! Now we just need to output the results to use on our website. We will do this by clicking the “Get as a Badge”. A pop window will come up and allow you to get the source code for your site. Because I want to embed this script on my WordPress site, I will select the “Wordpress” option. To get plain HTML, just select “Embed”.
Here is our source code, ready to be copy and pasted into our WordPress blog:
<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">
Here is what our Yahoo Pipe “Internet Marketing Super Feed” looks like on my WordPress blog:
Viola, our Yahoo Pipe in action!
Conclusion
In part 1 of the “How To Mashup RSS Feeds With Yahoo Pipes and Style Them With CSS” tutorial, we learned step-by-step how to combine multiple RSS feeds into one, using Yahoo Pipes. In this case, we took some very well known Internet marketing RSS feeds and combined them into one jam-packed resource. This technique is also a good way to build links for your website or create automatic content.
By default, Yahoo Pipes inherits the default style sheet of your blog/website. But for our purposes, we want to style our Yahoo Pipe using CSS so we can take full control of it and customize the look and feel. In Part 2 of this tutorial we will examine how to style our RSS feed using CSS and the custom Yahoo Pipes style sheet.
Thank you for the blog post. Brown and I have already been saving for our new e-book on this subject matter and your post has made us all to save our own money. Your thoughts really responded to all our questions. In fact, in excess of what we had thought of just before we discovered your wonderful blog. We no longer nurture doubts and also a troubled mind because you have actually attended to the needs in this article. Thanks
I have been searching for a solution to the exact problem for the longest time, this post reallty helped me!