Skip to content

How to create a simple Facebook Tab from HTML?

There are many ways to customize your Facebook Page. The obvious ones are certainly the Profile Picture and the Cover Picture. Or even the CTA button (Call To Action).

How to create a simple Facebook Tab from HTML?Another element that is often used but not as much is the Custom Facebook Tab.

Some of these already exist: they are like apps that you simply need to install on your Facebook Page (such as Twitter or Instagram).

Others need to be created.

Therefore: How to create a simple Facebook Tab from HTML?

There are many ways to do so. I will explain to you the most easy and quick way to embed your page, blog, landing page, contest or whatsoever directly into Facebook in a blink.

What do we need to create a simple Facebook Tab from HTML?

  • A Facebook Page with full Admin rights;
  • A web page or landing page that we want to embed;
  • The source code of the latter (HTML);
  • 10 minutes time, not more.

— STEP 1 —

In order to create a simple Facebook Tab from HTML you must first of all go to this link right here: Add Static HTML to a Page. And obviously you should click on the green button! 😛

How to create a simple Facebook Tab from HTML?

Immediately after that, you must select for which of your pages you want to add the static HTML.

How to create a simple Facebook Tab from HTML?

Once that is done, simply hit the “Add Page Tab” button.

— STEP 2 —

Now, among your Tabs in your Facebook Page you will see a Welcome tab, as this one here below:

How to create a simple Facebook Tab from HTML?

To create a simple Facebook tab from HTML you obviously need to click on the “Set up tab” button. You will end up in the Thunderpenny dashboard of your Facebook Page. There you will be able to directly paste your HTML code of your page (in the index.html box, as you can see right here below).

How to create a simple Facebook Tab from HTML?

— STEP 3 —

The last thing you need to do to create the Facebook Tab from HTML is to actually add the HTML code in the index.html box.

I took, as an example, the HTML code of a typeform I created exactly for this purpose: see it here if you want.

You will simply copy & paste the HTML code here, as I did:

How to create a simple Facebook Tab from HTML?

Then you just need to hit the “Preview” button and see how it looks. Maybe you will want to adjust the width and height values directly into the HTML 🙂

Once your happy with the result, just click on “Save & Publish”, go on your facebook page and you’ll be ready for the last step 😉

— STEP 4 —

Now you know how to create a simple Facebook Tab from HTML. Your Facebook tab is fully functional, as you can see here. But we still have that annoying “Welcome name“.

How to create a simple Facebook Tab from HTML?

To change that simply follow these instructions:

  1. Go into the settings of your facebook page;
  2. On the left side menu, click on Apps;
  3. Among the Added Apps you might already have, there now is “Static HTML: iframe tabs“: simply click “Edit Settings” (screenshot here)
  4. You can now edit the name here! Then simply hit “save” and “ok” 😉 (screenshot here)

And that’s all folk! 😉

Remember that if you change the source HTML code the tab will also change. Same thing if you delete the landing page or whatever it is you’re embedding!

Published inGuide
  • fred

    does not work anymore…; Facebook has removed apps imports…