Badge Any Feed with Yahoo! Pipes

The Badger uses Yahoo! Pipes and JavaScript to create Web badges out of any RSS feed. Edit colors, change feeds, pages, and headlines, and pick up your source code at the bottom of the page. Boing Boing, Lifehacker, del.icio.us, TechCrunch, Slashdot, Digg News, and ProgrammableWeb all have examples ready to look at ... if you're looking for interesting feeds, check out Technorati Search or FeedFlinger.

If The Progress Indicator is Spinning Forever And Not Loading....

The default Badger pipe is probably getting rate-limited. (Try reloading the page if it's happening right now; sometimes that clears things up temporarily.) To avoid this, and to make it much easier on the Pipes infrastructure, please clone the default pipe for your badge after you've got it up and running. This is easy; just substitute your pipe's 22-character ID for the default pipe ID in the fourth line of code.

Yahoo! Developer Network

get this for your page

Pick A Color:

Badge URLs, Headline and Other Plumbing:

Badge Headline
Page URL
Feed URL
Badge Width

Your Source Code:

<style>.badger { width:300px; border:2px solid #000; background-color:#fff; }.badger a { text-decoration:none; }.badger a:hover { text-decoration:underline; }.badger .hd { background-color:#fff; border-bottom:1px solid #000; padding:3px;}.badger .hd a { color:#000; font-weight:bold; }.badger .bd { background-color:#fff; margin:0; padding:none; font-size:92%;}.badger .bd ul { margin:0; padding:5px; list-style:none;}.badger .bd ul li { overflow:hidden; white-space:nowrap; margin:0; padding:0;}.badger .bd ul li a { color:#000;}.badger .ft { text-align:right; background-color:#fff; border-top:1px solid #000; padding:0 5px;}.badger .ft a { font-size:77%; color:#000; }</style>

Implementation Notes

To try out your badge, grab the source, drop it into your page, save, and reload. If you don't see something coming down from Pipes in your status bar, or you see JavaScript errors, recopy your source and try it again.

Once it's working, please do your best to separate your presentation, structure, and behavior layers:

If possible, the <STYLE> line should go in the head of your document. This is not a showstopper; feel free to leave it where it is.
The structure--that second line, enclosed in the the <DL> tags--should go wherever you want your badge to show up.
The <SCRIPT> tags should go as close to the end (without going outside of!) your <BODY> tag as possible. If you leave the script blocks in the middle of your page, it may hang up waiting for the content to come down from Pipes.
Have fun, and please let me know how it goes.

Post a Comment

Mike Barnard .:. 20080406093610: Hi and thanks for a great looking and useful technology. If I can get it to work! :)

I was passed the link to your site by someone on usenet, alt.html. I'm new to this so I need a little bit of hand holding. The bit I don't understand at the moment is the URL's.

I have logged on to Yahoo, made a pipe and pressed the 'publish' button and I can see a good feed. But, copying the pipes url doesn't seem to do anything on your 'badge'.

http://pipes.yahoo.com/firenews/8GbP6_wD3RGDXk_VjUnRlg seems to be the pipe I created on Yahoo under my login. (However I don't see anywhere on Yahoo that one can go to to see peoples 'published' pipes so I don't know if this URL is private or public.)

http://newsapi.bbc.co.uk/feeds/search/news+sport/fire
This is the URL of the BBC feed I am using.

And my website url is www.thermachek.com. I would like to put this feed in all my right hand columns which are created from a PHP include. How deep a URL do you need for that?

Hoping you can explain a little more please. Mike.
Kent Brewster .:. 20080312095857: Typesetter: right, this isn't going to help jump up your search engine rankings. You could do the exact same thing with PHP and inline the results; they would show in your source code, and would be seen by search engines. (Personally I'd work on creating compelling original content instead of figuring out better ways to leech from others ... but that's just me.)

LuckyCharms and Stobe: can you point me at an URL?

SeaBird: sure, you can use multiple feeds. Open up the pipe, drag in another Get Feed module, and use the Union module to join them both up into one feed.
Typesetter Maven .:. 20080312081850: AFAIK the javascript isn't search engine friendly so doesn't serve the purpose of keeping my index page fresh. Is this true? And if so is there an alternative or workaround that makes this SEO friendly?

Cheers - JoC
LuckyCharms72 .:. 20080307201256: I've made a pipe but am completely confused about how to get it on my website.
The pipe URL is http://pipes.yahoo.com/pipes/pipe.info?_id=b690845a99a7325384b72e75b666e2b8
I've tried creating a badge with this as the Page URL and Feed URL but I am obviously doing something wrong. Just the banner shows up. Any help for a newbie is appreciated. Thanks.
SeaBird .:. 20080307133257: This is awesome! A couple of questions - is there anyway to incporate feeds from more than one site? And can i chagne the appearance of the font in the feed? Thanks!!
stobe .:. 20080303121049: the last line of original generated code again: http://pipes.yahoo.com/pipes/Bu8sIkUH3BGA6wD_CB2yXQ/run?_render=json&_callback=KENTBREW_08bc.badger.pingFeed&s=...
stobe .:. 20080303120841: This badge is great! My blog just will not show the feed items. I'm trying to get my private for:stobe del.icio.us links to show in the sidebar of my blog. I cloned your pipe and it works in yahoo.pipes: http://pipes.yahoo.com/pipes/pipe.info?_id=44cccb9fc79b85bb1610fb8ed4067348

I changed the id I got from your generator to match my clones (longer)id. Here's the last line of the generated code:
Kent Brewster .:. 20080115083753: Cool, you're welcome. Can I see where you're using it, please? Always curious....
Wolf .:. 20080114212506: WOW! Thanks you saved my day!
Kent Brewster .:. 20080107181243: Stephanie: doesn't it? Good for you!

Paul: okay, I see your pipe. It's got quite a few sources, so it took a long time to run the first time I tried it; you might want to cut it down a bit. If I have time in the near future I will pull together a quick tutorial for using the Badger with custom pipes; the exact same advice I gave Stephanie should work for you in the meantime, however.

Instead of calling Pipes twice, take your custom pipe, tell it you want JSON instead of RSS, wrap it in a callback, and send the result straight back to your badge. To do this, change the script source on the very last line, so it looks like this:

http://pipes.yahoo.com/pipes/pipe.run?
_id=OHNs7xT82xGj4FoLlfXiAA
&_render=json
&_callback=KENTBREW_ABCD.badger.pingFeed

IMPORTANT: all of this has to go on ONE LINE with NO SPACES, and you MUST change the four letters after KENTBREW_ -- which are currently set to KENTBREW_ABCD -- to match the four characters that the Badger gave you for your main object when you created your badge.
Paul Kelly .:. 20080104021439: Hi Kent
Pipe URL: http://pipes.yahoo.com/pipes/pipe.info?_id=OHNs7xT82xGj4FoLlfXiAA
I don't have a website running right now, but I've setup up a site in dreamweaver called www.paul12.com At the moment I don't have an ftp server setup for that site. I take it that I would need one, and if so, which server technology should I use to make use of RSS feeds? I hope to use mashed up RSS feeds in my news website that link directly the articles on other news websites.
Stephanie .:. 20080103151008: Wait, I figured it out!! YAY!! It feels so good when you figure something out. :)
Stephanie .:. 20080103145229: Thanks Kent. I realize I'm moving to the varsity level now, lol. I'm still a but lost, and that is frustrating me to no end! Where do I put the code you listed below?
Kent Brewster .:. 20080102110553: Hi, Paul. May I have an URL, please? Can't tell what's going on if I can't see it. :)

Two recommendations: ditch Dreamweaver and use a text editor--such as TextPad--for your development needs. And as I said to Stephanie below, you should paste the page you want your users to see into Page URL, not your Pipes page.
Paul Kelly .:. 20080101053721: Hi Kent, i pasted the badge into dreamweaver. When i test it the badge is visible,and the heading is "SA NEWS". When I click on that it links me back to Yahoo Pipes where the custom feed is. I was expecting, correct if I'm wrong, but for the feeds to appear in Dreamweaver automatically under the heading of SA NEWS, so if I clicked on it, or rolled over, the feeds would appear on my website, and link directly to the articles on those websites. Very new to this, any help would be much appreciated. Just so you know Im testing the waters to develop a South African news website, very RSS reliant, hopefully via Yahoo Pipes and RSS Dreamfeeder.
Kent Brewster .:. 20071231083731: Hi, Stephanie. You're building a custom pipe to power your badge, which is what the karate instructors call "an advanced move." :)

Instead of calling Pipes twice, take your custom pipe, tell it you want JSON instead of RSS, wrap it in a callback, and send the result straight back to your badge. To do this, change the script source on the very last line, so it looks like this:

http://pipes.yahoo.com/pipes/pipe.run?
_id=mi5Npzm33BGDpy_tAsqenA
&_render=json
&_callback=KENTBREW_ABCD.badger.pingFeed

IMPORTANT: all of this has to go on ONE LINE with NO SPACES, and you MUST change the four letters after KENTBREW_ -- which are currently set to KENTBREW_ABCD -- to match the four characters that the Badger gave you for your main object when you created your badge.

Also a suggestion: Unless I'm missing something, you want them to come to your page--not the Pipes editor--when they click your headline. In the Page URL blank, put http://www.flourishbaby.com, not the link to your pipe.

Really great to see the Badger working some custom pipes! Carry on!
Stephanie .:. 20071230174120: What am I doing wrong? I'm inserting the pipe page URL (http://pipes.yahoo.com/pipes/pipe.edit?_id=mi5Npzm33BGDpy_tAsqenA) and the RSS feed url (http://pipes.yahoo.com/pipes/pipe.run?_id=mi5Npzm33BGDpy_tAsqenA&_render=rss) and it's not working?
Kent Brewster .:. 20071226143109: Sorry, took a couple days off for solstice-related activities ... instead of _render=rss, you need _render=json, and you will also need _callback=KENTBREW_abcd.badger.pingFeed, or whatever your callback function is named. The badge won't work if the return from Pipes isn't in JSON format, wrapped in a callback function.

If you just want to change feeds, why not start from scratch with the form on this page? This worked for me.
Dennis .:. 20071223133345: http://pipes.yahoo.com/pipes/pipe.run?_id=6d903d30d7bb6be166530342c294221d&_render=rss&s=http%3A%2F%2Fpipes.yahoo.com%2Fpipes%2Fpipe.run%3F_id%3De581a1f0f42aabfc46cc8e5377ebf21a%26_render%3Drss

This is the feed address as saved in my browser as a feed. The last link came from the pipes page.
Dennis .:. 20071223131125: http://pipes.yahoo.com/dbsnova/6d903d30d7bb6be166530342c294221d

Still having ID problems. It looks like they changed the ID method. Not sure. How do I use this, or what part of it belongs in your code? I changed websites and feeds.
Dennis .:. 20071223114505: Thank You, I really like your work. I'm still having issues with ID numbers. Some are more than 22 characters and they don't seem to work. There must be a secret here. please share. I am trying to modify the badge to a different site. I noticed that your code has JSON in the final URL. My new site has RSS, XML. Could that be the problem?
Kent Brewster .:. 20071222190538: Looks great, Dennis. I like the way you centered up the post titles!
Dennis .:. 20071222121021: I think I got it...
Dennis .:. 20071221165301: Coolest Badge ever, Yhank you. ??? I know this is begginer stuff but where do I find the yahoo pipe ID? I'm using the blog URL (http://jewelsofawe.ning.com/profiles/blog/show?id=1772423%3ABlogPost%3A353) and it works but I would like to complete the task and put in the correct ID. The ID shown in the URL is more than 22 characters.
Thanks
Kent Brewster .:. 20071211174017: Hi, Shane. Sorry, looks like my quasi-broken post form has (again) misbehaved. Yes, once you get your badge working, you should substitute your new pipe's URL for the default pipe. Mine looks like this:

http://pipes.yahoo.com/pipes/Bu8sIkUH3BGA6wD_CB2yXQ/

Yours will have a different stream of gibberish after the "pipes" portion of the URL. This is your pipe's unique ID, which you should use.
shane o .:. 20071211172249: Hi Kent,

Great Pipe. I have got it working with your pipe but when i clone it and try to get it working with my cloned pipe i get a blank list. When you say change the pipe id i assume your taking about the pipe url id here "
humanform .:. 20071211164417: Worked great. Thanks again, Kent!
Kent Brewster .:. 20071204152815: Aha. My bad; the silly post form was swallowing the plus-signs. Let's try this again:

Where you see this:

for (var i = 0; i < feed.value.items.length; i++ )

substitute this:

var myCount = feed.value.items.length;
if (myCount > 5) { myCount = 5; }
for (var i = 0; i < myCount; i++ )

Sorry about that!
humanform .:. 20071203090832: Thanks for your quick response Kent. When I substitute the code you gave, the progress indicator keeps spinning and never loads. Here's a section of the code--am I missing a bracket or parenthesis somewhere?:

if(feed.value.items.length)var myCount = feed.value.items.length;
if (myCount > 5) { myCount = 5; }
for (var i = 0; i < myCount; i ){var li=document.createElement("li");

Thanks!
Kent Brewster .:. 20071130141056: Rawbs: please try editing your HTML with textpad, or some other plain text editor. I've had very bad luck with Dreamweaver; it tries to "do what I mean" and fails. Are you using Firefox? If so, are you using Firebug? If so, are you seeing any JavaScript errors go by?

Humanform: thanks for the nice words. Yes, you can change the number of items displayed. Where you see this:

for (var i = 0; i < feed.value.items.length; i )

substitute this:

var myCount = feed.value.items.length;
if (myCount > 5) { myCount = 5; }
for (var i = 0; i < myCount; i )

This will check to be sure you have at least five items, cut it off at five if so, and show all of them if not. Hope this helps; thanks again for using the Badger!
humanform .:. 20071130064610: Hi Kent,
Your badger is great. I would like to know if there is a way to limit the number of news feeds it pulls. For instance, I would like my badger to display only the first five 5 articles from a page that has 20.
Thanks for your help.
rawbs .:. 20071126091509: Hey there..... Last night I put the badger feed code into dreamweaver and it was working perfectly in Firefox. Today I opened my index page in firefox and safari and the feed wasnt producing any results both in the technorati search engine and my html page. The rss window still shows up but doesnt produce any link results, and last night it was working perfectly....please help :-(
Kent Brewster .:. 20071126091509: Sorry, I'd need to see the code to figure it out. Could you please copy and paste the link that shows under "get this for your page" into another comment?
Rawbs .:. 20071126091509: get this for your page (this is one of my six links not working)
Kent Brewster .:. 20071126091509: Okay, here's what Pipes is giving back for your query:

KENTBREW.badger.pingFeed( {
"count":0,
"value": {
"title":"Badger2: http:\/\/kentbrewster.com\/badger",
"description":"Pipes output",
"link":"http:\/\/pipes.yahoo.com\/pipes\/pipe.info?_id=Bu8sIkUH3BGA6wD_CB2yXQ",
"pubDate":"Thu, 27 Sep 2007 19:53:28 PDT",
"generator":"http:\/\/pipes.yahoo.com\/pipes\/",
"callback":"KENTBREW.badger.pingFeed",
"items":[]
}
})

Since the items[] object is empty, this says to me that the problem is with your pipe, not your badge. If this is your query:

http://feeds.technorati.com/search/evermore/band/language=x3den

... please take a look at it. I'm not seeing any results.
Rawbs .:. 20071126091509: The feed is coming from technorati, the search engine is producing the results I want in technorati but as soon as I paste the url and feed link into badger and badgify....the feed returns nothing.....there is something blocking the feed coming from technorati. I managed to get it right the other night and it was working fine but the next day the feed wasnt coming through. When I click on the header in my badge "evermore hot list" it takes me to the very feed I am looking for in a new window in technorati. I have tried to recopy and repaste the url and rss link from technorati but it shows nothing in the badge. I tried another site www.topix.com and it worked perfectly when I badgify....thanks for your time
Rawbs .:. 20071126091509: In my Igoogle page I added the feed but it says "information temporarily unavailable"
Kent Brewster .:. 20071126091509: Yes, agreed: sounds like something's up with the feed. Exactly what are you searching for, please?
Rawbs .:. 20071126091509: I am searching for information on 6 rock bands......gig guides, and any other information relating to them. The bands are Evermore, Powderfinger, goo goo dolls, Eskimo Joe, Snow Patrol and Prime Circle - (Prime Circle is a South African band.) Its a pity....technorati supplied good information.....frustrating the feed is not working :-(
Kent Brewster .:. 20071126091509: Sounds like you want to build a custom pipe. Here's a start:

http://pipes.yahoo.com/pipes/pipe.run?_id=Ej__pt9t3BGKfcRJ8ivLAg

It needs another union for the sixth band. Also, the searches aren't totally solid, especially the one for Evermore, which I've tried to restrict to entertainment sources from New Zealand.

Once you're happy that the pipe works, you ought to be able to drop the id (Ej__pt9t3BGKfcRJ8ivLAg) into your badge's source and have it run. If you publish this in public, please remove the "get this" link, or change it to a page on your domain explaining how you did it.
Rawbs .:. 20071126091509: Please advise to the below comment......I dont fully understand the process.....I am pretty new at this :-/

Thanks
Kent Brewster .:. 20071126091509: In your page source, substitute this:

Ej__pt9t3BGKfcRJ8ivLAg

... for your current pipe ID. Run it, and see if it works.
Kent Brewster .:. 20071115125403: Joe: looks like Feedfire isn't being refreshed. The feed Pipes is grabbing:

http://www.feedfire.com/site/rss.cgi?ChanContentId=023135

... does not match the current output here:

http://backwebs.homenetinc.com/breseechevrolet/browse2.asp?param_new-used=used
Joe .:. 20071115115533: Kent,
I see that the output: http://www.new-traffic.com/rssfeed.htm is not current. The source page is: http://backwebs.homenetinc.com/breseechevrolet/browse2.asp?param_new-used=used

It looks as if the The output page captured the source page once and does not refresh.

Clueless in Syracuse,
Joe
Joe .:. 20071115112823: Yes Kent, after my post I split up the code (as per your instructions above) and it worked wonderfully!

Many thnx!
Joe
Kent Brewster .:. 20071108223746: Thanks for the kind words, Joe. Both URLs you posted seems to be working ... are you seeing this too?
Joe .:. 20071108110217: Hi Kent,
Love your work.
I made a blog for my fiancee' and would love to use your badge to automatically feed inventory to it.

I got it to work on a blank page: http://www.new-traffic.com/rssfeed.htm

But, when I post it to her Blog: http://usedcarqueen.com/new-arrivals/ it looks like it stalls and can't connect to pipes.

I believe the solution is in your description "... If you leave the script blocks in the middle of your page, it may hang up waiting for the content to come down from Pipes."

If this is the problem, where do you think I should drop the script ? Into the footer.php, the style.css?

Thnx,
Joe
Kent Brewster .:. 20071108081356: Glad to hear it, Becky. Please let me know if it breaks again.
Becky .:. 20071107170755: Thank you for looking into it. It seems to be working now so maybe I prematurely posted the problem or the authorities fixed whatever it was they weren't liking.

Love the badge! It's a great addition to my site...
Kent Brewster .:. 20071107110933: Okay, that's officially weird. Pipes doesn't seem to like your feed for some reason; everything else I've checked seems to work fine. I've alerted the proper authorities ... if they can't figure out what's up with Pipes, I'll look into your output again and see if I can't do a one-off badge for you. Sorry for the trouble!

Badge Any Feed with Yahoo! Pipes .:. kentbrewster.com