Android Holiday Game Without a Google Phone / Nexus One

Just caught news of a story on techcrunch announcing a Google Phone exclusive game. The story explains that any non-Google Phone/Nexus One won’t be able to play the game.. well, that’s not quite true!

Enable Developer Tools in Safari, then hit your menu bar and go to Develop -> User Agent -> Other, and enter the following to fake the Google Phone user agent:

Mozilla/5.0 (Linux; U; Android 2.1; en-us; Nexus One Build/ERD62) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

Now reload the URL:

http://www.android.com/holidays/

And you can play away :) You can do the same using Firefox, but no easy way from Chrome yet, that I’ve found.

Read More | December 13, 2009

Emails that matter

Just got this note from Luke Shepard, one of the lead developers for the Facebook Connect platform, in response to the round-trip Facebook tagging I launched this week on 944.com :

“Awesome! I’m stoked on this integration .. it is a powerful use of the platform, and it’s innovative (first time I’ve seen it done on a third-party site). I’m glad to see it out there!”

That’s the kind of comment that makes all the difference in the world to a developer! Thanks Luke, you guys did an awesome job with Facebook Connect and the API, and I look forward to coming up with other innovative ideas!

Read More | January 22, 2009

Round-Trip Photo Tagging with Facebook

I just launched round-trip tagging on 944.com, and as far as I can tell, I’m the first developer to come out with this feature.

It works the same way as Apple’s implementation in the upcoming iLife ’09 release, scheduled for the end of January.

Here’s how it works:

  1. The user clicks on ‘Share with Facebook’ on any of the gallery pages.
  2. If the user has not yet added the 944 Facebook application, they are prompted to do so. Then the user is taken back to the photo page, and the photo is added with an AJAX call. If there is an existing ‘944 Events’ album, it puts it in there by default, otherwise it creates a new album with that name.
  3. The user is then given a link to the album (since all photos uploaded with the API go into a pending status, unless the photo_upload extended permission is set), as well as a link to adding this extended permissions to bypass this approval process in the future (and also allow me to sync the tags from 944.com to Facebook).
  4. I set up a cron job to run every hour to get the list of tags from the Facebook photo that I uploaded through the API, and add any new tags to the photos on 944.com. This is where you have to use the infinite session key that I wrote a how-to for a few days ago.
  5. At the same time, any new tags made on 944.com are also added to Facebook, checking to see if the tagged person is also a friend of the person who added the photo to Facebook, and if not the tag is added as a non-Facebook account (just the person’s name).
  6. Any photos which are deleted on Facebook are set to inactive on the local database so as not to needlessly flood the Facebook servers.

This is the quick run-through, actually implementing everything was a mixture of JavaScript and a customized PHP Facebook library to use the API. All-in-all it seems to be working flawlessly, time for some stress testing! With over 638,000 photos in our galleries, I envision a lot of tagging in the near future.

And yes, this does potentially mean fewer pageviews on 944.com, but the photos that are uploaded are watermarked, and the potential reach of posting natively into Facebook albums far outweighs any negative aspects.

I’ll report back in a week or so when I see how much this has improved our Facebook referral traffic, as well as direct traffic (from the watermark in the corners) — it’s already been climbing exponentially since introducing tagging via Facebook Connect and automatically posting a linked thumbnail of the photo to taggers’ walls.

Read More | January 21, 2009

Facebook Infinite Session Keys Are NOT Dead!

As the title suggests, Facebook claims to have done away with infinite session keys for some time now. What most of the wiki-based documentation doesn’t tell you, though, is that they’re still around, but under a different name, and they’re not acquired in the same way. It’s now a rather convoluted process, but here’s what you have to do:

  1. Type the following URL into a browser window, replacing YOUR_API_KEY with your Facebook app’s API key:

    www.facebook.com/login.php?api_key=YOUR_API_KEY

  2. If you’re not logged in, you’ll be prompted to do so, and you’ll then be redirected to the URL that you set as your default Canvas page. Note that appended to the redirected URL you will now have an auth_token parameter, but that’s not what we’re after.
  3. To get the infinite session key, you now have to go to the following URL, again replacing YOUR_API_KEY with your Facebook app’s API key:

    http://www.facebook.com/code_gen.php?v=1.0&api_key=YOUR_API_KEY

  4. This time around, you’ll land on a Facebook page, prompting you to generate a special code. Click ‘Generate’, and you’ll now get your special one-time code, which will be used to generate the infinite session key.
  5. Using the PHP library provided by Facebook, you need to call auth_getSession() in a temporary PHP file, which I called test.php. Be sure to set the $facebook_api_key and $facebook_api_secret variables to the ones corresponding to your app, and $auth_token should be 5 character value that you got back from Facebook in the previous step. You’ll also need to include the Facebook PHP Library before the following code, of course!

    $facebook = new Facebook($facebook_api_key, $facebook_api_secret);

    $infinite_key_array = $facebook->api_client->auth_getSession($auth_token);

    print_r($infinite_key_array);

  6. Load this test file in your browser, and you’ll see an array printed out, with the first item labeled ‘session_key’, which you guessed it, is your infinite session key. Finally! Note that the ‘expires’ field is set to ‘0’, confirming that it really is an infinite key.
  7. Now for the last tricky part.. how to actually use this infinite session key. Whenever you initiate a new Facebook object, just tack on the following code right after. Note that I keep the infinite session key in a variable in a data file, so that way if it ever changes, I can change it in one place and have it work everywhere else. The $facebook_userid is simply your Facebook userid, mine is 626200190.

    $facebook->api_client->user = $facebook_userid;

    $facebook->api_client->session_key = $facebook_infinite_session_key;

    $facebook->api_client->expires = 0;

With the above code, you can now run cron jobs to update users’ FBML pages, post events through the API, and more. For the latter, be sure you also visit this page to grant yourself the required extended permissions.

If you have any questions, don’t hesitate to contact me, or leave a comment.

Read More | January 18, 2009

How To Get jQuery and Prototype to Play Nicely Together

There’s a lot of misinformation out there about using the jQuery and Prototype JavaScript libraries together on the same page. Here’s the quick how-to:

  1. The jQuery library needs to be loaded AFTER the Prototype library, and BEFORE any Prototype functions are called.
  2. Immediately after loading the jQuery library, add the following to your code:
    <script type=”text/javascript”>
      jQuery.noConflict();
      var $j = jQuery;
    </script>
  3. Any time you want to call jQuery functions, you can do so with the new shortcut $j, or in long-form, jQuery. The following code is equivalent after defining the $j variable as outlined above:
    $j(“#some_div”).show();

    jQuery(“#some_div”).show();

As an aside, remember that if you’re switching from Prototype to jQuery, any time you want to reference a div you need to add the ‘#’ symbol in front of the name of the div. So this Prototype code:

$(“some_div”).show();

Would become:

$j(“#some_div”).show();

There you go, now you can get Prototype’s superior AJAX functions, and jQuery’s awesome effects, without having to deal with Scriptaculous.

Read More | January 17, 2009

Keyboard Shortcuts With JavaScript

Just finished implementing keyboard shortcuts throughout the Emcro site. I’ll be posting a full-length how-to on the blog this week, but here’s the cheat sheet:

0 – Homepage
1 – About
2 – Services
3 – Blog
4 – Contact
! – Latest blog post

I wish every website would implement shortcuts for the main navigation. It’s kind of like having Quicksilver on your website (and if you don’t know about Quicksilver for the Mac, get thee to Google pronto, check out some screencasts, and bask in its glory!)

Read More | January 12, 2009