Adding Custom HTML/Tab To Facebook

This was the best article I could find that explained, in detail, how to add tabs and custom html content to a Facebook business page:

http://www.hiddenwebgenius.com/blog/guides/how-to-add-custom-tabs-to-your-facebook-business-page/

Article Content

Here’s the article content as I found it on March 23rd, 2018.

Facebook, because of its popularity, is now being seen by bussiness owners as a very effective marketing tool, a way to help them extend customer base and build customer loyalty.
To be able to maximize the marketing potential of Facebook, here are some tips on how you can customize your business page with additional tabs:

1. Login to facebook as a developer. Go to https://developers.facebook.com/apps and use your normal Facebook login details to access the page.Facebook

2. Create your app. Click “Create a New App” located on the top left-hand corner of the page. Provide a “Display Name” and a “Namespace”.

Display name – what your app or tab will be called
Namespace – unique ID for your app or tab
Leave the “Web Hosting” section unchecked and then clicked on “Continue”.

3. Add an image to your custom tab. Choose an image or icon for your tab. Think about your tab as a call-to-action as this will get displayed at the top of your business page. You can upload a custom image for your tab by clicking on “Edit icon”. Make sure that you choose an image that represents your brand and can get visitors clicking!
Fill in the “Basic Info” window with your domain and category details.

4. Create the page for your tab. Start creating an external page where people will get directed to after they click on your tab. To make sure that your page content is correctly displayed in Facebook, set the width of your web page to 520px to 810px.

Think of the Facebook tab as an iFrame inside Facebook – you can display pretty much anything inside it. Say, if you are looking for leads, you can use your Facebook tab as a way to generate leads by incorporating an opt-in form in the page.

5. Connect your custom tab with an external page. Go back to http://developers.facebook.com/ and go to the “App settings”. Scroll down and click on “Select how your app integrates with Facebook”, then choose “Page Tab”. Name your tab and then paste the URL of the external page you’ve created in Step 4 in the “Page Tab URL” field.
To make sure that your new Facebook tab is viewable by everyone, you will also have to provide a secure URL. This is just the same URL as your “Page Tab URL”, but with “https://” in front instead of just the regular http://. Even if you didn’t set your website to support https, your tab will still work for any viewer who has the Facebook secure browsing settings disabled.

6. Add the tab to your Facebook business page. In order to add your custom tab to your business page, you will have to visit this link:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

Before you actually visit the links, make sure that you replace the parts in red – “YOUR_APP_ID” and “YOUR_URL” – with your own app details. Facebook will provide you these details as “App ID/API Key” and “Site URL”, respectively.

After following the steps provided above, your custom Facebook tab should now be displayed below your cover photo together with the standard page tabs like “Photos”, “Events”, etc.