flickr Photo Widget with PHP

I was poking around designmodo a few days ago and stumbled across a cool tutorial for designing an instagram photo widget. I really liked the look of it and noticed a couple people in the comments asking about how to make it work. It seemed like a fun small project, so I gave it a shot.

I’m more familiar with flickr and its api, so this version pulls all its imagery from there. A lot of this code builds on an earlier article I wrote about embedding flickr photos on your website. First, I followed the tutorial from designmodo, resulting in a finished Photoshop file (you can download all the graphic files from designmodo). Here’s what I ended up with.

flickr photo widget

I built this version with html 5 and css 3. I used Javascript for the bottom photo scroller and php to pull in all the photos from flickr. You can download a zip file containing several versions. My first job was to create a static page with html and css. In the download, this is the static.html file. I also posted it online here. I tried to use css 3 for to recreate all of the shadows, rounded corners and gradients. This left me with only having to create two images – one for the wood grain background and one for the textured widget background (both are included in my code download).

This page includes the scroller functionality, which I implemented with Brad Birdsall’s excellent Swipe 2.0 javascript code. I used the 2.0 branch (still in development) because it includes compatibility with IE. I included it in this download because some people may have trouble finding it on github, but I highly recommend going to the github repo and getting the latest copy for yourself. I also ran it through Dean Edwards’s packer js compressor, bringing it down to under 5k. This is the only javascript you need, no other js libraries, like jQuery or anything.


Now I plug in the php code to pull in the data from flickr. I won’t go line by line through the code, but I’ll hit a few key points. This version of the file is called flickr.php. First, there are three variables at the top of the page you need to adjust:

`$flickrUser = 'YOURUSERNAME';`
This is your username, found in your flickr profile url: http://flickr.com/photos/YOURUSERNAME/ For example, my profile url is http://www.flickr.com/photos/marchawkins so my username is marchawkins.

`$photoCount = '7';`
This controls the number of photos displayed in the scroller. Add one to however many you want to show. In my demo, I want to show 6 photos, so I set this variable to 7. The first photo (your most recent) will be used as the large background image behind your avatar. The next 6 will show at the bottom of the widget.

`$flickrAPI = 'YOURFLICKRAPIKEY';`
This is your flickr api key. You can get yours for free here.

That’s all you’ll need to change to get the widget up and running. After you set those variables and upload the code to a server, you should see your flickr info and photos within the widget. You can see my live demo here.


Next up is the job of finding all the potential ‘gotchas’ in the design when you pull real data into the page. Here’s a rundown of some adjustments I made to get this widget working a little better with flickr:

Widget: Name

Name

In flickr, you have a real name and a user name. The real name looks good, but sometimes they can get pretty long. I tried trimming them, but it just looked goofy. Plus, not everyone has a real name stored at flickr. This widget will first try to use your real name. If that string is longer than 13 characters (or you haven’t entered a real name), it will fall back to using your username. If that, too, is longer than 13 characters, it will trim the username to 11 characters and add ‘…’ to the end. If you hold your mouse over either name, you’ll see your real name (again, if you have one).

Your name/username is a link to your flickr profile page. The grey line of text under your name is a link to your photostream. Ideally, it would be nice to use your real name up top and your username underneath, but not everyone has that information.

Widget: Button

Follow Me

In the mock-up, the big button says ‘follow me’, but that doesn’t quite apply to the flickr ecosystem. I changed it to ‘view photos’ and linked it to your photostream.

Widget: Stats

Stat Bar

I struggled with what to do here. ‘follows’ and ‘following’ don’t really apply to flickr, so I decided to go with total number of photos and the date your first photo uploaded to flickr was taken. They were two pieces of data that I know ever user has. I wanted to use ‘views’, but I couldn’t find any way to pull your overall view count from the flickr api, only view counts from individual photos

Widget: Photos

Photos

The only thing I’m not really thrilled about is the cropping of the photos. There’s simply no way to control it, on either the large background photo or the photos in the scroller. For the background, I’m centering it vertically and horizontally, hoping the most interesting parts of the photo will be there. For the scroller, I’m showing the entire width of the photos, but cropping them (via css) to a consistent height. As you watch the widget after a few uploads, you’ll probably see some of your photos look really awesome, and some look a little odd. As of right now, I can’t figure out a reliable way to fix that. Suggestions welcome.


And that’s about it. Check out my finished version. You should have a slick looking widget that pulls in your information from flickr. Kudos to Stelian Subotin for the awesome photo widget tutorial on designmodo. It was the inspiration for all this. I hope to start on an instagram version next, since that’s what all the cool kids are using these days. You can download all of the code mentioned in this post below.

Check out the full demo widget here.

Download Sample files.

#flickr #php

Leave a Reply

Your email address will not be published. Required fields are marked *