How to Display a Campaign In Your Facebook Page

Have you ever wondered if you can add an OptinMonster Campaign to your Facebook page to collect leads?

With OptinMonster, you can add a campaign form to your Facebook in a just a few minutes.

  1. Create Your Inline Campaign
  2. Create a Facebook Page
  3. Add an iFrame Application to your Facebook Page
  4. Add OptinMonster to Your iFrame
  5. Make Final Edits and Publish on Facebook
  6. FAQs
Note: This feature is for Advanced Users who are familiar with using Facebook applications. At this time we do not provide support beyond recommending the basic settings. In addition, this guide requires using 3rd party integrations to show on Facebook that is outside the bounds of OptinMonster’s support.
Requirement: This guide requires that you use only static campaigns for this, such as the inline campaign or sidebar widget. Therefore, this guide should only be used by Plus or Pro users.

Step 1 – Add A site to Your Inline Campaign

The first thing you need to do is to create your inline campaign. If you need assistance in doing this then you can follow our guide for creating an inline campaign here.

If your inline campaign already exists that you would like to use on Facebook, then edit your existing inline campaign.

Now you need to add the following domain to your existing campaign:
raw2.statichtmlapp.com

Important: This domain is what is utilized by the Facebook Application Referenced below in Step 3. If you use another Facebook application, then your domain will be different.

You can give it a custom Site Name of your choice, such as “Show on MySite’s Facebook Page”.

If you need assistance in adding a domain to your campaign, you can follow our domain guide here.

Static iFrame Application Domain.

Warning: Your campaign must have the domain referenced above for your campaign to work on Facebook.

Step 2 – Create a Facebook Page

Next, you either need to have a pre-existing Facebook page where you are an administrator or owner, or you need to create a Facebook page for your site.

You can create a Facebook page by following Facebook’s official guide here.

Step 3 – Add an iFrame Application to your Facebook Page

Once your Facebook page is created, you need to add an app to your page which will allow you to add in an iFrame. For this setup, we’re using the Facebook App called Static HTML – Thunderpenny as this application is easy to setup and provides HTTPS security.

To connect their app, follow Thunderpenny’s walkthrough available here.

Step 4 – Add OptinMonster to Your iFrame

After your app is set-up, go to your Facebook page and look for the Custom iFrame App you installed in the previous step. Generally, you will find it on the left-hand side above Manage Tabs named Welcome as seen in the screenshot below.

Select the Welcome Tab.

Click Setup Tab to add content.

Click the Setup Tab.

Add your Campaign’s Embed Code in the index.html section and include the Campaign Embed Code before the closing tag.

Add your Custom HTML.

Example HTML :

<!DOCTYPE html>
<html>
<head>
  [[style.css]]
</head>
<body>
<h1>My First Heading</h1>

<h2>My First Subheading</h2>

<!-- Enter Campaign Embed code here -->

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer luctus dictum ex. Donec porta augue eu tellus sagittis porta. Nullam et arcu scelerisque, accumsan elit rhoncus, gravida risus. Aliquam id justo quis dolor pellentesque dapibus. Praesent lacus leo, ornare vitae sagittis vitae, maximus et sapien. Aenean sit amet velit ipsum. Donec placerat, est non varius vulputate, magna dolor luctus lacus, a ultrices felis neque id augue.</p>

</body>
</html>

Step 5 – Make Final Edits and Publish on Facebook

Within your Thunderpenny Application for your Facebook page, you can style your Facebook Tab’s Content area by adding Custom CSS to the style.css area of Thunderpenny’s editor.

Add your Custom CSS.

On Facebook, click Preview and your Campaign should appear.

Optin Preview.

Click Save & Publish.

Save and Publish Button.

Click View on Facebook to see your Campaign in action.

View on Facebook.

And your next screen will be your inline campaign showing in your Facebook tab.

Live Campaign on Facebook.

Congratulations! You’ve created an OptinMonster campaign that can be used on Facebook!

Frequently Asked Questions

Q: What is an iFrame Application

A: An iFrame application allows you to embed an external Web page or a Custom HTML code in your Facebook Page tab. The Web page or the Custom HTML code is actually hosted on an external server and is displayed inside the Facebook elements on that page.

It allows you to use custom HTML, CSS, and Javascript like any other web page would.

Warning: An iFrame app will not allow you to host external non-SSL pages so if you are going to embed a Web page instead of Custom HTML page, please ensure that it is hosted on an SSL URL else it will result in an error.

To avoid any issue as referenced above, we used an existing iFrame app by Thunderpenny, as is referenced above.


Frequently Asked Questions

Q: Can I track any analytics within this campaign

Not natively via OptinMonster because the campaign technically will not be on your site. However, you can still connect Google Analytics.

Thunderpenny allows you to add your Google Analytics in their Settings tab. You can find Thunderypenny’s Guide here.

At the time of this writing, they share the following:

Quoting the page linked above:

Now all you need to do is place in your HTML by simply copying and pasting it from whatever HTML editor you used. Double check that any links in your HTML are correct, no one likes a broken link. An error may appear if your links start with http:// instead of https://. This is fine and can be ignored, but https:// is recommended.
 
Once your HTML is in place, head over to the Settings tab. Here you can set up Google Analytics, name your tab and set up a icon for your tab:

Once you’ve finished up all that’s left to do is hit Save & Publish.