Sign In with your Yahoo! ID or Join Now

What is a Yahoo! Pipes badge?

A Yahoo! Pipes badge allows you to have Pipes generated content on your blog, website or social network.

What kind of badges are available?

Currently there are 3 badges. All badges can be configured by color, size, and number of items. There are some badge specific configurations.

  • List badge
    • A simple list of items.
    • If the feed includes a description field, a description will be displayed.
    • If the feed includes images or thumbnails, these will be displayed.
  • Image badge
    • A slide show of images, *IF* images are present on the feed.
    • Images of the feed are displayed in thumbnail fashion on the bottom of the badge.
    • If the feed includes a description field, a description will be displayed on mouseover of the image.
    • Configureable to auto play, auto play delay time and number of items.
  • Map badge
    • If geo coding is present in the feed, a dragable map will be displayed with pinpoints of the items.
    • Clicking on a pinpoint will display an information bubble with a title, description and images if present.

How do I add the badge to my page?

You can add the badge automatically to your blogger, typepad or igoogle page, by using our "Get This" wizard. If you use wordpress or want to just add the badge to your webpage, copy and paste the script as shown below.

Are there any limitations of the badge?

Badges are best viewed with A-grade browsers. Also some sites will not accept <script> nodes as content (ie. MySpace). The maximum number of items a badge may show is 50. Unpublished pipes will not have the "Get This" link and backlink to the Pipes page in the header on badges.

How do I style my badge?

Surround badge with a div tag

Examples

The easiest way of styling a badge is to surround the script badge code with a div tag and assign a class to it. The badge will inherit most properites of the parent div tag you surround it with. Any property that is not inherited must be changed in the script node. Height for example, is not inherited and must be changed in the script node properties as shown below. You can also override our css names to customize the badge even further.

Edit script node properties

Examples

You can also add properties to the script node and change various parameters defined below.
Note: "pipe_id" is required for all badges and "pipe_params" is in json format and is generated by the wizard. The last property in the script node should not have a trailing ",".

Property (all are optional) Value (all values are strings)
position: defaults to: inherit
top: defaults to: inherit
left: defaults to: inherit
width: defaults to: inherit
height: defaults to: 300px
backgroundColor: defaults to: inherit
border: defaults to: inherit
font: defaults to: inherit
margin: defaults to: inherit
padding: defaults to: inherit
headlineColor: defaults to: inherit
hideHeader set to : true/false
headerBackgroundColor: defaults to: inherit
descriptionColor: defaults to: inherit
evenBackgroundColor: defaults to: #fff
oddBackgroundColor: defaults to: #f6f6f6

Rendered badge HTML structure with class names

Below are sample examples of what the script node generates after it is run. When run, the script node replaces it self with HTML. The class name of the parent div is uniquely generated each time. This is done so the badge does not contaminate existing CSS styles. You can also use firebug to inspect the html of other badges after the page has rendered.

List badge HTML structure

Badge specific parameters

List badge

Property Value Notes
count: defaults to: 25 items do not treat the number as a string, don't use quotes to surround this value.

example of 10 items in a list badge

Map badge

Property Value Notes
count: defaults to: all items do not treat the number as a string, don't use quotes to surround this value.

example of 5 items in a map badge

Image badge

Property Value Notes
img_params: defaults to: {maxitems:0, autoscroll:true, autoscrolldelay:5} maxitems is the number of items to display. value 0 shows all images.
autoscroll is defaulted to true.
autoscrolldelay is defaulted to 5 seconds.

example of 10 items in a image badge, with autoscroll and with a delay of 10 seconds.

Copyright © 2014 Yahoo! Inc. All rights reserved.