If you’re working on a plugin or theme that’s tightly integrated with a user’s social profile then you may find yourself wanting to pull in photos from their Flickr account.
If you’ve read my blog for any length of time, then you know most of the stuff I share like this comes from either working on something for myself or working on something for someone else.
So, in a recent project, here’s how I used the Flickr API to bring Flickr photos into a WordPress plugin to display on the front-end.
Flickr Photos For WordPress
Depending on your level of experience with working with APIs, you may find the Flickr API easy to work with or you may find it a bit confusing.
Regardless, this post isn’t going to be breaking down the nuances of the API. Instead, it’s going to walk through a specific use case:
Taking a user’s ID and grabbing the most recent photos from their photo stream.
Straight forward, right?
As with most services, you’re going to need an API key. To grab this from Flickr, you can use this page. It’s easy enough to follow, but it’s required in order to make the requests that will be used throughout this post.
1.The API End Point
In order to grab the Flickr photos for WordPress, we’re going to use the
flickr.people.findByUsername end point. You can read all about it on the documentation page, but here’s how I view this as working:
- Somewhere in the theme or plugin, you ask the user for their Flickr username.
- We then take the username that’s provided, make a call to this API function, and grab the user’s NSID.
- The NSID is then used to grab the photos in a future step.
In terms of how you implement this is outside the scope of this article. If you’re using a plugin, you may use the options table. If it’s a theme, it may be the options table or it may be stored as a theme modification.
Whatever the case, make sure you know how it’s stored so you can properly retrieve it. For the purposes of this example, I’m using
2. Setup a CURL Helper
Though you don’t necessarily have to wrap this code in its own function, I’m very much a fan of doing so.
First, it makes sure the code is modular: You have a single function doing a single thing.
Secondly, it makes it easier to call through the rest of the codebase and its very clear as to what the function is doing.
All of the options for cURL, error handling, request URL, and return data are handled in this function.
3. Get The User ID
Next, it’s a matter of making a request to the Flickr API using the API key, username, and cURL function we’ve defined.
The data will be returned in an XML format. You can parse this any number of ways (though I’ve opted to use
simple_xml_load_string. This will create an object from the XML data that makes it easy to parse.
Now we’ve got the user’s ID, we can actually grab the photos.
4. Load The Photos
Once we have the user’s ID, we can dynamically build a URL that will retrieve the last n-number of images from the user’s profile. We can then style this however we want.
Notice I’ve simply wrapped a
script tag in a
div element so I can properly style it. This script is provided by Flickr and accepts a number of parameters:
- How many images to display
- The order in which to retrieve them
- The size of the images
- The layout
- The source
- The user ID (hence the need for the code above)
Given all of the above, the 10 most recent images should appear in your theme.
I’m sure there are other ways to retrieve the photos, and there are other considerations you should make (such as using transients so not to exhaust your API request limit), but the gist of everything you need is above.
Further, overtime the API is likely the change and the code above may no longer work. Should that be the case, feel free to drop an update in the comments and I’ll update the code in the post.