Flickr Badge in Flash

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 the Flickr group called UCSF Parnassus. This badge requires Flash. Copy the HTML provided and paste it into the source code for your web page to generate the same result.

To get this:	Use this code:
www.flickr.com This is a Flickr badge showing public photos from the UCSF Parnassus group pool. Make your own badge here.	<!-- Start of Flickr Badge --> <noscript><p>[If your browser supports Javascript, turn it on to see photos here.]</p></noscript> <style type="text/css"> .zg_div {margin:0px 5px 5px 0px; width:117px;} .zg_div_inner {border: solid 1px #000000; background-color:#ffffff; color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;} .zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;} </style> <script type="text/javascript"> zg_insert_badge = function() { var zg_bg_color = 'ffffff'; var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_context=in%2Fpool-ucsfparnassus%2F&zg_group_id=24671294%40N00'; document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"></iframe>'); if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge_new.gne" style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">what is this?</a></div>'); } zg_toggleWhat = function() { document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block'; document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block'; return false; } </script> <div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br> <script type="text/javascript">zg_insert_badge();</script> <div id="zg_whatdiv">This is a Flickr badge showing public photos from the <a href="http://www.flickr.com/groups/24671294@N00/pool/">UCSF Parnassus group pool</a>. Make your own badge <a href="http://www.flickr.com/badge_new.gne">here</a>.</div> <script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script> </div> </div> <!-- End of Flickr Badge -->

To get this:

Use this code:

www.flickr.com

This is a Flickr badge showing public photos from the UCSF Parnassus group pool. Make your own badge here.

<noscript><p>[If your browser supports Javascript, turn it on to see photos here.]</p></noscript>
<style type="text/css">
.zg_div {margin:0px 5px 5px 0px; width:117px;}
.zg_div_inner {border: solid 1px #000000; background-color:#ffffff;  color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}
.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}
</style>
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_context=in%2Fpool-ucsfparnassus%2F&zg_group_id=24671294%40N00';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"></iframe>');
if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge_new.gne"	style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">what is this?</a></div>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>
<div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br>
<script type="text/javascript">zg_insert_badge();</script>
<div id="zg_whatdiv">This is a Flickr badge showing public photos from the <a href="http://www.flickr.com/groups/24671294@N00/pool/">UCSF Parnassus group pool</a>. Make your own badge <a href="http://www.flickr.com/badge_new.gne">here</a>.</div>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
</div>
</div>

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