Configuring Your Site for Facebook Instant Articles

Facebook Instant Articles has become a key player in the article and editorial game. It's important that now, more than ever, you have a site optimized for Instant Articles. Brand and editorial awareness, as well as revenue, are the main benefits to getting this right.


Step 1. Create a Facebook App Specifically for Instant Articles

Facebook apps enable you to take advantage of the platform's product suite to build, grow, and monetize your integrated app or website. Note: You are required to created a unique app for Instant Articles, even if you already have a general Facebook app for your property.

1. Go to the Facebook App Dashboard located here. You will see all of the apps you have access to. If you don't have a specific app for Facebook Instagram Articles, then the next step is to create one.

2. Click on the green button in the top-right corner where it says + Add a New App.

Once you fill out the Display Name and Contact Email, click on Create App ID.

3. Your app is now created, and you'll be taken to a screen of Facebook Products you can enable.

The three you want to enable are Facebook Login, Audience Network (for ads), and Analytics (to track your performance). Click on any of the products and click on + Add Product in the left-hand navigation to keep adding more.

Step 2. Facebook Login Product: Setting up the Facebook SDK for JavaScript

There is an easy way to set up the Facebook SDK for JavaScript quickly, which is needed for proper tracking of your Instant Articles.

Note for RebelMouse Account Managers: this is only necessary for clients who don't have access to Django admin. For us who do, we just need to insert FB page ID, FB app ID and app secret in site.extras.

1. Choose Web as your platform, enter your site's URL, and click Save.

2. Facebook will then ask you to implement the Facebook SDK for JavaScript. First, click Copy Code:

Next:

  • Log in to your RebelMouse site.
  • Click on the hamburger menu (☰) to open the left-hand navigation menu.
  • Navigate to the Layout & Design tool.
  • Open up the left-hand navigation menu again and select Post Page. If you're on Social UX, go to Social Stream Element instead.

  • Click on the Column, and then click on + Add Element in the top-left corner.

  • Select Custom HTML and proceed to paste the code there. You can also type in a friendly name to easily identify that custom code in the future.

  • Remember to click Save before leaving the Layout & Design tool.

That's it! The Facebook SDK for JavaScript is now installed.

Step 3. Analytics Product: Tracking Your Performance

1. Once you set up the Facebook SDK for JavaScript, analytics tracking is halfway done. Installing this is the first step of Facebook's own quick start guide to getting analytics right, so it's great that we already have it set up.

2. Go back to the Facebook quick start guide in your browser, click Next, enter your site's URL, and click Save.

3. Next, click Continue and you're done — you can ignore the rest of the steps in the quick start guide.

Step 4. Setting up the Facebook Pixel

To properly track the activity on your Facebook Instant Articles (page views, specifically), and any Facebook Audience Network (FAN) ads you implement on the mobile version of your site, the Facebook Pixel needs to be set up. This is a key part of correctly setting up analytics.

1. Go to the Facebook Pixel tab in the Business Manager for your Facebook Page. If it's your first time and you've never created a pixel, you'll be prompted to do so.

Follow the steps Facebook provides — it's a pretty straightforward experience. You can only create one pixel per advertising account.

2. Once you're finished, you'll see your Facebook Pixel page start to populate in the Business Manager. The example account below has had a Facebook pixel installed for a while, so it has already gathered a significant amount of data.

Your own page will look much emptier at first, and it won't display " pixel code base installed" until you actually put the code snippet in.

3. Next, click on Setup in the top-right corner to get the Facebook pixel code snippet. It will give you two options: set up the code through a tag manager, or copy and paste the code — choose the latter.

4. Facebook will provide steps and the code that you can copy to your clipboard. Once you have it copied, open the Layout & Design tool on your own website.

The Layout & Design tool link can be found in the left-hand navigation menu by clicking on the hamburger menu (☰).

5. Find the Top Bar page in the left-hand navigation menu of the Layout & Design tool. That's where you should paste this piece of code. It's the equivalent of a <head> tag.

6. Make sure that you select the Column in the Top Bar and click on the + button in it. Next, click on the first puzzle piece at the bottom of the list, which will create a Header Code element.

7. Once created, you'll be able to simply paste the Facebook pixel into it.

8. Click Save in the top-right corner and voilá! All done.

Step 5. Audience Network Product: Getting Ads Inside Instant Articles

Monetizing your Instant Articles is the most important step of completing the setup. The opportunities and revenue that come hand in hand with Facebook Instant Articles are no longer a surprise, and Facebook is actively investing in creating new ad spaces within their platform, as well as providing you with a superior array of native ad placements.

1. Once you have selected Audience Network as a product to add to your app, the next step is to click on Ad Spaces in the left-hand navigation. Note: Don't worry if you don't see Ad Spaces in your app. Some earlier versions of the app may not include it and will direct you to create an ad placement instead.

2. Click on Create Ad Space to create your first FAN ad tag.

You'll be prompted to enter a name for the ad and a brief description. It can be anything easy for you to recognize.

3. Once you're done, you'll be prompted to create an Ad Placement inside that Ad Space.

Facebook offers three types of creatives: Banner, Interstitial, and Native. (There's another type called Recirculation which is in beta, and we'll cover it further into this article.)

Regardless of format, there's no need to upload new creative — ads in the Audience Network use the same images you use for your ads on Facebook. For more information, you can read Facebook's FAN ad guide here.

4. For Banner Ads, you can select if you want the ad to refresh after X seconds, or if you want the ad refresh to be handled by mediation.

5. For Native Ads, you can toggle on or off if you want carousel ads and video ads to be displayed.

6. For Interstitial Ads (which will only work on the Facebook app), you can choose whether videos autoplay or not, as well as set frequency capping and connection type settings.

7. All types of ads will allow you to either optimize for CPM, optimize for Fill, or to set a balance of CPM and Fill at the same time. You can learn more about optimization behavior here.

8. Once created, this is how your Ad Space will look like (ignore the disabled icon in this example):

Banner Ad

Native Ad

Interstitial Ad

9. As mentioned above, there's also a new beta type called Recirculation Ads, which are ads that appear at the bottom of an Instant Article as a sponsored module with a small headline titled "From Our Sponsors."

Recirculation Ad

This is still in beta, but we highly recommend trying it out. The process for creating a recirculation ad is very similar to what we've described above:

  1. Click Create Ad Placement.
  2. Name your placement (e.g., "Pub Name — Recirculation Ad").
  3. Select Banner as your format and click Save.

You can now use this placement ID for your recirculation ad unit! Though please bear in mind that recirculation ads are not visible from the Pages Manager. Please check them via Ad Spaces and the Facebook app or mobile site view.

10. To implement these ads on your site, you'll need help from the RebelMouse team. Send the placement IDs to your Account Manager and we'll input them in our back end. Placement IDs are located in your Ad Placement and look like this: 123456789101112_125837234687343.

Step 6. Getting Approved

The process of getting approved for Instant Articles takes a little bit of time. The first step is submitting five articles for review.
Doing that is as easy as toggling Instant Articles on and hitting Publish (or Update if you're editing an existing article) in our Entry Editor.

In your Facebook Page's Publishing Tool, make sure there are no errors with the articles you're trying to submit. If you have any questions about any errors that might come up, please contact your RebelMouse account manager and we'll help you solve them.

Usually, no errors are shown because we've worked on sending an out-of-the-box HTML version of the articles you're publishing that's suitable for Facebook Instant Articles.

Approval can take anywhere from 3–5 business days. Facebook will notify you once you're approved for publishing.

You can easily take live the articles you submitted (or any new ones you might have published while you were waiting for approval) by selecting them via the top left checkbox and clicking Publish.

And that's all it takes to get Facebook Instant Articles up and running smoothly!

Want more tutorials on Facebook Instant Articles? Click here to get your read on. Click here to learn more about our ad manager dashboard.