How to Set Up Facebook’s Instant Articles and Why You Should

by Aeryn Lynne

For over a year now, Facebook has had popular sites, such as Buzzfeed, testing out “Instant Articles”, a new feature for Facebook pages that primarily promote personal writing. If you’re a blogger, trying to promote your own articles/blog posts on your Facebook page, you may have noticed that it doesn’t get as many views or engagement as your other posts do, especially those that are not trying to encourage your audience to leave Facebook’s website. Facebook has attachment issues. Somewhat creepily, it never wants you, nor your audience to leave its domain for anything. Facebook wants to be the web. So, perhaps in their own sense of attempting to work with bloggers / writers / authors, they’ve created a way for your entire article to be published on Facebook, without creating duplicate content, and is packaged with a number of features to keep both parties happy.

Why You Should Implement Instant Articles

Instant Articles is Facebook’s attempt to make a fast and efficient mobile web platform, so that their users, our audience, can view what they want to see instantly in a form that is aesthetically pleasing.

Here are some key reasons why you should start implementing Instant Articles now.

  • Marketers are repeatedly reminded that Millennials have an attention span of 11 seconds, and the attention span of a Gen Z audience is 8 seconds. The word “Instant” in “Instant Articles” isn’t there just to be catchy. Using the Instant Articles feature loads your posts extremely fast so that your younger audience has access to the information they want right when they want it. Let’s face it, even if your website is highly optimized and mobile friendly, chances are it still takes time to load your current website on a smartphone or tablet, depending on how much JavaScript your site has to load. When nearly every WordPress plugin has at least one (if not many) JavaScript files to call, you can have quite a heavy load time that makes your mobile site slow.
  • They’re not really trying to replace your website. You can’t simply use Facebook’s Instant Articles platform to create new content. You need to have articles already published elsewhere online for Instant Articles to work. Instant Articles only work for the mobile audience, so we still need active posts on our websites for our desktop users.
  • Facebook wants its users to stay on Facebook, and utilizing Instant Articles should potentially give you increased viewership by mobile readers, since they will no longer have to leave Facebook to read your work.
  • Target your audience. Instant Articles implemented targeting tags on the article level, which means you can be particularly selective of who sees your posts. If you’re sharing a recipe, you can indicate that your target audience interests would include, “Baking; Cooking; Recipes;” and Facebook will be more inclined to share your article with their audience that share these same interests/values (and leave that post out of the stream of those that order pizza every night.) The only other way you can target a similar audience is by purchasing post boosts for your article link (with a minimum $5 purchase,) whereas adding these tags into your article is free.
  • Strategically placed mobile advertisement through Facebook’s Ad Network. This is another area that I believe Facebook’s algorithm with improve viewership if you include Facebook’s Ads. Facebook primarily receives revenue through ads, and will want to showcase pages that have these ads. To entice you to utilize their ad network, they’re currently offering you 70% on incurred ad revenue. This is actually better than most networks, since the average rate is 50%. Your current website ad network might not even provide a revenue stream for mobile advertising, so this can be a bonus for you as well.Facebook Instant Articles - Ad Network Placement
  • Affiliate links are acceptable, so you can share your top ten DVDs from Amazon and still get affiliate credit for the shares.
  • You’re not losing page views for your Google Analytics, as this code can be implemented in your articles. While the articles are being hosted through Facebook, it is technically being viewed as your site, so you won’t have to worry about losing views for your monthly stats.
  • Facebook encourages readers to keep reading your stuff by adding a recommended link to your most recent article at the bottom of the rest of your articles.

    Facebook Instant Articles - Recommended Reading

    Facebook Instant Articles – shows a link to your most recent article at the bottom of the post.

  • It’s not all or nothing. You can choose which articles from your website will have an Instant Article version. There might be an instance where you would prefer your users to visit your site right away (such as if you’re hosting a linky party,) so this option is still available to you.
  • Gorgeous article layout – there are some styles that you can change, for instance the article’s title font type and color, but you’re largely stuck with Facebook’s idea of perfect article style. And it is truly stylish, so your audience is treated to a well-planned design, optimized for both reading and interaction.
  • Your images and videos can be individually liked or commented on as an optional setting.

    Facebook Instant Articles - Like and Comment on Images and Video

    Optional Feature: Like and Comment on Images and Video

Drawbacks to Using Instant Articles

  • The one main drawback to using Instant Articles is that you may have certain actions in place for your mobile readers on your website that won’t be available to your audience reading your Instant Article; such as a popup window that requests users to sign up to your newsletter. Some options are not (yet) available in the Instant Article setting that you’ll have to determine whether you can accept these missing features.
  • No comments at end of post. Some developers and users question whether comments are still a viable part of article reading, as they can be filled with spam and trolls. Regardless, Facebook has taken this function away for the article as a whole, BUT, your readers are able to comment on images if you activate this option. You can, in theory, place an image at the bottom of each article, that can encourage your readers to leave their thoughts if you truly need comments at the bottom of your posts. At this time though, it’s not a default option.
  • If you run a giveaway on a post, you’ll have to utilize a link for the reader to click out of the Instant Article format and go to your site instead, if they choose to enter.

How to Get Started with Facebook Instant Articles

Unfortunately, this can be a little daunting. It’s definitely time consuming, but worth it all the same.

  1. First thing you need to do is sign up for Instant Articles. Once you’ve signed up, you’ll have a new set of tools for your Facebook page. Pardon the pun, but the signup for Instant Articles in instantaneous, so no need to wait for approval at this point.
  2. Go to your page > Publishing Tools > Instant Articles (found in left hand menu) > Configuration. You’ll see a step-by-step list of what to do for initial set up. Facebook Instant Articles Initial Set Up
  3. You’ll need to create 10 articles, generated with Facebook’s code template. I’ve developed a template for you to use, which can be found below. This is probably the hardest part, as it takes a while to convert your blog posts into Facebook Instant Articles, especially if you’re not used to coding. To create a new article, click on Production Articles from the left hand menu, and then click on the +Create button to open a blank article text window. Copy and paste your optimized template code for each article here.
  4. Style the articles for your particular branded look, including logo, font type and colours to use for headers. Consult Facebook’s Style Guide for a more in-depth peek at what you can do for design.
  5. Once all of your sample articles are created, you’ll have to submit them as a bundle to Facebook for someone to review and either approve or ask you to make changes, based on their policies. This hurry up and wait process can take 3 to 5 business days, and may wreak havoc on your nails if you’re prone to biting.

Facebook Instant Articles Template

Here is a template to get the most out of Instant Article options for your analytics and interaction. I get it, this looks like a lot of confusing code, but it’s really not. To get the most out of this code, to really see what’s going on, download Notepad++ (it’s free,) copy and paste the code below into a new file, and then click on the Language tab in the Notepad++ toolbar. Move your mouse to highlight “H” from the alphabetical list, and then select “HTML”. This will give you a colour-coded look to your new Instant Articles template and make it much easier to edit.

Notepad++ HTML Facebook Instant Articles Template

Yes, I really do have 77 files open in Notepad++. I do all of my website development work with this program.

<head>
  <meta charset="utf-8">
  <meta property="op:markup_version" content="v1.0">
  
  <!-- FB Automatic Ad Placement --> 
  <meta property="fb:use_automatic_ad_placement" content="true">
  
  <!-- The URL of the web version of your article. This stops duplicate content. --> 
  <link rel="canonical" href="PASTE LINK TO ORIGINAL ARTICLE">

 <!-- Specify the preferred audience for its topic, which is similar to blog post tags. If you're optimizing a post with helpful newbie parenting tips you may use, "Parenting; Mom; Dad; Baby" for example. These tags indicate the interests of the Facebook audience you want to reach. -->
  <meta property="op:tags" content="Example 1; Example 2">
  
  <!-- The style to be used for this article. If you have multiple styles created for your Instant Articles, you would change the name default to the style you prefer to use. --> 
  <meta property="fb:article_style" content="default">
</head>

<body>
  <article>
	<figure class="op-tracker">
	<iframe>
		PASTE YOUR GOOGLE ANALYTICS CODE HERE.
	</iframe>
	</figure>
	
    <header>
	<figure class="op-ad">
		PASTE YOUR FACEBOOK AD NETWORK CODE HERE.
	</figure>

	<!-- The cover image shown inside your article --> 
	<figure>
		<img src="LINK TO YOUR ARTICLE'S FEATURED/COVER IMAGE" />
		<figcaption>ADD ALT TEXT/CAPTION FOR IMAGE</figcaption>
	</figure>

	<!-- The title and subtitle shown in your article -->
	<h1>YOUR ARTICLE TITLE</h1>

	<!-- A kicker for your article, which can be considered the category/main tag. Keep this constant for your articles. -->
	<h3 class="op-kicker">
	CATEGORY
	</h3>

	<!-- The author of your article -->
	<address>
	<a rel="facebook" href="//facebook.com/YOUR-PESRONAL-ACCOUNT-LINK" title="YOUR ROLE, IE Blogger, SEO Specialist, CEO, etc.">YOUR NAME</a>
	</address>

	<!-- The published time stamps -->
	<time class="op-published" dateTime="YYYY-MM-DDT00:00:00Z">DATE ORIGINALLY PUBLISHED</time>
    </header>
	
<!-- Body text for your article -->
<!-- Not all HTML works in Instant Articles, and structure of code is strict. -->

<!-- Only H1 and H2 header tags work. H3 and lower are not recognized. -->

	<h1></h1>
	<h2></h2>

<!-- Paragraph tags ONLY wraps around text, and must wrap around ALL text. Images and Lists (code below) cannot be wrapped around <p> tags. -->

	<p>
	<strong></strong> <!-- Used to bold -->
	<em></em> <!-- Used to emphasize / create italics -->
	<a href="LINK">Anchor Text</a> <!-- Used to link to other articles. If the linked article is one that you published as an Instant Article, the user will be directed to that Instant Article. All other links will be directed to a browser window outside of Facebook. -->
	</p>
	
<!-- You can use the data-feedback string to encourage your readers to like/comment on images/video. This is an optional feature. Delete the data-feedback string altogether, or parts of it as you see fit for each image/video. -->

    <figure data-feedback="fb:likes,fb:comments">
        <img src="IMAGE LINK" />
        <figcaption>CAPTION/ALT TEXT</figcaption>
    </figure>

<!-- Ordered and unordered lists. Must be placed outside of <p></p> tags. Images cannot be embedded into list items. -->

	<ol>
		<li>
			<strong></strong>
			<em></em>
			<a href="LINK">Anchor Text</a>
		</li>
	</ol>
	
	<ul>
		<li>
			<strong></strong>
			<em></em>
			<a href="LINK">Anchor Text</a>
		</li>
	</ul>

<!-- EMBEDDING - You can embed tweets, vines, Instagram and/or even Facebook posts into your article. -->
<!-- For FACEBOOK, TWITTER and INSTAGRAM posts -->
<figure class="op-interactive">
	<iframe>
    <!-- Embed code here. -->
	</iframe>
	<figcaption>Optional Caption - delete this line if you don't have alt text for your embedded post.</figcaption>
</figure>

<!-- For YOUTUBE -->
<figure class="op-interactive">
  <iframe width="560" height="315" src="YOUR_YOUTUBE_URL"></iframe>
  <figcaption>Optional Caption - delete this line if you don't have alt text for your embedded post.</figcaption>
</figure>

<!-- For VINE -->
<figure class="op-interactive">
  <iframe src="YOUR_VINE_URL" width="600" height="600"></iframe>
  <figcaption>Optional Caption - delete this line if you don't have alt text for your embedded post.</figcaption>
</figure>


	<footer>
        <!-- Credits / Disclaimer for your article, such as for sponsorships, affiliate links, etc. -->
	<aside><em>Text</em></aside>
		
	<!-- Copyright details for your article -->
	<small>Copyright © YYYY · <a href="LINK TO YOUR SITE">YOUR SITE NAME</a></small>
    </footer>
  </article>
</body>

You should actually create two template files within Notepadd++ for your Instant Articles set up. First, save the code above as a Reference File for all the possible code options you could add to an article. And then create a second template file that has all of your general code in place that would be the same for each article, and save that as your Website Template File. In your second template file, it should have the GA code set, your Facebook Ad Network code if you’ve activated it, footer info, such as the link to your site, etc. Any information that will never change should be saved to this template file.

Virtual Assistance to Set Up Facebook Instant Articles

When I started writing this how-to, I definitely didn’t think of offering my services, but I do realise how exasperating this process can be. I just went through it all myself and had moments of screaming into a pillow while I tried to figure out what I was doing wrong now. I entirely understand if this process is too much, but I also get how necessary this feature can be to writers wanting to showcase their work through Facebook. I currently have room to take on 5 clients to set up Instant Articles for your Facebook page.

For $125US, your Instant Article package will include:

  • Website/Initial set up
  • A template file created and optimized for your use.
  • 10 articles (of your choice,) fitted with Facebook’s Instant Articles template code.
  • One style design for your articles.

If you already have Instant Articles set up, and approved, here are some extra options:

  • Optimized Template File, specific for your website – $15US
  • 1 Article converted to Facebook’s code structure – $10US each (you must have your own template for me to use, or purchase the Optimized Template File.)

Please note, to accomplish these tasks, I would need to be added (temporarily) as an admin to your Facebook page with access to your Instant Articles tools, as well as admin access to your website for adding Facebook’s code and retrieving the blog posts required.

If this is something you’re interested in, please send me your name and email (this is not a newsletter sign form,) and I will get in touch with you to see if we can move forward. You are not guaranteed a spot by filling out this form, but I will do my best to help all that request it.

[contact-form-7 404 "Not Found"]

Did I convince you to get Instant Articles implemented for your Facebook page? Give me a shout with any questions you have of the process in the comment section below.

If you want to see an Instant Article in action, visit my Facebook page for Geek with Style on your mobile device, and click on one of the more recent articles from my site.

Like it? Share it!

Aeryn Lynne

The Geek at Geek Life
Living in Superman's Metropolis (aka Toronto, Canada), Aeryn Lynne found a way to entirely over-share everything she loves, and make a career out of it! Ultimately a geek, she waxes poetically over technology, fights for fashion-equality, squees over comic art, and literally sparkles, thanks to her makeup addiction.
Aeryn Lynne

Leave a comment

7 Comments

  1. Ladena June 14, 2016
  2. Lisa @ fabfrugalmama June 15, 2016
  3. Maya Fitz June 15, 2016
  4. Our Family World June 16, 2016
  5. Amy June 16, 2016
  6. Little Miss Kate June 16, 2016

Leave a Reply

Geek Things to Do in Toronto

Check out all the geek fun to be had when you're traveling in Toronto, Ontario, including Hotels, Restaurants, Shops, Games and more!
Time to Get Nerdy!
shares