GraphInspector: Your New Favorite Facebook Developer Bookmarklet

Update (2012/12/12): We have good news and bad news. The bad news first: There is a bug in the current version of the WebKit engine which prevents GraphInspector from working in Google Chrome and Safari. Hopefully this will be fixed soon.
The good news: We just released GraphInspector as a Chrome extension! Get it now!

Update (2012/02/24): We just released a new version of GraphInspector. There is now a link labeled “@-Mention” left of the result ID field which, when clicked, transforms the ID into its @-mention form. You can use this string whenever you are not able to properly mention a person or page in a Facebook status update. Simply paste it into your message and it will turn into that user’s or page’s name as soon as you post the update. Plus: Apps on developers.facebook.com and events are now supported, too.
Your existing bookmarklet will self-update within one day (maybe it already did). If you can’t wait, simply clear your browser’s cache.

When developing Facebook applications, one very common task is copypasting user ids into config files or administration forms. Since most users have vanity URLs, you have to look up their ID using graph.facebook.com or copy the ID from the profile image URL (did you actually do that? If yes, leave virtual high fives in the comments). When you have to do this repeatedly for a large number of users or pages, it can get very tedious.

Since we couldn’t find a working bookmarklet that makes this kind of thing easier for us, we decided to write our own. We call it GraphInspector.

GraphInspector is an Open Graph inspector (duh!) for Facebook users and pages. It displays the ID of the Facebook page or profile you are currently on and also additional info from the Open Graph. The ID is already selected, so if that’s all you need, you only have to press Ctrl+C and you’re good. Should you need more info, GraphInspector displays everything it can get from graph.facebook.com/vanityurl.

Installation is very easy. Simply drag this yellow blob to your bookmarks bar (you don’t see it? then go here):

Now, when you’re visiting someone’s Facebook profile, simply click the bookmarklet. You should get something like this:

GraphInspector

This is still a very early version, but it does its job. We’ve only been using it for two days now and already saved dozens of, well, minutes (but thinking back, this thing would have saved us countless hours in the last couple of months). GraphInspector updates itself, so you only have to install it once.

GraphInspector is known to work in Firefox and Google Chrome. It is also known not to work in Internet Explorer (this is a feature, of course).

Feel free to use, copy, fork and improve GraphInspector. Here’s the GitHub repo. Feel even freer to discuss, spread the word and send feature requests.

About Author

Patrick Mladensich

Patrick is a software developer at Die Socialisten. He is very passionate about JavaScript, HTML5, web standards and music. Some of his colleagues call him a hipster, but it's totally not his fault that he discovers everything before it gets big! Follow Patrick on Twitter, Facebook or Google+!

Facebook Twitter Google+ Foursquare SlideShare