The goal of this is to have an easy way to load Pipes content onto your site. It’s very configurable, so you can style it to look the way you need it to look and it fails gracefully - it only appears when/if Pipes returns some content. So if pipes is down or the internet is slow or the pipe returns no results, you won’t see an empty box or anything. You can see this in action on this site - look for the “who else is writing about this” links at the bottom of most posts - if you reload the homepage you can watch them appear over a couple seconds.

You can use any Yahoo Pipe with any user supplied fields and automatically places them wherever you want in whatever format you want on your web page, more or less. I used to use a php file to mirror the json return, but thanks to this page I learned about Pipes’ javascript callback feature which lets you easily pull the JSON return and do something with it. I couldn’t find any documentation on the Pipes set but looking through that code, it works simply enough - you just pass in a _callback parameter with the name of your callback function and it gets called with the JSON variable passed in as an argument.

There’s a few steps involved in getting this to work for you, but they are all pretty easy, so bear with me. Here’s the instructions:

Prep Work:

  1. Download this tar file, it contains pipes-pure.js and test.html
  2. get jquery.js from jquery.com - here is a direct link to the download.
  3. rename jquery-latest.pack.js to jquery.js

Installation:

  1. add pipes-pure.js to your document root. You need to note down the url to access it in your browser.
  2. add jquery.js to your document root. You need to note down the url to access it in your browser.
  3. in your header (or header template) somewhere in the head block add these two lines (make sure that the paths to these two files are the ones you noted down in Installation Steps 1 and 2 - not /path/to/jquery.js):
    1. <script type=”text/javascript” src=”/path/to/jquery.js”></script>
    2. <script type=”text/javascript” src=”/path/to/pipes-pure.js”></script>

That’s it for installation. Now to actually use it you need to put some html in your file. If you look in the contents of test.html you’ll see that it has in the head block the two lines from Installation Step 5 (it’s set to work with my setup - so this file will not work for you unmodified).

The easiest way to see this working is to put it in your document root after updating the two script tags so that it points to jquery.js and pipes.js as they exist on your server. Once there, you should see (after a few moments while it loads the data) two sets of links appear. First should be 2 links that relate (at least a little) to snowboarding and then 4 links that relate to jquery.

If you look at the source code you’ll see several things. The key things are in the surrounding div tags. First, each of the two surrounding div tags have a class of deasil_pipe, this is the trigger that says this is something we need to pull links for. You can leave that as is. The second thing is you’ll see a deasil_pipe attribute, in this case it says deasil_pipe=’AHaR2Y242xGwcHpiZFUMqA’ - this is the id of the pipe you are trying to access, in this case it is my technorati search pipe. You can update that so that this will reference whichever pipe you like.

Then you’ll see a couple attributes that look like deasilx_[something], in this case it’s deasilx_text and deasilx_num - text and num are the names of the two user input fields I created for the technorati search pipe. By placing these deasilx_ attributes in the div, I am going to send their values to the yahoo pipe. So, as you can see, whatever user inputs are required can simply be added to this template. You can see in the first set I send deasilx_text=”snowboarding” and deasilx_num=”2″ - so that’s why you see two links about snowboarding. In the seccond deasilx_text=”jquery” and deasilx_num=”4″ - 4 links about jquery. Easy! Right?

So, that lets you set which pipe you want to access and what fields you want to send it. Then within each surrounding div (the ones with class=”deasil_pipe”) you see some more html. Right now there’s only three magic things here - things with class deasil_pipe_item, deasil_pipe_link and deasil_pipe_title. Everything else that is text or html w/out those classes will show up untouched.

deasil_pipe_item is how we should display 1 link. So for each element that the pipe returns, this html will show up once. An “a” tag with class of deasil_pipe_link will get it’s href set to that link and a span class with class deasil_pipe_title will show up with the title within the span. All of these things can be styled as anything else, so you could give the span another class or surround it with “b” tags to make it bold, etc..

One last thing, you’ll notice that on the surrounding divs (class=”deasil_pipe”) I have set the style to display: none. This hides the whole block until we get data back from yahoo (which can be flaky at times) and so the html will only show up if we get good data back.

That’s it - it may sound like a lot of work, but it’s actually fairly easy to work with, once you get the hang of it. Please let me know if you run into any trouble or if you successfully install it somewhere!

← newer Breakfast Links  ↑  Terabyte NAS older →
Feb 19th, 2007 · Comments RSS · · · · · Tags: feature · javascript · pipes · web2.0