Two Methods For Embedding Live Facebook Data On Your Site.

by Shawn Kilmer, October 2009


So you want something from facebook, like say, the contents of your publicly viewable facebook wall to be streamed-in and displayed on your own website? Maybe by way of a nice clean XML version of public facebook pages? Seems reasonable since it's the same information that is publicly available on your public facebook page, right? While twitter, flickr, and other services think this makes sense, Facebook doesn't seem to think so.


To even ask Facebook what time of day it is, you will need to jump through a series of hoops and gain a partial understandanding their api flow. It is not easy... there is never one right way to do things with their systems, and their documentation is a complete disaster. Just about every reference page lacks examples, and when they are to be found they either omit crucial setup information, are deprecated, or just plain don't work. My findings in that regard seem to be consistent with those of the majority of posters on the developer forums as well as in blogs.


At my agency, all we wanted to do was read in our Facebook page's wall stream into our flash movie, just as we had easily achieved with our twitter feed, youtube feed, and our latest wordpress blog entries.


What follows is my solution to this problem after about a week of day and night working, trial and error, giving up and trying again, and reading probably 500+ technical blog articles, forum posts, and documentation pages. It is possible, and this article exists so you don't have to ever endure a week like mine.



The Facebook API flow

From everything I understand after dealing with this, your applications cannot make ANY calls to the facebook API without explicit approval by a logged in Facebook user at every step of the way.


The Facebook application model was clearly designed primarily to only be interacted with from within the Facebook site itself. Not only must a user authorize the application, but for it to run any code the user also has to have a valid authenticated session established on Facebook (they must be logged into the site).


Correct me if I am wrong on any of the above, as there is a lot about it I still do not understand. I feel they have too many unnecessary levels of complexity. Suffice it to say that facebook ensured that it is a lot more difficult than it ought to be to gain ANY information for free about ANYONE or ANYTHING.



Method 1: PHP Scraping

Not wanting our users to go through some cumbersome login process just to see facebook data on our site, I set up a facebook application and ran some code that pulled our wall stream from the api. Worked fine when running from its facebook application url, but trying to run the script directly on our server, i'd get errors like "Fatal error: Uncaught exception 'FacebookRestClientException' with message 'Session key invalid or no longer valid' in" (it was nice however that facebook coded-in informative error handling). I just could NOT think of a solution to this, so I thought we would just go on and scrape the page. Hey, its publicly viewable! We are just copying it over to our site.


I wrote the following scrape script which 100% works but has the following obvious drawbacks:


Maybe you will find this useful in someway, so try it out, fbscrape.php in this article's demo files package.

download this article's demo file package
view it in action (Scraping the Steelhead Advertising page.)



Method 2: Doing it correctly(?)

If you follow these steps exactly, you should be able to dance around the facebook rules and gain access to your stream.

  1. Log into your facebook page.
  2. Install the Developer App
  3. From the developer application, click "set up New Application" button
  4. Agree to the terms, and it will take you to the application editing pages. The first screen under the 'basic' tab should present you with: application id, API key, and 'secret'. Copy and paste these three values down and SAVE THEM.
  5. Download this article's demo files package, get the fbprompt.php script, edit the code to fill your actual secret values, then upload it to your own server.
  6. Click the Canvas tab from the left. Give your app a unique canvas page url, and under canvas callback url paste in the location of the script you uploaded in the previous step [i.e., http://www.mysite.com/fbprompt.php]. Lastly, under "canvas settings" set the Render Method to FBML and not Iframe.
  7. While logged into facebook go to the canvas URL of the app you created [for this article i made http://apps.facebook.com/shawnkdemo/]. You should get two fbml-generated links which handle setting permissions for you for stream access and offline access. click each link to give the app access to these extended permissions.
    It should look like this:


  8. while logged in to facebook, run the random secret undocumented code gen file on the facebook server:

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

    click the GENERATE button and SAVE THE RESULTING CODE.

    It should look like this:



  9. Add these two lines IN PLACE of the print statement in fbprompt.php, I have already created it as fbprompt-2.php in this articles demo files package.
    $infinite_key_array = $facebook->api_client->auth_getSession('SECRET CODE FROM STEP 8 HERE'); print_r($infinite_key_array);

    add in your secret code from step 8.
  10. Save the altered fbprompt.php to your server and reload your facebook application page. You should get your user's infinite session key, as presumed is indicated by the 0 value for the 'expires' key. Here is mine:
  11. OK! The backwork has now been done and we are ready for the first real step!

    You have: set up your user account to give authorization to this app even when you aren't logged into the site and done what seems to be a workaround to allow a persistent session key. You can delete the fbprompt.php off your server now if you want. We are just going to take the information it helped us generate and enter that information into the fbstream.php I prepared.

    With all your correct info entered into the fbstream.php, run it on your server directly instead of through your facebook app page (ie mysite.com/fbstream.php)


    you should see gold, baby, gold.


    Here's mine in action




    Your facebook activity stream in all it's php array glory, free from login prompts, facebook connect buttons, and running off of your own server. Rub your eyes to be sure its real, go ahead and log out of your facebook account, and reload the script on your server just to verify, yes, its real.

    Or, you want someone else's stream? No problem:

    api_client->user = YOUR_USER_ID; \$facebook->api_client->session_key = 'YOUR SECRET PERSISTENT SESSION ID'; \$facebook->api_client->expires = 0; \$stream = $facebook->api_client->stream_get('YOUR USER ID','TARGET USER ID');");
  12. The demo files package includes the fbstream-2.php example. A little more advanced, it creates an xml feed of the author names, picture icons, and comment counts, handles embedded images and youtube items, and string-parses the facebook timestamp into a modern "web 5.7" relative time signature. This is all set to be SHIPPED OUT to the flash movie, external application, what have you.

    View it in action for my facebook wall