There are other tutorials online on how to do this but they all had problems with the images loading horizontally, so I wrote my own. The following will show you how to load your Flickr photostream directly into your personal blog or website, Like this;
|
|
You can load your images vertically or horizontally and style them in any way you wish.
Go to Flickr and create a new badge
Step 1. Select an “HTML Badge” and click next
Step 2. Next choose which content you would like to display, click next
Step 3. Next select how you would like the content to show, click next
Step 4. Next select the colors you want used in your badge, click next
Step 5. You will then be given the required code to load your content, it will look something like this;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!-- 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_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 {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>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=s&layout=h&source=user&user=23770201%40N03"></script>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge --> |
The first thing I did was, remove the flickr badging and the excess code, after that the code looks like this;
1 2 3 4 5 6 7 8 9 10 11 12 | <!-- Start of Flickr Badge -->
<style type="text/css">
.flickr_badge_image img {border: 1px solid #000000 !important;}
#flickr_badge_wrapper {background-color:#eeeeee;border: solid 1px #666666}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<tr>
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=5&display=latest&size=s&layout=h&source=user&user=23770201%40N03"></script>
</tr>
</table>
</td></tr></table>
<!-- End of Flickr Badge --> |
Of course you can go crazy with your CSS skills and now style this up any way you like, also try the flash option too when making your badge, I just opted for HTML as I wanted to have more control over my images.
How to Change the Thumb Size
Add the following code to line 3;
width: 50px; height: 50px;
To clarify, line 3 should now look like this;
.flickr_badge_image img {border: 1px solid #666666 !important; width: 50px; height: 50px;}Thats about it.
No Comments
Leave a Comment
feel free to use code tags or html tags.