Adding a Flickr photostream to your blog
March 10th, 2005 | Published in Features | 15 Comments
One of the “to-do” items during the 3.0 beta of jasonprini.com is to add my moblog to the sidebar. I’m trying to keep it all “in-house” but it’s tempting to just use the flickr badge code.
This is code that you can insert into your blog template that pulls in the pics off your flickr photostream and displays them wherever you put the javascript code. It’s super easy to implement and looks great {if you don’t mind the www.flickr.com logo}. Regardless of what I end up doing, I thought I’d blog the steps you can follow to dynamicly insert flickr pics into your site.
- Go to your flickr home page.
- Scroll down to the bottom and under “Support” click on “Get the most out of Flickr”
- Under the last paragraph in “Do you have a Blog?” click on “design your badge”
- Select the options you want. You can change this until you’re happy with it.
- When you’re happy with the way it looks, click on “get code”.
- Select all the code in the text box and copy it {Ctrl+C}.
- Open your blogger dashboard, select your blog, click on the “template” tab
- In the sidebar area of your template paste {Ctrl+V} the Flickr code where you want the pictures to appear. If you’re using Blogger, look for < '!'-- Begin #sidebar -- > < div id="sidebar"> tags.
- Click on “Preview” to see what it will look like.
- When you’re happy with where it’s located, save and publish your changes.
- Voila! You’re done. Enjoy!
If you have any questions or comments, just put them here and I’ll try my best to respond. As you can see on the right on the index page, I did end up going with the flickr badge code in the interim. I’m testing several wordpress plugins and my own code ideas on my development wordpress install.
UPDATE:
I’ve been asked where this is located, Flickr seems to have moved things around recently.
try this link if you’re logged into Flickr:
http://flickr.com/badge_new.gne
if that doesn’t work, it’s now located under Tools at the bottom of
the page. Look for:
Help Community Guidelines | Forums | FAQ | Tools | Sitemap | Help by Email
Click on Tools, then look on the right hand side for “Display Flickr
photos on your website” and you can go from there!
March 10th, 2005 at 11:51 pm (#)
[...] 0th, 2005 Adding a Flickr Photostream To Your Blog Jason Prini has a tutorial on adding a Flickr photostream to your blog. Posted by John in WordPress Tips This entr [...]
March 11th, 2005 at 5:51 am (#)
Thanks Jay for the tip. I was thinking of doing it, you just pushed me to do this.
March 11th, 2005 at 11:15 am (#)
actually, you are not required to have the {www.flickr.com} logo at the bottom of the images…you can choose ‘no styling’ in the options when creating it. This ‘raw’ format allows you to style the badge anyway you would like. I posted how you might do that on my site:
http://www.pixies.ca/archives/2005/02/14/flickr-badge-formatting/
March 11th, 2005 at 12:57 pm (#)
I found the badge to be limiting at times, so I wrote a badge plugin for WordPress. You can use it to display photos from you, a tag or a group pool. The plugin grabs the RSS feed and pulls the thumbnails out of them. I’ll be implementing a new feature soon that lets you display images from just one of your tags (ie just display photos tagged moblog). It’s not as easy as the flickr badge, but you end up with more control.
March 12th, 2005 at 10:45 pm (#)
[...] Blogging Pro » Blog Archive » Adding a Flickr Photostream To Your Blog 経由 Jason Prini .com » Blog Archiv [...]
March 12th, 2005 at 10:46 pm (#)
[...] Blogging Pro » Blog Archive » Adding a Flickr Photostream To Your Blog 経由 Jason Prini .com » Blog Archiv [...]
March 14th, 2005 at 1:24 am (#)
hey jay, did you see this? http://blogshares.com/blogs.php?blog=http%3A%2F%2Fwww.jasonprini.com%2Fblog%2Findex.php
March 30th, 2005 at 9:14 pm (#)
Got this working at dykstraNet. Tried to change a few things in the generated code like:
flickr_badge_width = “200px”; (instead of 260)
This caused problems. Images were broken.
April 13th, 2005 at 5:24 am (#)
[...] 04.13.05 Flickr Test Posted in Uncategorized at 4:22 am by Mrs. Williams Flickr tutorial Permalink Leave a Comment Name (required) [...]
November 6th, 2005 at 1:15 pm (#)
Thank you Jason for the Tip, My sidebar is no longer primitive, it is filled with primates,You are a great tuttor.
December 16th, 2005 at 6:35 am (#)
thanks. your page has the most easy to understand instructions to implement a flickr badge to a wordpress blog sidebar on the whole of the internet.
respect.
January 29th, 2006 at 5:29 pm (#)
Thank you Jason! I’m a total novice, googled how to add photos, found your instructions, and got it in about 2 tries.
March 25th, 2006 at 1:45 am (#)
For some reason I had to dig to find this, and your instructions were very helpful!
September 22nd, 2006 at 5:20 pm (#)
guys.. its actually even simpler than that.. just change the key word tag in the code at http://wireless-internet-access-provider.com/how-to-flickr-rss-feed-photostream.html
and paste into your blog or site… done.
December 2nd, 2006 at 7:12 am (#)
[...] Blogging Pro » Blog Archive » Adding a Flickr Photostream To Your Blog 経由 Jason Prini .com » Blog Archive » Adding a Flickr photostream to your blog より [...]