Facebook API: An Event RSVP Social Plugin That "Doesn't Exist" Yet...

I am surprised that during the lifetime of the whole social plugins development scene, Facebook still has not developed an event RSVP social plugin for us to utilize. Event managers around the globe would jump for joy if this was an offering on the platform.

An event RSVP plugin in my mind at least, could wind up being one of the most widely used social plugins in use outside of the Comments and Like Button social plugins which are both successful beasts in their own right.

So being a developer of client projects on the Facebook Platform, I decided to set out and see if creating an in-house solution would be possible in pulling off a sexy RSVP "social plugin" using the Facebook API end-points that we currently have access to. Knowing that I do have hooks into retrieving specific event information from the Facebook Graph API, as well as the fact that I can set a users RSVP status to an event on Facebook (with the proper permissions of course)! We're lookin' good here so far... Winning! Please take note that this article is not a tutorial of sorts for creating your own RSVP plugin, but more of a proof of concept rundown.

OK, so step one can we get event data and set a Facebook users event RSVP status, yes check. Step two, create the assets I needed to pull this off visually all while keeping consistent to the Facebook UI. The main draw to the end user of the social plugins is the familiarity they have with its UI and design aesthetics. Keeping a consistent look and feel across your multiple applications is key to the fact of not confusing your users as well as giving them something they are already familiar with in the end. So on the client facing front-end this should only really entail a RSVP Button and a RSVP Form.

After creating the necessary assets step three was to map out what overall structure and logic that was going to be needed for the internals of the plugin. An iframe display setup for the button/RSVP status, which should ease implementation across a multitude of websites. Of course we're definitely going to need the Facebook JavaScript and PHP SDK's. (I won't be getting into the whole user log in/out Facebook authentication routines here as that is another ball of wax and somewhat out of scope for this particular article. The remainder of the article will assume that you already have Facebook log in/out functionality already integrated. Also, I won't go into specifics on just getting the all of the events in this article. Check out the Facebook Graph API documentation on the Event object for more information.) Other than that, the only other code base we will need is the jQuery framework so that we can easily perform the necessary AJAX calls to the services we'll need later.

So we will have two front-end files and one back-end "web service" file for this project. "fb-rsvp-display.php" which is the file that will be loaded up into the iframe and displays the actual RSVP button and RSVP statuses. The second file is the RSVP form "fb-rsvp-form.php" which is depicted in the image below and is where the user will submit their RSVP status for the selected event.

The "fb-rsvp-display.php" file expects to receive an event ID so that it can retrieve the selected event info. From there we use the fql.query method of the Facebook API to get the user id and the rsvp status for the event in question.

//PHP Source Code Snippet
// Get uid, eid, rsvp_status for the selected event
$event_member_fql = sprintf('SELECT uid, eid, rsvp_status FROM event_member WHERE eid = %s', getSQLValueString($eid, 'int'));

// Execute FQL query
$members = $facebook->api(array(
	'method' => 'fql.query',
	'query' => $event_member_fql
));

Once we have that data back from our query, we then loop through the response data and determine which message should be displayed to the user as well as what state the RSVP button should be in.

// PHP Source Code Snippet
$count = 0;
$you = 0;
$yourStatus = NULL;
$friendsArr = (isset($uid) && $uid != NULL) ? $facebook->api("/me/friends?access_token=".$facebook->getAccessToken()) : array();
$membersArr = array();

// loop through the event members
foreach($members as $member) {
	// look for our status to the event
	if (isset($uid) && $uid === $member['uid']) {
		$you = 1;
		$yourStatus = $member['rsvp_status'];
	}

	// push our friends around who are "attending" the event
	if (deep_in_array($member['uid'], $friendsArr)) {
		if ($member['rsvp_status'] === "attending") {
			array_push($membersArr, $member['uid']);
		}
	}

	// get count of how many are "attending" the event
	$status = $member['rsvp_status'];
	if ($status === "attending") {
		$count++;
	}
}

The messages will vary based on how many people are attending (if any as of yet) and whether you are attending the event or not. The RSVP button state will swap between two states, a normal state where you can click to set your status, or a grayed out state indicating that you have previously set a status for the event. Clicking the RSVP button in this "grayed out" state will trigger the display form for you to change your status between the typical "Attending", "Maybe Attending", and "Not Attending" options.

This is where I actually ran into one minor shortcoming in regards to the RSVP portion of the Facebook API. The API oddly enough does not expose a way for us to remove or unset a users RSVP status. Such as with the "Remove this event" link you normally see when changing an event RSVP status on facebook.com... Booo! :'( Ok, so not a big deal users can still un-RSVP while on facebook.com directly. Although minor, it would be nice if this was possible to do through the API as it would complete the entire process with RSVP'ing for events from external sites.

And finally we have the "fb-rsvp-post.php" file, which will do the "behind-the-scenes" dirty work of submitting the events RSVP status via an API method call to the Facebook Graph API. This is initiated through a click event handler which makes an AJAX call to our "fb-rsvp-post.php" file.

// JavaScript Source Code Snippet
// RSVP button click event handler
$("input[name='rsvp']").live("click", function(evt) {
	evt.preventDefault();
	if ($("input[name='rsvp-status']").is(":checked")) {
		var eid = $("#eid").val();
		var status = $("input[name='rsvp-status']:checked").val();
		var dataString = "status="+status+"&eid="+eid;
		// post data to the back-end processing script
		$.ajax({
			type: "POST",
			url: "fb-rsvp-post.php",
			data: dataString,
			dataType: "xml",
			success: function(xml) {
				// RSVP successful, reload plugin display iframes
				$("#fr-"+eid).each(function() {
					setTimeout(function() {
						document.getElementById("frm-"+eid).contentWindow.location.reload(true);
					}, 500);
				});
				// close the form dialog
				$(document).trigger("close.facebox");
			},
			error: function(xhr, status, error) {
				$(document).trigger("close.facebox");
				alert("There was an error processing your RSVP request.");
			}
		});
	}
});

In conclusion, I really think a RSVP Event Social Plugin should definitely make its way onto the Facebook Developer Roadmap sometime within the near future. It will only bolster their online social networking presence (yeah, like they need any more help with that...) even more than it does now by giving event managers and site owners a tool in which they can garner more attention to the events that they are promoting.

RSVP Plugin Live Example
If you are interested, you can see the Facebook event RSVP plugin in action over on the events page of the Love West Reading website.