How to Display an Optin In Your Facebook Page

Have you ever wondered if you can add an OptinMonster optin to your Facebook page?

The answer is yes, you can!

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.
RECOMMENDATION: We strongly recommended using only static optins for this, such as the inline optin or sidebar widget. Therefore, this guide should only be used by Plus or Pro users.

It is very easy to add OptinMonster to your Facebook page by using an iFrame and this guide will help you achieve this step by step.

  1. Create a Facebook Page
  2. Add an iFrame Application to your page
  3. Add OptinMonster to Your Facebook Page
IMPORTANT: In this guide we use the application Static HTML: iFrame tabs. You will need to add the domain raw2.statichtmlapp.com to your optin

Static iFrame Application Domain.

Step 1 – Create a Facebook Page

It is really easy to create a Facebook page following Facebook’s official guide.

Step 2 – Configure the Static HTML: iFrame tabs application

The Static HTML: iFrame tabs application we are using in this guide is easy to setup. It is needed to add an iFrame to your Facebook page.

The site Thunderpenny.com has an extensive walkthrough available here.

Step 3 – Add OptinMonster to Your Facebook Page

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 Custom HTML in the index.html section and include the Optin 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>

<div id="om-a2vxetfv5rwgnh0w-holder"></div>

<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>

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

</body>
</html>

You can further style your tab content by adding Custom CSS to the CSS section of the editor.

Add your Custom CSS.

Click Preview and your Optin should appear. (We used an inline Optin example in this guide)

Optin Preview Gif.

Optin Preview.

Click Save & Publish

Save and Publish Button.

Click View on Facebook to see your Optin in action

View on Facebook.

Live Optin on Facebook.

We hope this helps you add OptinMonster to your Facebook page.

Frequently Asked Questions

Q: What is an iFrame Application

A: Did we read your mind on this one? The answer is simple.

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.

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.

So to avoid issues, we used an existing iFrame app you can find here here