Recipe: Tag Photos With Facebook Graph API

Posted on 01 January 2013 by Joseph

The Facebook Graph API presents a powerful, unified view of the myriad resources made available by Facebook. There is only one problem: documentation, particularly for accessing resources from the different SDKs, is lacking. In designing my little Facebook new-profile-creating toy, PRO!(de)file, I came across several fuzzy places in the documentation that I had to clear up with Google, some time spent reading the SDK code, and good ol’ trial and error. Of particular difficulty was tagging uploaded photos, which is a core requirement of PRO!(de)file.

Uploading from the Facebook PHP SDK

There is a published SDK for PHP made available (or at least linked to!) by Facebook. It is basically a handy wrapper for libcurl. Browsing through the source for the SDK and the Graph API documentation for Photos, I managed to work out how to upload photos. Naturally, the photos must first be on the server side, since it wouldn’t do to have PHP magicking them straight off of your hard drive. How to get them there is left as an exercise for the reader. Also left to the reader is how to register your Facebook application and get an application ID (hint: it’s very easy).

All Facebook transactions, whether client-side or server-side, begin with one of the several methods for application authentication. The documentation on auth is pretty good on the Facebook site, though it is spread out over several unlinked pages. After auth, the user has a cookie containing information about the session and the available permissions requested at auth time. Note that in order to publish anything, including photos, you must request the publish_stream permission when authenticating. Creating the Facebook PHP object and getting the session is then very simple:

$fb = new Facebook(array(
    'appId' => 'YOUR_APP_ID',
    'secret' => 'YOUR_APP_SECRET',
    'cookie' => true,
$session = $fb->getSession();

With these objects, you have everything you need to upload a photo to Facebook:

function post_image($fb, $session, $image_path){
        $image = array(
            'access_token' => $session['access_token'],
        $image['image'] = '@'.realpath($image_path);
        $fb->api('/me/photos', 'POST', $image);
        echo "Success!";
        return true;
    }catch(FacebookApiException $e){
        echo $e;
        return false;

Super easy. And there are all kinds of neat properties you can include in the image array, explained at the Graph API Photo documentation. Of particular interest to me was the “tags” property, described as returning “An array of JSON objects, the x and y coordinates are percentages from the left and top edges of the photo, respectively” when requested in a GET request. But how does one tag users when posting a photo?

Tagging a photo with the Graph API

The trick, it turns out, is to include a “tags” property as it suggests, with the following format: “tags” is an array of associative arrays, each of which contains the fields ‘x’ (x-coordinate of the tag as a percentage), ‘y’ (y-coordinate of the tag as a percentage), and ‘tag_uid’, a user UID. I never did any testing to see if there was any limit to how many tags, but it definitely works for one at least. Here is the updated post_image function from above, now including a tag of the logged-in user in the center of the image:

function post_image($fb, $session, $image_path){
        $tag = array(
            'tag_uid' => $fb->getUser(),
            'x' => 0,
            'y' => 0
        $tags[] = $tag;
        $image = array(
            'access_token' => $session['access_token'],
            'tags' => $tags,
        $image['image'] = '@'.realpath($image_path);
        $fb->api('/me/photos', 'POST', $image);
        echo "Success!";
        return true;
    }catch(FacebookApiException $e){
        echo $e;
        return false;

As the name implies, the get_user method of the Facebook object retrieves the user ID (actually the Graph ID) of the logged-in user.

In conclusion, having just scratched the surface of the possibilities of the Graph API, I am very excited by its breadth and depth. Though lacking in complete documentation, when wrapped up in some of the reasonably well-done SDKs, it is both straightforward and indeed easy to include powerful Facebook functionality in web applications.

Country Selection Splash Pages Are Stupid

Posted on 20 June 2012 by Joseph

I love the Microplane kitchen tools (and would probably love the woodworking tools too if ever I had used them). What I don’t love is the unnecessary step of choosing my country upon arriving at their website. In a world where tools like visitor.js exist, much less the vast array of server-side techniques for doing just this, why am I ever forced to click ‘Microplane USA’ again?

And it’s not just kitchen tools either. I commonly see technology providers doing this same thing. In my opinion, it’s always better to make a best guess then let the user correct if they need to. This is what high-traffic projects like Firefox do to get people to the correct download. If their assumptions about your language or operating system are incorrect, you’re just a click away from the correct page, but most people never have to click anything to get to their final destination.

Recipe: Detect Console Session in Windows

Posted on 10 January 2012 by Joseph

Working on an upcoming version of my company’s software Granola today, I came upon the need to determine whether the program was running in the so-called “console session.aspx)” – the session in which the user is physically sitting at the terminal. The context of my interest was Windows XP power management, but I can think of other reasons, like changing the user interface based on the physical location and logon status of the user.

As with many things Windows, the solution is quite simple but the documentation quite sparse. Googling eventually brought me to the WTSGetActiveConsoleSessionId.aspx) and ProcessIdToSessionId.aspx) functions. The former retrieves the session ID for the console session, and the latter queries the session ID for a given process. Pass in the current process ID and compare the values to perform the required test:

bool check_console(){
    DWORD sid;
    ProcessIdToSessionId(GetCurrentProcessId(), &sid);
    if(sid == WTSGetActiveConsoleSessionId()){
        return true;
    return false;

For more fine-grained control, you can register to receive session change messages with the WTSRegisterSessionNotification.aspx) function. Given a window handle, the following code will register for all session change notifications:

if(WTSRegisterSessionNotification(handle, NOTIFY_FOR_ALL_SESSIONS) != TRUE){
    // handle error (GetLastError)

Change NOTIFY_FOR_ALL_SESSIONS to NOTIFY_FOR_THIS_SESSION to only receive session changes for the current console. Once the registration has occurred, session changes will generate WM_WTSSESSION_CHANGE.aspx) message; your application can then respond to these messages as needed.

Implementing HTML5 Canvas Polyline Simplification

Posted on 09 January 2012 by Joseph

Or, fun with vector geometry and state machines!

Once again, I’m toying around with HTML5 canvas. As part of the larger project, I needed a way to generate simplified paths based on mouse drags where ‘simplified paths’ means polyline paths with as few internal points as possible to accurately express the movement of the mouse. I did a bit of research and came up with a bunch of papers on the topic, both for purely polyline simplification as well as polycurve simplification, but I decided it would be more fun to roll my own.

So I cranked up some math rock, busted out the notebook, and dusted off the brain cells dedicated to vector geometry. The breakthrough is realizing that the algorithm can run at a single point on a time. Here is the resulting algorithm in pseudocode:

  1. Initialize TMIN, LMIN, line_list = [].
  2. Save the mousedown point (s). Push s onto line_list.
  3. Save the point after the first mousemove (m). Push m onto line_list.
  4. For each new point, n (i.e. on mousemove event):
    1. Let p = n – m.
    2. If ||p|| < LMIN:
      1. Pop the last element from line_list.
      2. Push n onto line_list.
      3. Return.
    3. Else:
      1. Let o = m - s.
      2. Let θ = arccos(o . p / (||o|| * ||p||)).
      3. If θ < TMIN:
        1. Pop the last element from line_list.
        2. Push n onto line_list.4.
      4. Else:
        1. Push n onto line_list.
        2. Let s = m.
      5. Let m = n.

At the end, line_list is the simplified list. Here is a diagram of the relevant variables:

In normal words, the algorithms only include points that are close enough to the line established by the previous two points, assuming that the mouse has gone far enough away from the last point. The nice thing about this method relative to some more complex ones (e.g., least-squares fit to the original line) is that the algorithm only needs to hold the points of the resulting line and the latest point.

So DOES it work? You can give it a go here. Fork the code (Coffeescript) here.

HTTPS Certificate Verification in Python With urllib2

Posted on 08 January 2012 by Joseph

This post is a duplicate of one on my former site, That site is no more, and this is the only post of any real quality, so I thought I would copy it over.

Everyone loves Python. I particularly feel encased in Python’s womb-like warmth and comfort when I am trying to do client-side communication with web servers or web services. Most of the magic has already been accomplished by the time I type import urllib2 – super simple and clean interfaces that seem to go increasingly deep as you need them. Request a page with a single line, do a GET or POST request with two lines, modify headers as needed, do secure communication with SSL; all of these things are simple and elegant, adding complexity only when needed for more complex goals.

Recently, I found a hole in this seemingly infinitely deep well of value added by urllib2. While the module will happily do SSL-secured communication for you, it fails to provide any easy way to verify server certificates. This is a critical feature, especially when using web services. For instance, if I wanted to use a service to version-check files on my system with files on a central server, allowing me to download the updates as needed, communicating with an unverified server could be disastrous. After poking around a bit online, I still hadn’t found anything useful in the urllib2 interface to help me accomplish this, so I started opening up the library files themselves. My goal was to use SSL with cert verification while still leveraging urllib2 for all of my high-level interface needs.

It turns out that it isn’t very difficult at all, despite the fact that the interfaces are not such that it is as easy as it could be to extend the functionality in this way. The ssl module already includes certificate verification, although you must supply your own trusted root certificates. These are easy to find, as it is in the interest of the CAs like Verisign and Thawte to publish these (for instance, your browser already has copies that it uses for certificate verification). The question then is how does one supply the appropriate parameters to the ssl.wrap_socket(...) function?

The answer is in this case, by subclassing the httplib.HTTPSConnection class to pass in the appropriate data. Here is an example:

class VerifiedHTTPSConnection(httplib.HTTPSConnection):
    def connect(self):
        # overrides the version in httplib so that we do
        #    certificate verification
        sock = socket.create_connection((, self.port), self.timeout)
        if self._tunnel_host:
            self.sock = sock
        # wrap the socket using verification with the root
        #    certs in trusted_root_certs
        self.sock = ssl.wrap_socket(sock,

The key is the two extra parameters, cert_reqs and ca_certs, in the call to wrap_socket. For a more complete discussion of the meaning of these parameters, please refer to the documentation.

The next step is integrating our new connection in such a way that allows us to use it with urllib2. This is done by installing a non-default HTTPS handler, by first subclassing the urllib2.HTTPSHandler class, then installing it as a handler in an OpenerDirector object using the urllib2.build_opener(...) function. Here is the example subclass:

# wraps https connections with ssl certificate verification
class VerifiedHTTPSHandler(urllib2.HTTPSHandler):
    def __init__(self, connection_class = VerifiedHTTPSConnection):
        self.specialized_conn_class = connection_class
    def https_open(self, req):
        return self.do_open(self.specialized_conn_class, req)

As you can see, I have added the connection class as a parameter to the constructor. Because of the way the handler classes are used, it would require substantially more work to be able to pass in the value of the ca_certs parameter to wrap_socket. Instead, you can just create different subclasses for different root certificate sets. This would be useful if you had a development server with a self-signed certificate and a production server with a CA-signed certificate, as you could swap them out at runtime or delivery time using the parameter to the constructor above.

With this class, you can either create an OpenerDirector object, or you can install a handler into urllib2 itself for use in the urlopen(...) function. Here is how to create the opener and use it to open a secure site with certificate verification:

https_handler = VerifiedHTTPSHandler()
url_opener = urllib2.build_opener(https_handler)
handle ='')
response = handle.readlines()

If the certificate for is not signed by one of the trusted authority keys in the file trusted_root_certs (from the VerifiedHTTPSConnection class), then the call to will raise a urllib2.URLError exception with some debugging-type information from the ssl module. Otherwise, urllib2 functions just as normal, albeit now communication with a trusted source.

Copyright © 2018 Joseph Turner