How to upload a campaign to a Facebook Page Tab?
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.
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:
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:
- Copy the value of “Secure Page Tab URL” in the Facebook Settings section of the campaign.
- Paste that value to the “Secure Page Tab URL” field in the “Page Tab” section of Facebook App Settings.
- Insert the Page Tab Name.
- Insert Page Tab Edit URL: it can be the same as Secure Page Tab URL.
- 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:
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:
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.
- 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:
- Go to your Facebook Page (Note: you need to use Facebook old look).
- Select Settings.
- Select Edit Page menu.
- Find the Page Tab of your Campaign and turn it off.
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