PipeJax - the Yahoo Pipes to AJAX bridge

UPDATE! Thanks to kentbrewster.com for showing me the Yahoo Pipes callback feature. With this I was able to write the php mirror file out of the system and have it work purely in js. Please see my latest post with the pure js implementation.

http://comments.deasil.com/2007/02/19/pipejax-pure-javascript-version-yahoo-pipes-to-ajax-bridge/

Ok, so I took some moments to rewrite what I had been using to build the “who else is writing about this” links into something more generic. It now let’s you 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.

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 pipe.php, pipes.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 pipe.php into your document root. You need to note down the url to access it in your browser.
2. modify pipes.js - In that file you will see a line that looks like this:
   • $.getJSON( “/wp-content/pipe.php”,
   • change the part that says “/wp-content/pipe.php” to whatever the url you used for Installation Step 1 above. Something like this:
   • $.getJSON( “/new/path/to/pipe.php”,
3. add the newly modified pipes.js to your document root. You need to note down the url to access it in your browser.
4. add jquery.js to your document root. You need to note down the url to access it in your browser.
5. 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 3 and 4 - not /path/to/jquery.js):
   1. <script type=”text/javascript” src=”/path/to/jquery.js”></script>
   2. <script type=”text/javascript” src=”/path/to/similar.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 Terabyte NAS  ↑  Breakfast Links older →