I wrote the Yahoo Pipes Tutorial out of a need for me to learn Yahoo Pipes. My goal for one of my side projects was to scrape a web page, but I knew I needed to learn PHP for this to happen. I had a general knowledge of how PHP worked, and could customize WordPress templates by adding, deleting and editing snippets of code, but there was no way I’d be able to write an entire script. Because I was lazy, I searched for other alternatives to reach my goal. I came across Yahoo Pipes and couldn’t believe what it could do after I experimented with it. In a short amount of time, I saw how much potential Yahoo Pipes offered and knew I had to conquer it. I was amazed that complicated programming tasks (to me), could be done using a WYSIWYG editor and be outputted to a number of web apps, and a variety of formats including RSS, HTML, and PHP.

Feeling Discouraged and Stupid

Putting my lazy attitude away, I was committed to learning everything there was to know about Yahoo Pipes, so I sat down and started taking notes from the official Yahoo Pipes documentation. I was very confident that I could learn Yahoo Pipes in no time, and had the will to learn – which wasn’t the case with PHP. As I started taking notes, I quickly found out that the official Pipes documentation was written BY programmers FOR programmers. It used terminology and examples that assumed I had previous programming experience. Long story short – that pissed me off. With the confusing and bland information offered in the official documentation, I felt like I would have been better off learning PHP. I scoured the Internet for other resources on Yahoo Pipes and came across a couple YouTube videos and blog posts, but they only explained the most basic modules of Yahoo Pipes, like the Fetch Page module. There was no complete resource for people like me, who:

• Use the Internet everyday
• Are familiar with PHP, but not actually a programmer
• Are familiar with affiliate links, RSS feeds, web apps, social networking etc.
• Want to scrape web pages, automate content, and profit from affiliate links with little effort

Eureka!

Enter Pipes Tutorial.

I figured if I’m going to put this much time and effort into learning Yahoo Pipes, making my examples, and taking all these screenshots for my own little guidebook, I’m not going let those resources sit idle on my computer. I’m going to publish an guide and help other people with the same problem!

Yep, You Can Learn Yahoo Pipes Too

Now the Pipes Tutorial is currently the most complete and easy to follow guide on the web to learn Yahoo Pipes. All in one place, every module is tackled, with real life examples and step-by-step screenshots to help the not-so-programmers learn Yahoo Pipes, so they can start using it for things like:

• Mashing up content from around the web
• Scraping web pages
• Automatically insert relevant pictures into blog posts
• Viewing Craigslist ads on interactive maps
• Creating forms and “mini programs”
• Combining multiple RSS feeds into one “superfeed”
• And whatever else sparks the imagination

Welcome to part 2 of this 2-Part tutorial where we learn how to mashup RSS feeds with Yahoo Pipes and style them with CSS. If you haven’t already, you can check out Part 1 of this tutorial here.

By default, Yahoo Pipes inherits the CSS stylesheet from your website. But in this tutorial, we are going to dive deep and take a close look at the CSS stylesheet for the Yahoo Pipe so we can completely customize it to the max. We will examine each “div” and what CSS properties it controls for the Yahoo Pipe.

Yahoo Pipes Badge Documentation

The Yahoo Pipes badge documentation is a good start for styling your Pipe, but it uses inline styling. Instead, we are going to edit the direct CSS sheet that controls all the elements of a Pipe in this tutorial.

Yahoo Pipes RSS Mashup

We are going to be working on the CSS stylesheet for our “Internet Marketing Super Feed” Yahoo Pipe that we created in Part 1 of this tutorial. Here is the code for it:

<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">
{"pipe_id":"8cf4202441470398ea665ec175e73c6c",
"_btype":"list"}</script>

Download The Yahoo Pipes CSS Stylesheet

To start, you’ll have to download the CSS stylesheet for Yahoo Pipes here. There are two versions available:

The first stylesheet is for users who are new to CSS – CSS Rookies. This stylesheet includes comments beside every CSS class and property.

The second stylesheet is for advanced CSS users – CSS All-Stars. This stylesheet only includes comments beside the classes.

Setup Your Yahoo Pipes Stylesheet

1. Download the CSS Stylesheet above.

2. Create a blank HTML page in the same folder as your CSS stylesheet.

3. Add a link to the stylesheet in the header section like so:

<link href="pipesstyle_ENTER_VERSION.css"
rel="stylesheet" type="text/css">

4. Add the Yahoo Pipes script to the body of the page like so:

<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">
{"pipe_id":"8cf4202441470398ea665ec175e73c6c",
"_btype":"list"}</script>

5. Surround the entire script with the div “pipestyle” like so:

<div class=pipesstyle”>
<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">
{"pipe_id":"8cf4202441470398ea665ec175e73c6c",
"_btype":"list"}</script>
</div>

That’s it! You’re ready to begin styling your RSS feeds with Yahoo Pipes and CSS!

Examining The CSS Code For Yahoo Pipes

Note: For whatever reason, there seems to be a bug with the “height” property for Yahoo Pipes. The only I way I found to override this was to use inline styling like this:

<script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js">
{"pipe_id":"8cf4202441470398ea665ec175e73c6c",
"_btype":"list",
"height" : "500px"
}</script>

Conclusion:

In this 2 Part Tutorial, we learned how to create an RSS mashup with Yahoo Pipes in Part 1, and style it using CSS in Part 2. Now your Yahoo Pipe can take on a whole new life of its own without being restricted to your normal stylsheet. I hope you enjoyed this lesson from the Pipes Tutorial!

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.

If you want to leave feedback about this website or have any questions, please contact me.

Thank you again, and happy Yahoo Pipe building!

BabelFish – A language translation service – has been replaced by the “Translate” module.

Content Analysis Module – Analyzes each item in an RSS feed and picks out the most important words – has been replaced by the “Term Extractor” module.

For Each: Annotate Module – Merges data from two separate feeds – has been replaced by the “Loop” module.

For Each: Replace Module – A sub module that performs actions on each item in an input feed – has been replaced by the “Loop” module.

In Yahoo Pipes, the Simple Math Module is a calculator that can do:

• Addition
• Subtraction
• Multiplication
• Division
• Modulo (the remainder of division of one number by another)
• Powers (the product obtained by multiplying a quantity by itself one or more times)

Numbers can be wired in from other modules or entered directly.

This module has many uses. It can be used to show a certain amount of results in a feed, adding or subtracting dates and times, performing calculations on inputted data, and more.

In this example lets pretend we are selling tickets on the popular site Stubhub. Now Stubhub charges a 15% fee for every ticket that sells on their site. So with the Simple Math Module we can calculate how much commission will be taken off. (I realize this can be done with a plain old calculator, but the beauty of Yahoo Pipes is that we can take this calculation and perform even more actions on it to create a highly functional Pipe).

Tip! The Number Module will not except characters beside 0-9. No $, or any other characters allowed.

Lets use a Number Input Module to input the price of our tickets we want to sell.

And wire it into the Simple Math Module to perform our calculation. Because we want to calculate 15% of our ticket price (285) we’ll multiply it by 0.15. We can use the dropdown list to select our mathematical function we want to use.

As you can see, Stubhub will charge us $42.75 to sell our ticket. Yikes! Now if we wanted to, we could take this number and process it further with different modules.

The Location Builder Module in Yahoo Pipes converts a description of a place into geographical data for further processing. It recognizes:

• Addresses
• Zip codes
• Airport codes
• City names
• Country names
• US cities
• State names

It outputs a location structure with separate fields for:

• City
• State
• Country
• Latitude
• Longitude

This module is very helpful for plotting locations on an interactive map.

In this example, lets use a Text Input Module to enter “Madison square garden”

…and see if the Location Builder Module can pick up any geodata for that location.

As you can see, the Location Builder Module picked it up and provided us with some detailed geodata It gave us the:

• Country
• Street
• Latitude
• Postal/zip code
• State
• Ciy
• Longitude
• Quality score

We can use this info to plot the point on an interactive map or use it for further processing.

This module formats a date-time value. News feeds format their dates and times in different ways. Sometimes you need to format the different dates and times to match the same format. This is where the Date Formatter Module in Yahoo Pipes comes in handy.

A wide range of date-time formats called “specifiers” are available. The specifiers all begin with a percent sign followed by a character. These specifiers are what Yahoo Pipes uses to determine the date-time format. If you are familiar with PHP, you’ll recognize that the same specifiers are used there too.

The Date Formatter Module formats dates unlike the Date Builder Module that creates dates.

Lets take a look at a quick example by wiring in the date “March 8, 2010” through a Text Input Module and change it to the date-time format of “03/08/10”. We’re going to use the specifier “%D” to accomplish this.

with the Date Builder Module and specifier %D becomes…

This table outlines some of the common specifiers and their date-time output for the date-time March, 8 2010 2:00pm:

View the complete Date Specifiers Chart.

In Yahoo Pipes, the Date Builder module converts a text string into a date-time value. You can use the drop-down calendar to select a date, type one in, or wire one in from another module like the Text Input module.

This module is useful when you need to extract items from a feed by date.

The Date Builder Module can even understand specifiers such as: tomorrow, yesterday or 5 minutes ago (check the Date Specifiers Chart at the end of this section for more).

One important thing to note is that the Date Builder Module runs off UTC time.
Definition: Coordinated Universal Time (UTC) is a time standard based on International Atomic Time with leap seconds added at irregular intervals to compensate for the Earth’s slowing rotation.

Yikes. You probably didn’t need that in depth of a definition for our purposes, but it’s important to note what time zone Yahoo Pipes operates off of so you can base your time and date calculations accordingly.

Lets try a quick example by selecting a date from the drop down calendar…

…and see what results we get in the Debugger pane:

As you can see above, our date of “March 8, 2010” is broken down into different attributes:

• Hour
• Timezone
• Second
• Month
• Minute
• Utime
• Day
• Day_of_week
• Year

Now all of those are self explanatory except utime. Utime is the number of seconds that have passed since midnight UTC on January 1, 1970. Times before that are represented as negative values.

We can also wire a date or specifier in from a Text Input Module. If we wire in the specifier “yesterday”, the Date Builder Module will return that exact date and time.

The Date Builder Module is great for manipulating dates and times.

The Private String Module is used when you need to input sensitive data into your Yahoo Pipe, such as passwords, usernames or codes that you don’t want to share with others.

Private String values are only showed to the creator of the Pipe and can’t be copied. It’s a secure way to hide your data.

The private string will be hidden to other viewers (anyone but the author) in source view, and while the Yahoo Pipe is being run, but it will still be used.

In this example, we’ll use a fake phone number: “604-555-1278”. All we need to do is type it in the Private String Module.

We’ll be able to see the text string because we’re the owner of the Pipe, but if any one else tries to view it, it will look like this: