In these tough times, we band together.

We’re offering premium online learning experiences right now, with pricing designed to stretch your family’s budget. For ages 7-19.

In these tough times, we band together.

We’re offering premium online learning experiences right now, with pricing designed to stretch your family’s budget. Ages 7-19.

Integrating Flickr with vBulletin

iD Tech in action

Our support forums here at iD Tech run on the popular internet forum software, vBulletin. Each year we constantly revamp the system with new upgrades, a new design, and new code plugins to make the process more specific to our business model and more accessible to our staff.

In addition, we also have a public Flickr stream. I wanted to pull these two elements together so that we could bring examples of our Flickr photos to our own support system. Here's how I integrated them.

  1. Download the phpFlickr API from here:
  2. Unzip the files to your vBulletin /includes/ folder.
  3. If you want, you can rename the files to match the vBulletin naming convention (i.e. phpflickr.php -> functions_phpflickr.php).
  4. Optional: Create a new vBulletin product. From the admin side, choose Manage Products from the Plugins & Products menu. Then select Add/Import product. Fill in the information you need for a new product and hit save.
  5. Add a new vBulletin plugin. From the Plugins & Products admin menu, select Add New Plugin. Select the product you created in Step 4, or vBulletin otherwise. For hook location, you'll need to select where you want the Flickr photos displayed. I'm placing them on our vBulletin homepage, so I select forumhome_start for my hook. Enter a title (such as Flickr Integration), leave the exectution order alone, and use the PHP code shown below.
  6. From the Styles & Templates menu, select Style Manager. Pick your style and choose Edit Templates. Find FORUMHOME (or whichever style is applicable to the hook location you chose) and double-click on it.
  7. Find the location in the template where you want your photos displayed and enter $flickrbox, the name of the variable we are pulling from our PHP plugin.

Now let's take a look at the code we're placing in our plugin.


// Create new phpFlickr object
$f = new phpFlickr("yourapikey");

$limit = 11;

// Find the NSID of the username inputted via the form
$person = $f->people_findByUsername('iDTechCamp');

// Get the friendly URL of the user's photos
$photos_url = $f->urls_getUserPhotos($person['id']);

// Get the user's first X($limit) public photos
$photos = $f->people_getPublicPhotos($person['id'], NULL, NULL, $limit);
$flickrbox = "<table class='flickrbox'><tr>";

// Loop through the photos and output the html
foreach ((array)$photos['photos']['photo'] as $photo) {
    $flickrbox .= "<td><a class='flickrimg' href=$photos_url$photo[id]>";
    $flickrbox .= "<img border='0' alt='$photo[title]' "
               ."src=" . $f->buildPhotoURL($photo, "Square") . ">";
    $flickrbox .= "</a></td>";

$flickrbox .= "</tr></table>";

First, we require_once the phpflickr php api library. Alter this line if you choose to name your library differently. Next, we create a new phpFlickr object, $f, and supply our Flickr API key. Change this line to reflect your unique API key. Next, we optionally enable the cache available with this library by supplying our mySQL database details. If you don't have your details, don't worry, this step isn't required.

We then set a limit for how many photos we want. I've chosen 11. We use people_findByUsername to get photos for our particular user, in this case, the company username iDTechCamp. The resulting statements will pull $limit number of photos from the public profile of our user. Lastly, we need to construct a variable that holds the output as HTML. Our variable here is $flickrbox and as you can see I'm generating a table with CSS class style named flickrbox. Each image in the table is table cell and contains a link to that particular image. We also set the image title to the photo title pulled from Flickr.

You can easily alter the PHP code here to produce tableless HTML or any other structure you like. I hope these instructions help you to integrate your board and Flickr! Email me or comment with any questions you might have.

A photo of Ryan

Ryan manages blog content at iD Tech, starting with the company in 2008. He earned his MBA from Santa Clara University after obtaining his Bachelor’s degree from Arizona State. Connect on LinkedIn!

Get Brochure