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

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.

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

<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="https://www.geeklife.ca/webdev/set-up-facebook-instant-articles/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="https://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 id=”8744″ title=”Facebook Instant Articles Signup”]

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.