.png?width=667&height=667&ext=.png)
How To Create a Facebook Page Tab App with Kentico CMS
Introduction
In this post I will walk you through creating a new Page Tab App in Facebook using any existing Kentico CMS web site page. It is shockingly easy how to do this once you know one simple secret. But more about that later on in this post. The idea here is that we can leverage the fact that your Kentico CMS web site can easily be extended to host pages or apps "inside" of Facebook.
In case you do not know what a Facebook Page Tab App is, I would encourage you to read more about it on Facebook's developer documentation. Basically a Page Tab App is one of the small boxes, or tabs, that appear on any Facebook Page.
Most on-line marketers configure their brand's Facebook Page to have custom tabs that showcase a brand's product a service, or utilize custom tabs to create mini applications that give incentive to Facebook users to “Like” the page or brand. These tabs are really nothing more than just iframe elements to an html page that can be hosted anywhere. Specifically not hosted on Facebook itself.
I am providing a full walk-through on how to create this solution below. However, if you want to jump right to the end result and see what the heck I am talking about, you can navigate to my own Mcbeev.com Page on Facebook and click on the Subscribe Page Tab App. That is what we are building in the full example.
Requirements
The first pre-requisite is that you will need your Kentico CMS web site to be accessible via https and have a correct valid SSL certificate to the domain. SSL is not a Kentico requirement, but instead it is a Facebook requirement that came into place about a year ago. Facebook has put its foot down that all Page Tab Apps need to served over a secure URL via the https protocol. There is not much we can about that.
Up next you will need access to CMSDesk to create a new document in the Content Tree, edit your site's Page Templates, possibly access to edit your CSS files via CMSSiteManager, and finally you will need direct access to your web.config file at the root of your Kentico installation. If you have all of this set up, the rest of the process is a breeze. Oh, and of course you will need to have an existing Facebook Page and have developer access to it. If you don't have one, you can find out how to create a Facebook Page on a post I made last year when I talked about auto publishing from Kentico CMS to Facebook.
Now let's get started on creating our custom Facebook Page Tab App.
Create Your Content
The first step is to create the page in your Kentico CMS web site that you want to show on your Facebook Page Tab App. To do so, create a page anywhere on you site, and select a unique Page Template, or create a new Page Template for the new page.
For example, I created a page at the root of my site and named it "FB-Follow". A smarter place in the Content Tree might be in a folder that is setup to organize your landing pages. It doesn't really matter where as long as it is in the Tree. The page can contain any content that you want. In this example I am using just Newsletter Subscribe box and a repeater to show my recent blog posts. The key idea though is that the page layout does not exceed 810px in width. This matches the Facebook guidelines for creating Page Tab Apps. It will still work if the layout of the page is wider than 810px, but you will see an annoying horizontal scroll bar.
Pro Tip: Make this new page template a Master Page Template. Doing so will allow you to have a unique look and feel, or a unique menu system on the page, or no menu system at all. Also remember that whatever script resources you load on this page will have to work under SSL.
There is also a skinny version of the Page Tab App you can use at 520px. But in my opinion that is not enough room to work with. Once you have your page created and content ready, you can move on to the next step.
Create a New Page Tab in Facebook
In the next step of the process we need to let Facebook know about our new tab. There is a great tutorial that Facebook has to on how to do this in case my write up is not enough help. Basically the idea is that you log into your developer account with Facebook and create a new App. Give the new App a name and enter in a Page Tab App URL and Secure Page Tab App URL. For the two URL values enter in the full absolute path to your page we created in step one above. For me it was http://www.mcbeev.com/fb-follow and https://www.mcbeev.com/fb-follow. Leave the Page Tab Edit URL blank, and change the Page Tab width to 810px. Note: at this point you should be ok with leaving the App in Sandbox mode. This means that only you can see it on your Facebook Page until it is ready for the world to see.
The next step is a little tricky at first but not too bad. Copy the following URL into a new browser window, but do not hit enter or navigate to it yet.
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Once it is in your address bar, change the value of YOUR_APP_ID to the App ID/ API Key from your main Facebook Page. It should be about 16 characters long and all numeric characters. Also change the value of YOUR_URL to the same secure Page Tab App URL that you specified when creating the new Page Tab. Once both of these values are updated hit return to navigate to the new URL. Make sure you are still logged into Facebook of course.
If everything worked you should see a new popup dialog from Facebook. The dialog should allow you to chose which of your Facebook Pages that you want to relate the new Page Tab App to. For me I selected my Mcbeev.com Page.
Again if you have any trouble with this please follow the full tutorial at Facebook. That is all it takes to tie the new Page Tab App to your Facebook Page. At this point you should be able to try it out by choosing the Tab on your Facebook page. And it should lead you to a screen that looks just like this:
Yep that's right, a blank white page. A little surprising isn't it ?
Finally The Secret: Disable Clickjacking on the Kentico CMS URL
Now at this point you are probably asking yourself two things. First, WTF Brian, why would I go through all of this to get to a blank white page? Second, WTF is Clickjacking? To answer the first question we need to start at the second one. Clickjacking is a technique that hackers use to mess with people. You can read more about Clickjacking here if you are unfamiliar with it.
Ever since Kentico CMS 7.0 came out, by default all URLs are protected against this method of attack. Pretty cool eh? Dominik Pinter is the chief security architect at Kentico and is in charge or making sure our Kentico platform is rock solid and secure. Dominik has written an entire blog post on Clickjacking protection and other security improvements in Kentico CMS 7. I highly recommend reading it if you are a Kentico developer.
To tell Kentico CMS that it is ok for a certain URL to load inside another frame you can configure a special setting in the web.config file. Add the following line and change the value to whatever URL you created with your page in the first step. Open up the web.config file with Visual Studio, or your favorite text editor, at the root of your Kentico installation and add the following line in your Configuration -> AppSettings node.
Dominik also mentions that you can specify the value as "/" which would entirely disable Clickjacking protection on every page of you site. However, DO NOT DO THIS.
Pro Tip: You can chain as many URLs together as you would like in this appSetting key, just make sure that you delimit multiple URLs with a semi-colon. For example value="/FB-Follow;/Contact-Us;/Products/Product-A".
After you add that line, save the web.config file (please note this will cause your web site to recycle its app pool and restart the entire site). Go back and re-load your Page Tab App on Facebook. It should now work!
Conclusion
So there you have it. In this blog post I have showed you how to create a Facebook Page Tab App with any Kentico CMS web site. The keys are to create your page, follow the width guidelines that Facebook calls for, tell Facebook which secure URL you wish to use for the Tab, and disable that URLs Clickjacking protection on the Kentico CMS engine. After that it should be smooth sailing. If you found this post to be useful let me know, post a comment here, or like Mcbeev.com on Facebook. Thanks!
