Montag, 2. Juni 2014

How to add iframe to Facebook

Adding of an iframe to a Facebook page seems to be a lack of the Facebook documentation. At least i haven't find an explicit answer to this question. After some tries and errors i come to the solution. It is funny, but in a week after i finded the solution, Facebook changed the procedure and i've forced to look for a new one. After all here is the up-to-date solution "how to add an iframe to a Facebook page". Use it and enjoy the summer:

how to add an iframe to a Facebook page
Firstly you have to create a new app, which will be a page tab and will contain an iframe. The source of this iframe will be the page you will show in the iframe as the page tab of your Facebook page. To do so you go to developers page of Facebook, then you go to apps and create a new one. Fill in the display name of your page tab - this name will be shown as the title of the page tab on your Facebook page.
Further on the bottom of the settings page you see the page tab settings. Fill in the page tab name, then the page tab url and secure page tab url. The last two settings are very important: the page you will show in the iframe must be available both with http and https.
Important!
As i mentioned in my previous topis about page showing a page in an iframe as a Facebook page tab, not only your page must be available with https, but all of its assets like images, scripts, included libraries or CDNs must have https addresses.
Hint!
If you can't manipulate remote addresses of your assets write yopur urls down generally without a prefix, like "".
After you created your page tab with the sourced iframe, you are ready to add your page tab to your Facebook page. To do so you must do some manual job:
write into your browser's address field a following url:
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=YOUR_URL
Here are two parts  you will adjust manually:
  1. YOUR_APP_ID: this is an id of your newly created app / page tab, it is the first field in your app's settings, usually 16 digits long.
  2. YOUR_URL: this is the url, which populates the field "Tab Page URL" in your app's settings.
add iframe to a Facebook page
After you adjusted the link, hit enter and you will see this image "Add Page Tab". Clicking the drop-down "Choose Facebook Pages" you will see a list with all Facebook pages you ever created.
Hint!
If you hold down the shift button you will be able to add your page tab with iframe to more then single Facebook page.
Add the page tab with your iframed site to your Facebook page and you are done! Enjoy!
Yandex.Metrica