Request Brochure

Blog & News

Integrating Flickr with vBulletin

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: http://www.phpflickr.com/
  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.

require_once("includes/phpFlickr.php");

// Create new phpFlickr object
$f = new phpFlickr("yourapikey");
$f->enableCache("db","mysql://user:password@server/database");

$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.

  • Susan

    Hi there,

    Lovely mod here! I was wondering if there was anyway to have the photos on other pages of the forum rather than just the home page?

    I have been trying to find a way too, any help would be appreciated!

    Cheers
    Susan

  • zinymegan

    Hey Guys,

    I am a student (limited budget) and have seen a few offers for free ipods and iphones. Does anyone Know if any if the free IPhone or Ipod offers are actually legit? I don’t want to waste my time filling out a hundred surveys and was hoping to hear from someone who may have had some success with this.

    Thanks

  • Greg

    you wrote:
    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.

    Can you give an example of house this should look ‘in code’?

    Thanks!

Featured

Channels

Authors

About iD Tech

iD Tech is the #1 tech camp on the planet! Kids and teens design video games, mod with Minecraft, code apps, engineer robots, build websites, produce films, and more. 100+ locations nationwide with hand-selected staff, unique campus experiences, and stimulating courses delivered in small clusters of 8 students per instructor.

Show all iD Tech Locations Show all iD Tech Courses