Skip to content Skip to main navigation Skip to footer

How to upload a campaign to a Facebook Page Tab?

1. Introduction

This article explains how to upload a campaign which you have made and published on Studio (https://studio.brandedminigames.com) to the Facebook Page tab menu.

2. Create a campaign for Facebook

Please check and follow this guide to create a campaign for Facebook on Studio platform.

3. Create a Facebook App 

You need to create a Facebook App and add it to the page tab menu with a Facebook Developers account (https://developers.facebook.com).

3.1 Add a New App

In Facebook Developer site, select “My Apps” button > select “Add a New App” button > select “Integrate a Third-Party Gaming App” button

3.2 Create a New App ID

Insert “App Display Name”, “App Contact Email”, and select a Business Manager account (optional) > select “Create App ID” button

Note: For the “App Display Name”, certain terms like “face” are not allowed. Please check the Facebook alert message for more detail if your “App Display Name” is not accepted.

3.3 Facebook App Settings

After your Facebook app is created successfully, you will see the App Dashboard.

Please select “Settings” on the left menu > then select “Basic” > Insert the correct App Domains, Contact Email, Privacy Policy and App Purpose.

Note: App Domains can be changed depending on the domain of the Campaign URL in Studio.

E.g. You need to input branded.mini-games.io to App Domains field if your Campaign URL looks like this:

https://branded.mini-games.io/?php=landing@facebook&campaign_no=7147

And you also need to fill in “Data Protection Officer Contact Information” if you plan to run the campaign in Europe.

3.4 Add Platform

In Settings > Basic page, select the “+ Add Platform” button.

In the popup appeared, select the ‘Page Tab’ item.

Insert your Secure Page Tab URL in the Facebook Settings page in Studio to Secure Page Tab URL in Facebook by following below steps:

  1. Copy the value of “Secure Page Tab URL” in the Facebook Settings section of the campaign.
  1. Paste that value to the “Secure Page Tab URL” field in the “Page Tab” section of Facebook App Settings.
  2. Insert the Page Tab Name. 
  3. Insert Page Tab Edit URL: it can be the same as Secure Page Tab URL.
  4. Upload the Page Tab Image (size 111 x 74px).

3.4 Insert App ID and App Secret to Facebook Settings in Studio

Insert the App ID and App Secret of your Facebook App into the Facebook Settings of your campaign in Studio.

First, please go to Facebook App Dashboard > select “Settings” on the left menu > select “Basic” > Now you can see the App ID, App Secret (tap “Show” button to get it) , take note or copy them.

Then go to the Facebook Settings section of the campaign, paste the copied App ID and App Secret there.

3.4 Insert the campaign URL to “Valid OAuth Redirect URIs” of your Facebook App Login Settings

Insert the campaign URL into the “Valid OAuth Redirect URIs” of your Facebook Login Settings.

First, please go to Studio > go to Dashboard > select your campaign > select “Facebook Settings” > copy the campaign URl to use for “Valid OAuth Redirect URIs” there.

Then, please go to Facebook App Dashboard > select + Product on the left menu > select “Set Up” in Facebook Login product.

A “Facebook Login” product menu will be added to your left menu, select “Settings” > insert the campaign URL which you have copied before to “Valid OAuth Redirect URIs” field > select “Save Changes” to save the settings.

3.4 Status & Review

In the Facebook App section, toggle on the settings “In development” on the top to make your Facebook App become “Live”.

4. How to add the campaign to Facebook Page Tab

4.1 Add the Facebook app to Facebook Page Tab Menu

As there’s no ordinary menu to add an app to the Page Tab in the Facebook Setting, you need to copy the below URL with your App ID to your browser and select your Page what you want to add:

https://www.facebook.com/dialog/pagetab?app_id=[AppID]&redirect_uri=[EncodeCampaignURL]

AppID: the App ID of your newly created Facebook App.

EncodeCampaignURL: the encode URL of the campaign URL.

You can go to https://www.url-encode-decode.com/ and input the campaign URL there to get the encode URL.

E.g. https://branded.mini-games.io/?php=landing@landing&campaign_no=27324 → https%3A%2F%2Fbranded.mini-games.io%2F%3Fphp%3Dlanding%40landing%26campaign_no%3D27324

After adding the App ID and EncodeCampaignURL, the URL to add the game to your Facebook page custom tab may look like below:

E.g. https://www.facebook.com/dialog/pagetab?app_id=609300929973903&redirect_uri=https%3A%2F%2Fbranded.mini-games.io%2F%3Fphp%3Dlanding%40landing%26campaign_no%3D27324

Once opened that URL, it redirects to a page which you can select a Facebook Page to add the app to it as a Facebook Page custom tab.

Note: 

  • You need to make a Facebook Page first if you don’t already have one, then you can select it to add the campaign as a Page Tab of your Facebook Page.
  • Facebook requires your Facebook page to have more than 2000 users to be able to add.

4.2 Check the app in Facebook Page Tab 

Go to the Facebook page which you have just embedded the app as a Facebook Page Tab.

Check the tabs of that Facebook page to find the newly-added tab.

Note: the newly-added tab may be put inside the “More” menu.

Once opening that new tab, the campaign will be loaded and shown.

5. How to remove your Campaign from Facebook Page Tab Menu

You can remove the Page Tab of your Campaign in your Facebook Page by following the steps below:

  1. Go to your Facebook Page (Note: you need to use Facebook old look).
  2. Select Settings.
  3. Select Edit Page menu.
  4. Find the Page Tab of your Campaign and turn it off.
2017-04-11 11_58_15-(2) Branded Mini-Games Settings.png

Note: at the time this guide was made (10 Sep 2020), Facebook New Look does not support removing custom tabs for Facebook Page yet.

6. Generic Facebook Campaign Flow

6.1 Authorization of the Facebook App

6.2 Introduction (if the campaign has)

6.3 Playing Game

6.4 Leaderboard & CTA

Submit a query

Leave us a message