“a dash of Flickr”
So … you want to add a dash of Flickr to your site? We did recently. Check out the image-cube low on the Bubbys.com right sidebar, and click anywhere on it to load our Flickr “scrapbook” page (pictured here). It was very simple, and you can add it to your site pretty quickly.
First, get your Flickr ID. That’s not your Flickr username. The ID looks something like ‘12305383@N04′. Once you’ve logged in to Flickr, just click to this difficult-to-find page, hidden on the Flickr site, and find your ID to the right under “Useful Values.”
Second, generate a url by substituting your Flickr ID as follows (all on one line!):
http://www.flickr.com/badge_code_v2.gne?
show_name=1&count=10&display=latest
&size=m&layout=x&source=user
&user=[your Flickr ID here]
Third, plug the url into this script call to make your Flickr “badge code”:
<div id="flickr_scrapbook"><script src="http://www.flickr.com/badge_code_v2.gne?show_name=1
&count=10&display=latest&size=m
&layout=x&source=user&user=12305383%40N04" type="text/javascript"></script></div>
… and place it on the page of your choice. Add any css to your styling sheet, like so:
#flickr_scrapbook .flickr_badge_image img { float: left; border: 0; margin: 10px; }
It’s very handy to know about this flickr_badge_image class. That class name is assigned by Flickr, which allows you to reach the images with styling! Take a look at what you’ve got. You’ll find the ten latest images posted to your Flickr account, medium-sized (the largest available via javascript from Flickr), and styled just as you’ve specified. You can also add a page of random photos by replacing ‘display=latest’ in the url above with ‘display=random’.
In ExpressionEngine (EE), we did this with links for selecting random, latest, or all at Flickr, like this. (The curly brackets enclose EE tags, and the file in this example is '{site_url}index.php/main/flickr'):
<a href="{site_url}index.php/main/flickr">Random Pics</a> |
<a href="{site_url}index.php/main/flickr/latest">Latest Pics</a> |
<a href="http://www.flickr.com/photos/bubbyspieco/">Entire Album on Flickr</a>
...
<div id="flickr_scrapbook">
{if segment_3=='latest'}
<script src="http://www.flickr.com/badge_code_v2.gne
?show_name=1&count=10&display=latest&size=m
&layout=x&source=user&user=12305383%40N04" type="text/javascript"></script>
{if:else}
<script src="http://www.flickr.com/badge_code_v2.gne
?show_name=1&count=10&display=latest&size=m
&layout=x&source=user&user=12305383%40N04" type="text/javascript"></script>
{/if}
</div>
There are other, more complex possibilities. One could use PHP to parse the url where we have used EE’s already nicely parsed url segment variables. Or if someone knows how to get a Flickr RSS feed with random photos, that feed could be used (I think the standard feed is only ‘latest’). But what we have here has the virtue of being quick, easy, and cool!
Similar Posts: How-to.
Comments Feed: RSS 2.0
You can leave a response, or trackback from your own site.