Sitecore & Facebook Integration - Part II

Jan 13, 2010
Jaime Davila

Months ago I had to integrate Facebook with a PHP app, that application gets info from nea.org. This little app, will just display the classical "hello yourname" with the info inside home, except for the Facebook Connect link, to accomplish this we'll create a second layout called FacebookLayout. The tricky part is how to recognize that the request comes from facebook.com and set the correct layout. We need to create a device (called Facebook) and with C# code we'll set the correct response.

Let's begin, first we need to create the facebook app, to accomplish this you can follow this guide but as we're going to create a .NET application, probably you want to go directly to this guide. Please just set up the app into facebook. You can refer to the first part of these Sitecore & Facebook series to learn how to set up VStudio with your Sitecore Website project.



Open web.config file to include your "API Key" and your "Application Secret" into the web.config file, also you need to set up your callback url, which is the url of your site.

<appsettings>
<add key="APIKey" value="your api key here"></add>
<add key="Secret" value="your secret key here"></add>
<add key="Callback" value="http://www.yourwebsite.com/"></add>
</appsettings>

Note: the code that will be inserted into facebook MUST NOT contain head or body tag

The class that will be delivered to facebook must inherited from facebook.web.CanvasFBMLBasePage and you must reference facebook and facebook.web to the "using" section. We need to force the user to logon into facebook, to accomplish this we could do:

protected void Page_PreInit(object sender, EventArgs e)
{
base.RequireLogin = true;
}

Even it's not in this snippet you need to inherit your class from "Facebook.Web.CanvasFBMLBasePage".

Now we need to tell sitecore we want to use that layout for the default device. You need to create a new device: Sitecore/Layout/Devices->New Device.



After you do this please set the Query String to dev=fb; this is the query string that we need to set up in out facebook app: Canvas URL "http://yoursite.com/?dev=fb"



You need to be aware to include the query string in any request or redirection that your facebook app could do if you want to keep the application running inside facebook with its own rendering.

Don't forget to set up your layout for every page you want to render with the new device.



Publish the site and you can test your app into facebook, go to http://apps.facebook.com/yourapp and you're done :)