Adding A Glofox Custom Tab to Your Facebook Business Page

Follow

This article will take you through;

  1. What is a Facebook Custom Tab?
  2. How do I set up a Facebook Custom Tab?
      1. Getting started with Facebook for Developers
      2. Creating a web portal URL for your custom tab
      3. Adding your custom URL to your custom tab
      4. Adding your custom tab to your Facebook Page
      5. How do I move my new custom tab to the top of the list of menu options on my Facebook Page?
  3. Next steps and additional support

What is a Facebook Custom Tab?

A Facebook custom tab is an extra tab you can add to your business’s Facebook Page. This tab will display a feature from your Glofox web portal on your business’s Facebook Page using an iFrame.

You can add any feature from your Glofox web portal as a custom tab and there are no limits to the number of custom tabs you can add to your Facebook Page.

Please note;

  • In order to add a custom tab, your Facebook Page must have 2,000 or more likes as per Facebook’s Page Tabs rules
  • Page tabs will only be displayed on the web-version of your Facebook Page. Mobile custom tabs are not supported by Facebook at this time

How do I set up a Facebook Custom Tab?

Getting started with Facebook for Developers

Firstly, you will need to visit developers.facebook.com and log in using the credentials that you use to log in to your business’s Facebook Page. Once you have logged in and set up a Facebook developer account, you will be prompted to create your first app. Alternatively, you can navigate to developers.facebook.com/apps and click ‘Create App’ to get started.

FB1.png

Once you click 'Create App', or ‘Create First App’ if this is your first time, you should choose the ‘Manage Business Integrations’ option and click ‘Continue’.

FB2.png

From the ‘Create an App’ page you should follow these steps:

  1. Choose an ‘App Display Name’. This can be anything you want as no one will see it but you. 
  2. Add an ‘App Contact Email’. 
  3. Select ‘Yourself or your own business’ as the ‘App Purpose’. 
  4. Selecting the option for ‘Do you have a Business Manager account’ is totally optional and you can continue without it for now. 
  5. Click ‘Create App’.

FB3.png

Next, in the sidebar on the left-hand side of the screen, while on your app page in Facebook for Developers, click ‘Settings’. Then click ‘Basic’.

FB4.png

Scroll to the bottom of the page and click ‘Add Platform’. Once you are prompted to ‘Select Platform’, you should select ‘Page Tab’.

FB5.png

Next, we will need the exact web portal URL you wish to use. The steps to get this are detailed below. You should keep the Facebook for Developers page open in a separate browser tab while you locate your web portal URL in Glofox.

Creating a web portal URL for your custom tab

  1. To get your web portal URL, navigate to the web integration page of your Glofox dashboard. 
  2. Once you’re on the web integration page, click ‘Create Custom Link’. You can then select the features you wish to display. 
  3. Once you’re happy with the selected features, click ‘Create Custom Link’.

FB6.png

Next, select the ‘Share Link’ option and click ‘Copy’.

FB7.png

If you have Sales and Marketing tools and wish to use a Lead Capture form as your custom tab, please read our guide on how to can convert your membership plan URL into a lead capture URL.

Adding your custom URL to your custom tab

Once you have your URL, you will need to shorten it using bitly.

Please note;

You must shorten the link or the custom tab will not work.

Back on the Facebook for Developers page that you have open, you will see a form to set up your custom tab. Paste the shortened link from Bitly in the ‘Secure Page Tab URL’ field. Then, in the ‘Page Tab Name’ field, give your tab a name. This is what visitors to your Facebook Page will see.

FB8.png

Next, scroll to the top of the page to complete the setup. 

  1. Enter bit.ly in the ‘App Domains’ field. 
  2. Add the link to your privacy policy in the ‘Privacy Policy URL’ field. 
  3. Select a category for your app. 'Lifestyle' is the typical selection.

FB9.png

Click ‘Save Changes’, at the bottom of the page, and the app setup will be complete.

Please note;

Depending on your version of Facebook you may need to toggle your App from ‘In Development’ to ‘Live’. This toggle will be visible at the top of the page, if it is applicable to you.

FB10.png

Adding your custom tab to your Facebook Page

Now that your custom tab has been set up, you will need to add it to your Facebook Page. 

Please copy the below link and replace APP_ID_HERE with your App ID which can be found on your Facebook Developers page, also ensure that you add your shortened bit.ly link at the end after the redirect_uri=

 

https://www.facebook.com/dialog/pagetab?app_id=APP_ID_HERE&redirect_uri=Your_bit.ly_link_here

 

For example, if your App ID is 12345abc, the URL will be:

https://www.facebook.com/dialog/pagetab?app_id=12345abc&redirect_uri=https://bit.ly

Please note;

The format of this URL must be exact, there should be no spaces.

Enter this URL into the address bar of your browser and you will be brought to a page similar to the below, where you will be asked to choose which Facebook Page you wish to use the custom tab on.

Select the Facebook Page you wish to use and click ‘Add Page Tab’.

FB11.png

Now, if you visit your Facebook Page, you will see your new custom tab as the last tab in your menu.

FB12.jpg

How do I move my new custom tab to the top of the list of menu options on my Facebook Page?

You are able to reorder your Facebook tabs from your Facebook Page by clicking ‘Settings’ and selecting ‘Templates and Tabs’ from the menu on the left.

You will then be able to drag your new tab to reorder it in the list of available tabs to a position of your preference.

FB13.gif

Next steps and additional support

For more information on the Glofox web portal and getting the most of our lead capture form, you can check out the resources below.

For additional support, reach out to support@glofox.com and we will be happy to assist you.

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.