In today’s tutorial, I will be showing you how to add your Flickr Photostream to your WordPress blog using jSon and jQuery. I learned how to do this trick a few weeks ago while checking out a video series over at CSS-Tricks.
Resources:
1. jQuery
Step 1: Grab Your Flickr Photostream ID
Go to your Flickr homepage and click “Your Photostream”
Grab those last numbers and letters after “photos/”
Step 2: Open up your header.php file and add these javascript snippets in between your head tags
This is to include jQuery on your site. Swap out “Your URL” with the URL where you have jQuery on your server.
<script src=”your URL/jquery-1.3.2.min.js” type=”text/javascript”></script>
This is the snippet that will be pulling the Flickr photos to your WordPress blog. Swap out “Your Flickr ID” with the Flickr ID you grabbed earlier.
<script type=”text/javascript”>
jQuery(function(){
jQuery.getJSON(“http://api.flickr.com/services/feeds/photos_public.gne?ids=Your Flickr ID&lang=en-us&format=json&jsoncallback=?”, function(data){
jQuery.each(data.items, function(index, item){
jQuery(“<img />”).attr(“src”, item.media.m).addClass(“thumb”).appendTo(“.flickr”).wrap(“<a href=”" + item.link + “” mce_href=”" + item.link + "”></a>”).wrap(”
<div class=’flickr-thumb’ />”);
});
});
});
</script>
Step 3: Open up your style.css file and add the CSS to style the photos to your liking for the “thumb” class and “flickr-thumb” class. Don’t touch the “flickr” class.
.flickr {
overflow: hidden;
}
.thumb {
width: 54px;
}
.flickr-thumb {
float: left;
height: 36px;
overflow: hidden;
}
Step 4: Go to where you want to include your Flickr Photos on your WordPress blog and add this HTML structure:
<div class=”flickr”>
<div class=”flickr-thumb”>
</div>
</div>
Step 6: Save & update your files and refresh the page and that’s it! You now have Flickr on your WordPress blog.
I hope this helps. I’m still trying to figure out how to add a lightbox or thickbox to the photos. If you know how to, or know where you can go to find out how to do it, please share and comment.
You can find a working example of this technique at my site.
Enjoy and happy Flickring!
Many thanks for your useful tips,a link of this article has been added to WebmasterClip dot com in order to share it with more ppl,see
http://www.webmasterclip.com/story/how-add-flickr-wordpress-5-simple-steps
wow.nice info truly help me alot!
Thanks for writing, I truly liked your latest post. I think you should post more often, you evidently have natural ability for blogging!
@Edward I’m glad you found the tutorial helpful. And thank you for sharing it on Webmaster Clip.
@eQ I’m here to help. Thanks for stopping by.
@MAWLS Thanks for the consideration. I will be posting more regularly.
Pingback: Twitted by mayhemstudios
Pingback: Twitted by jeremyjaymes
Great post! I’ll subscribe right now wth my feedreader software!
The article is ver good. Write please more
@Katty More articles are on the way. If there is a specific topic you would liked covered, please email me: dhane.crowley@gmail.com
@Jane Glad I was able to help!
Pingback: 30 Tutorials Combining Both Wordpress and jQuery : Speckyboy Design Magazine
Great article! Any idea on how to only include jquery once? It seems wordpress comes with jquery and using your method would add it twice. I have it on one of mine twice b/c the WP JQ version is older and I wanted a newer version. Any pointers is appreciated!
Justin,
The same reason you added jQuery twice is the same reason I did. When I did this tutorial I too had an older version of jQuery and wanted to use an updated version.
None the less, if you are using an updated version of jQuery, make sure to direct your code to where jQuery is located and that should work fine.
I also read to use the WP jquery you have to use $j = jQuery.noConflict(); To keep things smooth I’m just using the default version. It would be nice if it could be upgraded.
Pingback: 30 Tutorials Combining Both Wordpress and jQuery | huibit05.com
Pingback: 30 Tutorials Combining Both Wordpress and jQuery | .::tek3D Weblog::.
Hey Great tutorial.
I am trying to make this work but no luck…
I keep getting the error message saying missing ) after argument list.
What have I done wrong?
Can you please help me out.
Pingback: 30 Tutorials Combining Both jQuery and Wordpress
Pingback: 30 Tutorials for Using JQuery in Wordpress | oOrch Blog
Pingback: Add Flickr Photostream to your Wordpress blog | bijusubhash.com
Pingback: 30 Tutorials Combining Both Wordpress and jQuery | Coyot [at] CanalCoffee.com : WordPress
Pingback: 30 Tutorials Combining Both Wordpress and jQuery | Coyot [at] CanalCoffee.com : WordPress
Pingback: 20+ jQuery and Wordpress Tutorials – A Match Made in Heaven