"Those who do not want to imitate anything, produce nothing." - Salvador Dali

Building simple websites with Facebook’s API
Feb2011

Tags: , , , , , , , , | 2 Comments

Facebook relationship map

UPDATE: Facebook changed the way their Graph API works. You’ll now need an “access token” in order to pull data from your Group or Page feed. You can do so by signing up to create a Facebook App (that will give you an access token).

Many small organizations face barriers to cultivating a web presence. They don’t have the financial resources to pay for website hosting. There isn’t anyone available on a regular basis with web programming experience. Or maybe they don’t have time to keep all aspects of their web presence up to date.

Facebook provides one possible solution to this dilemma. However, most organizations require more than a Facebook Group or Page. There is a sense of legitimacy that comes with an actual website.

I recently completed a project for such an organization, and thought I’d share some tips here. Here’s how it works.

The organization has a Facebook Group (or Page). When they update their Group information, or when a post is added to the wall, the website is automatically updated.

The website is a single HTML page, hosted in the public folder of a free Dropbox account. The page is built using HTML, CSS and Javascript (Dropbox doesn’t work with server-side languages like PHP). The page uses Facebook’s Javascript SDK to pull data from the organization’s Facebook Group. In my particular project, I also used jQuery, a Javascript library that streamlines many complex scripting functions.

Once you’ve got the SDK loaded using FB.init, you use FB.api to grab the data and jQuery to display the data on the webpage. In its simplest form, it looks like this:

1| <script>
2|    FB.api('/2207893888, function(response) {
3|       var str = response.description;
4|       $("#fb-content").append(str);
5|    });
6| </script>
7|
8| <div id="fb-content"></div>

Let’s break it down.

  • Line 2 specifies what Group you want to pull data from. In this case, 2207893888 is “When I was your age, Pluto was a planet” (I don’t run this group).
  • The API delivers data in the JSON format. Line 3 creates a variable using the the Group’s description. You can see what kind of data is available by going to http://graph.facebook.com/2207893888/ (just replace the numerical identifier with your own).
  • In Line 4, jQuery syntax is used to append the variable content (str) into the #fb-content container.
  • Line 8 creates the div container in which the content is displayed.

Note that Lines 3 and 4 could also be combined into:

1|       $("#fb-content").append(response.description);

However, keeping the content in a variable lets you modify the data. For example. the API might return a url in plaintext. If you want to turn that plaintext url into a clickable link, you’ll need to massage it with some Javascript. See Line 45 in the my sample below.

01| <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
02|
03| <head>
04|    <title>Sample Title of Website</title>
05|    <meta property="og:title" content="The title of your page"/>
06|    <meta property="og:type" content="non_profit"/>
07|    <meta property="og:url" content="http://www.yourname.com"/>
08|    <meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs467.snc4/50336_2207893888_632_n.jpg"/>
09|    <meta property="og:site_name" content="The name of your site"/>
09|    <meta property="fb:admins" content="The Facebook user ID number of the administrator"/>
10|    <meta property="og:description" content="This is a description."/>
11|
12|    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
13|    <script src="http://connect.facebook.net/en_US/all.js"></script>
14|
15|    <style>
16|       #fb-content {
17|          border: 1px #888888 dotted;
18|          padding: 10px 15px;
19|          width: 800px;
20|          margin: auto;
21|       }
22|    </style>
23| </head>
24|
25| <body>
26|
27|    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
28|    <div id="fb-root"></div>
29|
30|    <script>
31|       // load the SDK
32|       FB.init({
33|          appId  : '2373072738', // Facebook Discussion Board ID (or create your own app to get an ID)
34|          status : true, // check login status
35|          cookie : true, // enable cookies to allow the server to access the session
36|          xfbml  : true  // parse XFBML
37|       });
38|
39|       FB.api('/2207893888', function(response) {
40|
41|          // pull the description data
42|          var stra = response.description;
43|               // replace all \n with line breaks
44|          var strdesc = stra.replace(/\n/g, "<br />");
45|          // pull the link data
46|          var strb = response.link;
47|              // replace the link text with html to make it clickable
48|          var strlink = strb.replace('http://www.iau.org/', "<a href=http://www.iau.org>www.iau.org</a>");
49|
50|          // display the data
51|          $("#fb-content").append("<b>" + response.name + "</b> ");
52|          $("#fb-content").append("<img src=" + response.icon + " /><br /><br />");
53|          $("#fb-content").append("<i>" + strdesc + "</i><br /><br />");
54|          $("#fb-content").append(strlink);
55|       });
56|
57|    </script>
58|
59|    <div id="fb-content"></div>
60|
61| </body>
62| </html>

The sample code above is fully functional (download here). It demonstrates just one way of using Facebook’s API.

  1. Save the code into an HTML file
  2. Upload it into the public folder of a Dropbox account (or on any webhost)
  3. “Copy public link” and then paste that link into your browser.
  4. You’ll see a simple webpage with data from the Facebook Group.

There are likely other, better ways to achieve this result. This is the method that I prefer. And there’s much more you can do: change the layout with CSS and other div containers; add images, or other Facebook data. For example, check out http://graph.facebook.com/2207893888/feed to see all the different items posted to the Group’s wall. You can embed Youtube videos or links, add profile pics, and more.

If you’re building a web presence for an organization short on resources, this could be a great solution. Once set up, it doesn’t require ongoing payments for web hosting. Updating the website is as easy as updating the Facebook Group. And if you integrate the Group’s feed/wall, you can put the power of the social web to good use!

2 Comments on “Building simple websites with Facebook’s API”

  1. 1 Graham p said at 1:03 am on August 22nd, 2011:

    Thanks for this, it’s very useful. I like the idea of updating in only one place and having the website automatically keep up.

  2. 2 Andrew A. Sailer said at 10:50 pm on October 10th, 2011:

    I’ve recently started a web site, the info you offer on this website has helped me tremendously. Thanks for all of your time & work.