Zen-Dreams

You own a flickr account and would love to integrate a gallery on your website, might it be into the sidebar or directly into a page. Here is a tutorial to show you how to proceed.

First, you must connect to your Flickr account, and then go to this address (I can’t remember the complete path to go there).

Then, Flickr will give you two options for the generated module. The first one is a pure HTML one, which will allow you to share your pictures to anyone. The second module is Flash based and will give you users a better visual experience but may not be compatible with everybody’s browser (for exemple, iPhone still doesn’t support Flash).

Once you choose the module type, you are given the opportunity to define the content displayed. Your pictures, depending on an album/set/tag or not (meaning that any of your public photo will be displayed), a group you are member of (selection via tag or not) or even any public photo (tagged or not).

After you choose this, you will be asked to define the way your “badge” will be displayed. I’ll show HTML options as there are more choices:

And finally, you will set another group of options then you’ll be able to grab the code to insert into your sidebar/page.

This should look like this:

<!-- Start of Flickr Badge -->
<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_badge_uber_wrapper {width:150px;}
#flickr_www {display:block; text-align:center; 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:#0063dc;}
#flickr_badge_wrapper {}
#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">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=3&display=latest&size=t&layout=v&source=user_set&user=27703312%40N07&set=72157606024367814&context=in%2Fset-72157606024367814%2F"></script>
<tr>
<td id="flickr_badge_source" valign="center" align="center">
<table cellpadding="0" cellspacing="0" border="0"><tr>
<td width="10" id="flickr_icon_td"><a href="http://www.flickr.com/photos/zen-dreams/sets/72157606024367814/"><img id="flickr_badge_icon" alt="zen.dreams Food photoset" src="http://farm4.static.flickr.com/3051/buddyicons/27703312@N07.jpg?1215421268#27703312@N07" align="left" width="48" height="48"></a></td>
<td id="flickr_badge_source_txt">zen.dreams <a href="http://www.flickr.com/photos/zen-dreams/sets/72157606024367814/">Food</a> photoset</td>
</tr></table>
</td>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->