I had so many problems with adding a new tab to a Facebook page containing an iframe content from an external website, that I though i’d put this tutorial together for others who might be experiencing the same difficulties.
Requirements
In this tutorial I assume you have already set up or know how to set up the following things:
- Facebook Page
- Facebook Developer account
- URL to external website
The steps
Create New App: Go to https://developers.facebook.com/apps/ and create a new app. Then choose your app from the list and click the Edit App button on the top right.
Allow Tab feature: Scroll down the page and activate the Page Tab field. Here you need to fill in the name, url and secure url. The URL is the address to an external page (Example: https://www.my-website.com/facebook-landing-page). More and more users are using Facebook’s secure browsing feature. If you’d like to provide a page for these users as well, you’ll need to provide a url to a website with ssl security as well (Example: https://www.my-website.com/facebook-landing-page). Facebook actually requires this address now, but it is unclear what happens if you don’t provide it.
Activate the tab: At the time of writing, there is no way to activate the tab other than using the link below. In the past, this was done by going on the application page. But since Facebook has gotten rid of his page, we need to use this link (replace YOUR_APP_ID with your apps id. This can be found in the url of your app).
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=https://www.facebook.com/
When you go to your Facebook page you should now see your new tab (If not, click the arrow on the right of your page to expose the second row of tabs – you might find your new tab there)