iD News and Blog

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.

 

Tags: api, changes, Classes, code, css, Design, Flickr, Flickr API, Manager, mysql, Objects, photo, photos, PHP, phpFlickr, style, tech, vBulletin
Posted in iD Tech Bloggers | 2 Comments »

 

 

Properly Referencing Your Main Class in Flash Actionscript

For those of you moving from Actionscript 2 to 3 (with a heavier focus on proper object-oriented principles), you may find that accessing your Main class and Stage isn’t as straight-forward. In this post we’ll highlight organizing your classes to properly reference your main class. First, let’s take a look at our Main class:

package {

    import flash.display.Stage;

    import flash.display.MovieClip;

    public class Main extends MovieClip {

        private static var _instance:Main = null;

        public function Main() {

            _instance = this;

        }

        public static function getInstance():Main { return _instance; }

        public static function getStage():Stage { return getInstance().stage; }

    }

}

First we define a static variable, _instance, to hold a static reference to Main. We are assuming throughout this that we will use Main statically. In other words, there will only be a single instance of our Main class. Next, in our constructor, we use the line _instance = this; to set our static version of Main to the one that is created when the constructor is called.

We will use two methods to get access to Main and the main stage. First, getInstace() is a static function that always returns a copy of _instance. If you want the stage instead, use getStage(). All getStage() does differently from getInstance() is return the stage property of _instance rather than the object itself. Using this format simplifies your code in other classes.

Now let’s say you want to use these functions in other classes to add something to the stage. Let’s pretend we have a Tree class that needs to add itself to the main stage when it is created. You could use this code:

package {
    import flash.display.Sprite;</code>

    public class Tree extends Sprite {
        Main.getStage().addChild(this);

        x = Math.random() * Main.getStage().stageWidth;
        y = Math.random() * Main.getStage().stageWidth;
    }
}

You can see that we can easily get properties of the stage (stageWidth and stageHeight) simply by statically referencing Main. Note that we could have used the following lines instead:

x = Math.random() * Main.getInstance().stage.stageWidth;
y = Math.random() * Main.getInstance().stage.stageWidth;

It really just depends on which example you find more elegant. One additional benefit of using the techniques described here is that you can use the getInstance() to determine if Main has loaded. Simply do:

if (Main.getInstance() != null) { /* some function */ }

Hope that gives you an easy framework for accessing your stage and Main class in AS3!

 

Tags: Actionscript, AS3, Classes, Flash, Objects, Stage
Posted in iD Tech Bloggers | 4 Comments »