|
This is the continuing story of my adventures with the Facebook Connect API (Part1 , Part2).
I don't mean to represent this as an in-depth or expert tutorial, just
an experiment I conducted to see how long it would take me to produce a
working application that did something useful. The answer, about a
week. I actually set up a first test a few weeks ago, after seeing a
talk one of the Facebook guys gave at the Future of Web Applications
conference in Miami. But I didn't get serious about this until last
week, when I did my first blog post on this and promised to come back
with a progress report or two.
In the process of working on this, I've gotten a clearer idea of how
this could be useful for many organizations that interact with a big
user or consumer base on the web.
What I'm showing below is working code, although it's not
necessarily stable yet. It's based on code freely available from
Facebook's Developer site, including both the PHP client library and
code from a sample application called The Runaround.
There are simpler ways of interacting with Facebook using just
JavaScript and XHTML, but for what I was doing having this example of
how to build the server-side piece was invaluable. Developers working
with Java, .NET, and other technologies can plug into the Facebook API
as well, but Facebook uses PHP itself so its PHP examples tend to be a
little better fleshed out.
Since my last post, I have rewritten the PHP User class included
with the sample application to match the architecture of my website
(particularly the database structure and the PHP sessions scheme I use
to keep track of whether a user is logged in). When a user
authenticates to Facebook, I check to see if that person's Facebook ID
is present in my user table. If so, they're automatically logged in. If
not, they get an opportunity to log in to the local website and link
the two user accounts.
Let me walk you through what I've got working.
Adding a Facebook Connect option to the login page ...
... clicking the button brings up this prompt ...
First time I log in this way, I need to connect my local website
account with my Facebook account. In the sample application, the
behavior was different -- it would create a new user account if one did
not already exist, associated with a given Facebook ID. The sample app
even included a function for deleting existing accounts in the event of
a conflict -- not what I want to have happen.
So instead, I tell the user that they need to complete the
connection by logging in with their regular password. Alternatively, if
they supply the email address associated with the account, I will send
them an email with a coded link they can click on to verify their
ownership of the account. Either way, they wind up with both a session
ID for my site and an authenticated connection to Facebook.
When I successfully authenticate myself to the website, my Facebook
user ID is recorded in the same database with my other user
credentials. On my next visit, I'll be able to skip logging in locally.
As soon as I establish a Facebook Connect session, I will be
automatically logged in both places. If I am already logged into
Facebook when I come to this website, I don't even have to enter my
Facebook password. I just click the Facebook Connect button, and I'm in.
The next screen shows I am logged into both accounts. Since this is
a community calendar website, it shows a list of events that I can
cross-post to my Facebook page. The ID from the table where these event
details are stored is encoded in the link.
So when I click the link, the next page retrieves the event details
from the database and formats them for submission to Facebook.
Specifically it formats them as a JSON (JavaScript Object Notation)
array, which is what will be transmitted to Facebook, decoded, and
recorded on my Wall page.
This is an example of PHP code being used to generate JavasScript
text that will be included in a web page, with server-side routines
used to retrieve data, format it, and insert it where it is required.
Although JSON comes from the world of JavaScript, PHP provides the
handy json_encode function, which here is being used to format an array
of data extracted from my events database.
In JSON format, it comes out looking like this:
{"eventid":2462,"eventname":"Event Name here","eventdetails":"Details ..."}
Before this will work, you have to use the tools on the Facebook
developer site to register what they call a "feed bundle" that
specifies how the data that arrives at Facebook as JSON will be
formatted for display. It's essentially a wizard-based process, and
when you get to the end of it you have a "feed bundle id" to include
with any submissions of this type. In my case, I want to format the
title, date, and description of the event.
Before Facebook publishes the information, it asks permission. Most
of the work of generating the required JavaScript comes from Facebook
sample code. I did find a problem with this function from The Runaround
sample app, in the file fbconnect.php
function register_feed_form_js($data)
{
$feedstring = sprintf("facebook_publish_feed_story(%s, %s); ",
get_feed_bundle_id(),
json_encode($data));
onloadRegister($feedstring);
}
I'm including this code because I had to make one small modification
to make it work. In the sample app, the formatting codes within the
sprintf (string formatting) function were "%d, %s" and I had to change
it to "%s, %s" - the difference between formatting that first variable
as an integer and formatting it as a string. Specifically, this is
where the feed bundle id goes, and although it worked fine for the
sample app it gave me an error saying I was submitting an incorrect
code. Apparently the number of sample apps registered with the system
has grown so large that JavaScript handles the long number better if
it's supplied as a string of numbers rather than a computer integer. I
found this as a tip in in the Facebook developer discussion boards,
where someone else had run into the same problem.
With that problem solved, it works:
I also got this nifty "multi friend selector" to add to my website.
All I had to do was add a few lines of FBML, the Facebook XML dialect,
and the built-in JavaScript libraries did the rest. I found some pretty
good documentation on how to make it work at http://wiki.developers.facebook.com/index.php/Fb:request-form.
However, I should admit that at the moment I've got this working well
when I visit the page in Firefox, but not Internet Explorer.
Overall, I'm still working with a little too much code that I only
halfway understand, which means I keep breaking things and not knowing
why they are broken. But I've seen enough to get an idea of how many
other possibilities there are for this approach. And if I could hack
this out in a week, working on it in my spare time, just think what you
could do with a more serious effort.
Only registered users can write comments.
Please login or register. |
