Musielak Marek

Posted on Thursday, November 10, 2011 by Marek Musielak

Sitecore Facebook Device - Facebook Open Graph device for Sitecore

Recently I've been working on a Sitecore project for a large company that produces distilled beverages. One of the requirements was that before user can access any content within the site, they must pass age verification process. Still we needed to be able to share any of the pages on the Facebook, with the content specific for that particular page, not the data which is displayed on the age verification page.

While sharing the page on Facebook, it crawls the page and looks for the data that can be displayed for other Facebook users. The first thing which is checked is open graph data. I'm not going to explain it deeply in this post, but if you want to know more, you can learn it from here open graph protocol - facebook developers. What we need to know for the purposes of this article is that there are some meta tags that should be included within the html page header that are used by Facebook. Our goal was to display the page with those meta tags instead of the age verification page, if the site is crawled by Facebook.

Sitecore Facebook Device User Agent - 'facebookexternalhit'

For this purpose we chose the approach that uses Sitecore devices functionality. When the page is accessed by Facebook, the user agent of the facebook browser introduces itself as

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

We created a new device in the Sitecore that is used for the browser agent containing facebookexternalhit. Then we prepared a layout that is used for this device only and which contains all the open graph meta data required by Facebook. This allowed us to assure that all the end users will have to age verify before accessing the site, while Facebook can retrieve meaningful data.

Once you've set up the device and the layout, you can easily check whether you did it properly using the official Facebook URL Linter. The screenshot below shows an example of debug result for a page which has open graph meta data set.

Facebook Linter - Open Graph Debugger

Read More »

Related Posts:


4 Responses to Sitecore Facebook Device - Facebook Open Graph device for Sitecore

  1. Alex Shyba
    November 10, 2011 at 6:18 PM
    very creative way of using Sitecore devices, awesome job!
  2. Marek Musielak
    November 10, 2011 at 8:58 PM
    Thanks Alex!
  3. dami
    December 9, 2011 at 10:26 AM
    Great post.

    Perfect example how to use proper feature for the problem. Very clean and transparent solution.
  4. Leszek Ciesielski
    August 3, 2012 at 11:29 PM
    Missed this before. Very nice and clean way of handling this!

Post a Comment