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.

<script src="http://pipes.yahoo.com/js/TYPE_OF_BADGE_GOES_HERE.js"> { "pipe_id" : "8ne6mC_P3BG7soL0ODY80A" //pipe id here. } </script>

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
• Edit script node properties

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.

<style> .myClass { width:180px; height:350px; background-color:#000; } .myClass h3.ybh a.ybt { color:#fff; } </style> <div class="myClass"> <script src="http://pipes.yahoo.com/js/TYPE_OF_BADGE_GOES_HERE.js"> { "pipe_id" : "8ne6mC_P3BG7soL0ODY80A", "pipe_params" : {"urlinput1": "http://sfbay.craigslist.org/search/rfs?query=&minAsk=min&maxAsk=max&hasPic=1&format=rss"}, "height" : "350px" } </script> </div>

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

<script src="http://pipes.yahoo.com/js/TYPE_OF_BADGE_GOES_HERE.js"> { "pipe_id" : "8ne6mC_P3BG7soL0ODY80A", "pipe_params" : {"urlinput1": "http://sfbay.craigslist.org/search/rfs?query=&minAsk=min&maxAsk=max&hasPic=1&format=rss"}, "width" : "400px", "height" : "400px", "backgroundColor" : "#000" } </script>

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

<div class="jhwxuvejrjkpafeo" style="width: 100%;"> <div class=""> <div class="ybx" style="visibility: visible;"> <h3 class="ybh"><a class="ybt" target="_blank" href="http://pipes.yahoo.com/pipes/pipe.info?_id=5bd39564344cffbc9c9fabbeecec1576">Apartment Near Something</a></h3> <div class="ybr" style="height: 289px;"> <li class="ybi"> <div class="pipesImgdescription"> <div class="pipesHolder"> <div class="pipesThumbnail" style="margin-right: 8px;"><img src="http://www.postlets.com/create/photos/20080116/160632_Middle1.JPG"/></div> <div style="margin-left: 0px;" class="pipesText"> <div class="pipesTitle"><a target="_blank" href="http://sfbay.craigslist.org/pen/apa/597458172.html">Beautiful, Remodeled, West Menlo Park, 2x1, Wood Floors, Fireplace (menlo park) $2295 2bd</a></div> <div class="pipesDescription">Cherisse | 650-325-2411 Middle Avenue, Menlo Park, CA 2 Bdrm Apartment $2,295/month Bedrooms 2 Bathrooms 1 full, 0 partial Sq Footage 900 Parking 1 dedicated Pet Policy No pets Deposit $500 DESCRIPTION Beautiful two bedroom 2nd floor apartment home available. Hardwood Floors in living room and dining area. Large Patio. Walking distance to park. Fantastic deal in a great location on Middle Avenue! Walk to downtown Menlo Park restaurants and stores,É</div> <ul class="pipesSmallthumb"> <li><a target="_blank" href="http://www.postlets.com/css/styles/marina/blt_features.gif"><img src="http://www.postlets.com/css/styles/marina/blt_features.gif"/></a></li> <li><a target="_blank" href="http://www.postlets.com/create/photos/20080116/160633_Middle.JPG"><img src="http://www.postlets.com/create/photos/20080116/160633_Middle.JPG"/></a></li> </ul> </div> </div> </div> </li> <li class="ybi odd"> <div class="pipesImgdescription"> <div class="pipesHolder"> <div class="pipesThumbnail"/> <div style="margin-left: 0px;" class="pipesText"> <div class="pipesTitle"><a target="_blank" href="http://sfbay.craigslist.org/pen/apa/597351882.html">Extra clean plus size studios available now! (445 E OKeefe) (east palo alto) $850 1bd</a></div> <div class="pipesDescription">These lovely studios have recently been remodeled and feature a larger divided space to create a separate "room". Building is secure with two main gates. Units are quiet and off street. Common areas include on-site laundry, fenced BBQ area and fenced play area. Move in special for qualified applicants for first month rent free! Security deposit is $850. Landlord pays water and garbage. Includes one assigned parking space. Units available immediately! Don't miss thisÉ</div> </div> </div> </div> </li> </div> </div> <div class="ybf" style="display: block;"><a class="yba" href="http://pipes.yahoo.com"/> Ê <div class="ybad">Powered by <a href="http://pipes.yahoo.com" class="ybaa">Y! Pipes</a><sup class="ybas">ª</sup></div> <a class="gt">Get This</a> <div class="gts">È</div> </div> </div> </div>

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 <script src="http://l.yimg.com/a/i/us/pps/listbadge_1.4.js"> { "pipe_id":"5bd39564344cffbc9c9fabbeecec1576", "pipe_params":{"location":"palo alto, ca","what":"parks","mindist":"10"}, "count" : 10 } </script>

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 <script src="http:http://l.yimg.com/a/i/us/pps/mapbadge_1.3.js"> { "pipe_id": "5bd39564344cffbc9c9fabbeecec1576", "pipe_params": {"location":"palo alto, ca","what":"parks","mindist":"10"}, "count" : 5 } </script>

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. <script src="http://l.yimg.com/a/i/us/pps/imagebadge_1.3.js"> { "pipe_id" : "FBSVd9uT3BGRhnfjGcevXg", "img_params" : {maxitems:10, autoscroll:true, autoscrolldelay:10} } </script>