12.10.07

Facebook Apps served from Firefox

Posted in POW at 9:07 pm by David Kellogg

From the why-not department, I server a Facebook app from Firefox. This opens up more fluid interaction between the browser and your friends on Facebook. In this case I produced a search engine for your local bookmarks. There is no reason why you can’t just start chatting through your profile page. Here’s how I did it.

Download the Plain Old Webserver.

You can grab the SJS code here.
I placed this code at htdocs/fb/postmarks/index.sjs in my POW server.

Maybe more interesting than the code is how I did it. I set up a similar search engine written in PHP, starting from Facebook’s mock AJAX application. I dumped Facebook’s query string to a file. I then replayed those parameters using curl to see the response. The parameter “mockfbmltext” appeared related to AJAX text. The rest of the application was just HTML. That makes things easy. On the Facebook side, they have the guts to proxy all of my content and re-write it. All javascript is scanned. The div tags are rewritten. Proxies and dynamic rewriting is slow, but it works.

Here’s the query string part of my code.

<?sjs
   pow_highlight();
   var textin = ““;
   if(pow_server.GET[’mockfbmltext‘]) {
     textin = pow_server.GET[’mockfbmltext‘];
  } else if(pow_server.GET[’mockfbmltext‘] != undefined) {
     document.write(”<font color=’red‘>Please enter a search</font>“);
     pow_exit();

…

Here is the HTML.

<form>
<input name=”mockfbmltext” value=”” type=”text” size=”30“>
<br />
<input type=”submit”
clickrewriteurl=”http://davidkellogg.com/fb/portmarks/“

clickrewriteid=”preview” value=”Search bookmarks” />
<br />
<div id=”preview” style=”border-style: solid; border-color: black;
border-width: 1px; padding: 5px;“>
</div>
</form>

I signed up for a Facebook API key, then filled in the blanks. These are the values I used.

Application Name: Portmarks
App Server: http://davidkellogg.com/fb/portmarks/
Canvas Page URL: portmarks
Use FBML
Website
… added on Facebook?: Yes
Who can add…: Users, All Pages
Post add URL: http://davidkellogg.com/fb/portmarks/
Post-remove URL: http://davidkellogg.com/portmarks/
Default FBML: hello
Side Nav URL: http://apps.facebook.com/portmarks

If I have a bookmarks folder called “private”, those are hidden from Facebook users. If I have a “public” folder, those are the only ones shown. Once you change the code to point to your own server (CHANGE YOURSERVER.com to your IP), it should work.

My goal was to display public and private bookmarks in my Facebook profile. It was a nice proof of concept. It would be great to see even more interaction between the browser and Facebook.

Permalink