Flickr for Web Developers

The example below, part of our information for web developers, describes how website owners or bloggers can reuse photos posted to the School's Flickr groups. See how we use Flickr for more details.

This is a Flickr badge for for the Flickr group called UCSF Laurel Heights. Flash is not required, but Javascript is. Copy the HTML provided and paste it into the source code for your web page to generate the same result.

To get this:

www.flickr.com

More photos in UCSF Laurel Heights

Use this code:

<noscript><p>[If your browser supports Javascript, turn it on to see photos here.]</p></noscript>
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; text-align:left; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {background-color:#ffffff;border: solid 1px #000000}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<td>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=5&display=latest&size=s&layout=h&context=in%2Fpool-ucsflaurelheights%2F&source=group&group=65421097%40N00"></script>
</td>
<td id="flickr_badge_source" valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/groups/ucsflaurelheights/pool/"><img id="flickr_badge_icon" alt="photos in UCSF Laurel Heights" src="http://farm4.static.flickr.com/3036/buddyicons/65421097@N00.jpg?1207960619" align="left" width="48" height="48" /></a></td>
<td id="flickr_badge_source_txt">More <a href="http://www.flickr.com/groups/ucsflaurelheights/pool/">photos in UCSF Laurel Heights</a></td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>

Want a badge for a different Flickr group?

Join the group you want from the list at Our Flickr Groups.
Follow the badge creation instructions at Flickr badge.

Other Examples

More Options

SlideFlickr
flickrshow
Christian Heilmann's FJB
Rudin Swagerman's BananAlbum
Still more, including APIs: Flickr Services

Questions?

Browse the Flickr FAQ.
Search Flickr Help.
Post a new topic in the FlickrHelp forum.
See Flickr (Wikipedia).
Ask Web Developer Eric Davila at davilae@pharmacy.ucsf.edu or 415/476-3845.

Go To: Flickr for Web Developers