I'd like to talk today about a little challenge I got: Integrate Sitecore with Facebook.

Before to start working we need to download the Facebook API Toolkit for .NET, once you get the framework you need to copy the .dll files into $(iis_path)\SitecoreWebsite\Website\bin\; probably you only need to copy Facebook.dll, Facebook.Web.dll and Facebook.Web.Mvc

We need to import the WebSite project into VStudio so we can take advantage of developing within an IDE and all the features you have using VStudio, to accomplish this please follow these steps:

  • Click File->New->Import an existing project...
  • Once the project is uploaded into VStudio: Right click in References folder
  • Add Sitecore.Kernel.dll as a reference
  • To include any folder that you're not able to see, click the "view all" icon in the solution toolbar, once you see all the folders, just right click the folder you want to include and select "Include in project"

As you can see in this post you need to modify your web.config file; something that it's not said is that you need to add a reference into the VStudio project to the Facebook API Toolkit for .NET.

Now, how are we going to integrate Facebook with Sitecore?, well there are some options and we're going to focus in two of them: Facebook Connect and FBML (Running your app inside Facebook).

Because of time, I'll be using the sample data that came preinstalled into Sitecore, you can change the templates or even modify the layouts according to your site, the logic is the same, but during the excersice probably I'll make some changes to the layouts or the templates.

For a detailed description about how to integrate your app into Facebook Connect follow this link, here I'm going to give you a quick summary of the steps involved in Facebook Connect integration.

  • Create a page called xd_receiver.htm into the root
  • Put this code in the new created file
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html >
    <body>
    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/XdCommReceiver.js" type="text/javascript"></script>
    </body>
    </html>

  • Reference the Facebook XML Schema in the html tag
  • Reference the Facebook script library in the head tag
  • Include the login button
    <fb:login-button onlogin="window.location.reload()"></fb:login-button>
  • I'd like to think here's where the magic starts: Include this tag in every page you want to include Facebook Connect
    <script type="text/javascript">FB.init("[PASTE API KEY HERE]", "xd_receiver.htm");</script>
    If you decide to put xd_receiver.htm into a different path, here you MUST indicate the file location



Something we need to take in count: Facebook integration collisions with Sitecore in some ways, for example after you add the <script>FB.init(...)</script> you can't open the layout in the Sitecore Developer GUI becaus the cross-domain script. One possible solution is set IE to allow any connection or you, as developer, can include in the script a condition to execute the facebook call.

As you can see or test it if you decided to follow this excersice, now you have the Facebook connect which allows the user to see his name after he logged in or if he's already logged in to facebook. But we can go further and decide to incorporate some extra functionality to our site, let's say we want our visitor can see his picture.



Let's keep with this link to check how to code correctly the most fundamental parts of our code. I'm going to highlight the changes that we need to do:

  • Set the APIKey and the Secret values into AppSettings in web.config then you can call your values using ConfigurationManager.
    private string ApiKey = System.Configuration.ConfigurationManager.AppSettings["APIKey"].ToString();
    private string SecretKey = System.Configuration.ConfigurationManager.AppSettings["Secret"].ToString();
  • Please don't forget to try/catch your code because you can get a "session expired" exception.
    private void Page_Load(object sender, System.EventArgs e)
    {
    try
    {
    connectSession = new ConnectSession(ApiKey,SecretKey);
    ...
    }
    catch(Exception ex)
    {
    ... }
    }

That's it, now you can customize your site to include Facebook Connect, the next topic will be how to incorporate your sitecore app inside facebook.