A better way to make a custom Wordpress-style Flickr badge
October 09, 2009
CSS | Javascript | Snippets
I just found this while experimenting with the Flickr badgemaker. It's a much more customizable way to get nice results than the method I posted earlier.

Go to: Create your own Flickr badge and make the selections as specified:
  1. Choose HTML badge
  2. Select the content you want to show.
    • Would you like to include your buddy icon & screen name at the bottom? Choose No
    • How many items would you like to show? Choose 10
    • Which ones? Choose either most recent or random.
    • What size? Square
    • Which orientation would you like? None (Because you want to style it yourself)
    • Check off No background, No border.
Here's the code:

 
<style type="text/css">
/*
Images are wrapped in divs classed "flickr_badge_image" with ids "flickr_badge_imageX" where "X" is an integer specifying ordinal position. Below are some styles to get you started!
*/
#flickr_badge_uber_wrapper {text-align:center; width:185px;position:relative;}
#flickr_badge_wrapper {padding:0px 0 0px 0;}
.flickr_badge_image {margin:0 0px 0px 0px;border:1px solid black;padding:6px;float:left;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_badge_source {text-align:left; margin:0 10px 0 10px;}
#flickr_badge_icon {float:left; margin-right:5px;}
#flickr_www {display:block; 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 {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
#flickr_badge_image1, #flickr_badge_image2, #flickr_badge_image3, #flickr_badge_image4{}
</style>
<div id="flickr_badge_uber_wrapper"><div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?show_name=1&count=10&display=random&size=s&layout=x&source=user_set&user=47051377%40N00&set=72157621682851999&context=in%2Fset-72157621682851999%2F"></script>
</div></div>
<!-- End of Flickr Badge -->
 


And here's what it looks like:


Ads by Google

Posted by ellen at October 09, 2009 09:02 PM

1 Comment

hey there! thanks so much for sharing this. this is the simplest and junk-free code that i have managed to find. thanks again!


Ads by Google

 RSS   |   Contact Me

Ads by Google

Ads by Google