The Story Telling Features to Make Your Instant Articles an Instant Hit

Do you want your articles to reach more audience? Do you want your audience to share/like/interact with your content better? Do you want to retain the audience attention until the end of your article?If your answer is yes to any/all of the above questions then you have reached the right place.

Facebook is one of the important sources of news for its billion strong active user base. Instant Articles is another feature that is aimed at improving the user experience while consuming articles on Facebook. As we all know, the primary objective of Facebook Instant Articles is to cut down loading time of articles, but there are several other features as well.

Facebook Instant Articles come with a whole set of features that allows us to include all forms of content into your articles to provide an enriched storytelling experience. Some of the most important features are

  • Images
  • Animated gifs
  • Videos
  • Social Embeds
  • Maps

Let us see how you can include these features into your Instant Articles and gain the traffic and engagement that you desire.

Images- Grab the audience attention

uvRBqDAfQfaGPJiI6lVS_R0001899

“A picture is worth a thousand words”

The human mind is built to perceive images. Every word that is ever read is perceived by the brain in the form of images. Right images play a vital role in multiplying the reach of your articles. Instant Articles come with the amazing tap and zoom feature that allows the publisher to add ultra high-resolution pictures. The users can tap the pictures to view a slice of the image full-screen and turn left or right to view the rest of the image.

Facebook recommends a 2048×2048 or larger images to enhance the immersive experience of the reader. In this age of ultra small attention spans and ultra high attrition rates, adding a header image that catches the audience attention at first glance can go a long way in gaining the traction that your content deserves.

Images can be added to the Instant Articles by using the standard HTML <figure> tag. The <img> tag with all its annotations is wrapped in the figure element.

Here is an example of a code snippet for adding a basic image

<figure>
<img src=”absolute/relative path of your image” />
</figure>

Some of the other additional features that can be utilized effectively to make your images more engaging are:

Images with caption

In the age of memes and trolls adding an attractive caption to your image can make it much more engaging for your audience.
The <figcaption> tag within the <figure> tag can be used to add captions to your images.

For example

<figure>
<img src=”absolute/relative path of your image” />
<figcaption> “Your caption”</figcaption>
</figure>

The Social Images

It is every publisher’s dream that all his audience share his content. Facebook Instant Articles provide one more enhancement that allows your content to be more shareable. You can enable the readers of your content to like, comment or share the images in your articles by adding a simple data-feedback attribute:

For example:

<figure data-feedback=”fb:like,fb:comments”> <img src=”absolute/relative path of your image” /> </figure>

Location of your images

Geo-tagging your photographs is a practice that has been prevalent for some time now. Many publishers tag the exact location in which the photographs have been captured. Facebook Instant Articles allow you to add the location of your images by adding the JSON script op-geotag class attached to the <figure> element of the corresponding image.

For example

<figure>
 <img src="Absolute/relative path of your image" />
 <script type="application/json" class="op-geotag">  
   {
     "type": "Feature",    
     "geometry": {      
       "type": "Point",
       "coordinates": [lat,long]
     },    
     "properties": {
       "title": "Name of the location",
       "Radius": provide the radius,
       "pivot": true,
       "style": "satellite",
}

}

Full-screen images

Another small shortcut that Facebook provides for providing a heightened user experience is the full-screen images. The use of high-resolution images in full screen mode is sure to catch some eyeballs and retain them. But just like all good things in the world, this is a feature that should be used judiciously.

You can display the images full screen by using the data-mode attribute to the <figure> tag.

For example

<figure data-mode="fullscreen">
<img src="
absolute/relative path of your image" />
</figure>

TIP:

Make sure that the header art that you add adheres to the optimum aspect ratio of 4:3 as Facebook will crop the images of other ratios to fit the user’s screen.

Animated GIFS- The internet rage

If you have not been living under a rock for the past decade you must have definitely experienced the small looping animated gifs that are filling up all the social media platforms.

GIFs are a great way to communicate the personality of your brand to your customers. Many major brands such as Google and Hootsuite have used gifs to make an impact. If you are not already using gifs as a part of your social media presence then here are 7 great reasons to start right away.

Facebook allows you to integrate animated gifs into your Instant Articles so that you will be able to effectively transmit emotions to a generation that prefers image based communication

You can add gifs to your articles by using the standard <figure> tag. The <img> tag that is wrapped inside the <figure> tag has the src attribute that can be utilized to point to the location of your GIFs, as shown below

<figure>
 <img src="absolute/relative path of your gif" />
</figure>

Just like images, Facebook provides several features that enable you to make your gifs truly engaging. Let’s take a look at these features.

  • Gifs with caption
  • Gifs with feedback
  • Gifs with location

As mentioned with images these features work wonders in enhancing the user experience and also create a greater chance of your audience engaging with your content.

Here are the code snippets that you can use to integrate these features into your Instant Articles

Gifs with caption

<figure>
 <img src="http://mydomain.com/path/to/animated.gif" />
 <figcaption>This animated GIF is amazing</figcaption>
</figure>

Gifs with feedback

<figure data-feedback="fb:likes, fb:comments">
 <img src="http://mydomain.com/path/to/animated.gif" />
</figure>

Gifs with location

<figure>
 <img src="http://mydomain.com/path/to/animated.gif" />
 <script type="application/json" class="op-geotag">  
   {
     "type": "Feature",    
     "geometry": {      
       "type": "Point",
       "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ]
     },    
     "properties": {
       "title": "Jessore, Bangladesh",
       "radius": 750000,
       "pivot": true,
       "style": "satellite",
     }  
   }
 </script>
</figure>

Video- when text gets boring

Video is a powerful tool to communicate effectively to the digital audience. Facebook recently revolutionized the way we consume video content with its auto-play feature that allows the videos on your wall to play automatically when you scroll up to them. Instant Articles allow you to integrate this Facebook feature into your articles. The use of a relevant auto-play video at the beginning of an article is a sure-shot technique to grasp the attention of the reader. But you still have the complete control to choose whether you want to enable the auto-play functionality or not. HD videos can be seamlessly integrated into your Instant Articles with the use of <video> element that is wrapped inside the standard <figure>tag of HTML5.

<figure>
 <video>
   <source src="absolute/relative path of your video" />  
 </video>
</figure>

In videos too, just like images and gifs, the enhancement features are provided for increased user engagement. These features are

  • Videos with caption
  • Videos with feedback
  • Videos with location

Here are the code snippets for the video features

Video with Caption

<figure>
<video>
<source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
</video>
<figcaption>This video is amazing.</figcaption>
</figure>

Video with feedback

<figure>
 <video>
   <source src="absolute/relative path of your video" />  
 </video>
</figure>

Video with location

<figure>
<video>
<source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
</video>
<script type="application/json" class="op-geotag">
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ]
},
"properties": {
"title": "Jessore, Bangladesh",
"radius": 750000,
"pivot": true,
"style": "satellite",
}
}
</script>
</figure>

One of the most important features of videos in Instant Articles is autoplay. All the videos in Instant Articles are by default auto played. But as mentioned earlier you can choose whether you want to enable the autoplay for each of the videos that you include in our Instant Articles. To disable the autoplay feature you just have to include the  data-fb-disable-autoplay attribute of the <video>. This will ensure that the user has to click to view the video.

You can also embed videos from 3rd party sites such as youtube or vine. This is explained later in this post.

Tip:
Facebook recommends you to not disable the autoplay feature in videos that are smaller than  640x 480 pixels. This is to ensure user experience.

Slide Show- for the picture frenzy generation

Another interesting feature of the Instant Articles is the slide show. Sometimes when you want to display a considerable number of images in a single article. Placing them one below the other might create an irritation for the reader, especially on mobile devices. The Instant Articles allow you to overcome this hurdle by using the slideshow feature.

Slideshow, as the name suggests, allows you to compile a series of pictures and make them into a slideshow. This ensures that you add all the pictures that you intended to include in the article without compromising on user experience.

You can add the slideshow into your article by using the op-slideshow class of the <img> tag wrapped in the <figure> tag, as shown below

<figure class="op-slideshow">
<figure>
<img src="absolute/relative path to your image" />
</figure>
<figure>
<img src="absolute/relative path to your image" />
</figure>
<figure>
<img src="absolute/relative path to your image" />
</figure>
</figure>

Yet again Facebook establishes its unofficial motto:

User experience is the ultimate goal.

They provide couple of additional features to make your slideshows better:

  • Slideshow with caption
  • Slideshow with location

Here are the code snippets for the slideshow features:

Slideshow with caption

<figure class="op-slideshow">
 <figure>
   <img src="absolute/relative path to your image" />
 </figure>
 <figure>
   <img src="absolute/relative path to your image" />
 </figure>
 <figure>
   <img src="absolute/relative path to your image" />
 </figure>
 <figcaption>Your caption</figcaption>
</figure>

Slideshow with location

<figure class="op-slideshow">
<figure>
<img src="http://mydomain.com/path/to/img1.jpg" />
</figure>
<figure>
<img src="http://mydomain.com/path/to/img2.jpg" />
</figure>
<figure>
<img src="http://mydomain.com/path/to/img3.jpg" />
</figure>
<script type="application/json" class="op-geotag">
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [23.166667, 89.216667]
},
"properties": {
"title": "Jessore, Bangladesh",
"radius": 750000,
"pivot": true,
"style": "satellite",
}
}
</script>
</figure>

Social embeds- for the omnipresent netizen

Facebook acknowledges the fact that every publisher wants to establish a presence on all the social media platforms available today and cross sharing content from one platform to another is one of the major activities that is happening today.

The Instant Articles allow you to seamlessly integrate content from other social media platforms by using the social embed feature. Content from the following networks can be embedded into the articles:

  • Instagram
  • Facebook
  • Twitter
  • Vine
  • YouTube

This feature enables you to add interesting videos, tweets, FB posts, small looping videos and other interesting content into your post. These features would enable you to create interesting content that will help you stand out in the overcrowded internet market.

Here are the code snippets that can be used to embed social content onto your articles.

Instagram

The picture sharing social media is the rage of the internet these days. And since it is a part of Facebook now, it is definitely a smart idea to include Instagram images into your Instant Articles.

<figure class="op-interactive">
<iframe>
<!-- Include Instagram embed code here. Your embed code should look like: <blockquote class="instagram-media" ... -->
</iframe>
</figure>

Facebook

The most dominant social media platform today is definitely Facebook. You can embed content from Facebook into your articles to make the articles more shareable and relatable.

<figure class="op-interactive">
<iframe>
<!-- Include Facebook embed code here. Your Facebook embed code should contain both the "JavaScript SDK" and the "Embedded Post Tag" parts described at https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually -->
</iframe>
</figure>

Twitter

The microblogging platform, Twitter provides a considerable chunk of interesting content that can be integrated into your articles to make them more interesting.

<figure class="op-interactive">
<iframe>
<!-- Include Twitter embed code here. Your embed code should look like <blockquote class="twitter-tweet" ... -->
</iframe>
</figure>

YouTube

The user-generated video content platform, YouTube is still the largest video sharing platform in the world. With video becoming the most preferred form of content consumption in the world, it is essential that you use interesting video content on your articles.

<figure class="op-interactive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE"></iframe>
</figure>>

Vine

The 8 sec looping videos on Vine is an interesting form of micro-video sharing. Content from Vine can be used in interesting and creative ways to grasp audience attention in your articles.

<figure class="op-interactive">
<iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE"></iframe>
</figure>>

Tip:

The list of supported social media platforms is not limited to what’s mentioned here. If you want to embed content from any other social media platform you can try it using the op-interactive tag and test if it is rendered  in both ios and android using the pages manager app.

Maps- so that your audience don’t get lost

Today maps have become an integral part of our everyday life. Adding a location to your story can make add an extra dimension to your writing. The interactive map feature of the Facebook Instant Articles does just that.

Whether it is a travel blog, tourist destination reviews or any other story for that matter, adding a map to it definitely increases authenticity and audience connect. You can do this by simply adding the op-map class of the standard <figure> element. The figure element representing the map must not be inside the <p> tag, it must be included as a standalone tag inside the <body> tag.

The code snippet for adding a map into your Instant Article is as follows

<figure class="op-map">
<script type="application/json" class="op-geotag">
{
"type": "Feature",
"geometry":
{
"type": "Point",
"coordinates": [23.166667, 89.216667]
},
"properties":
{
"title": "Jessore, Bangladesh",
"radius": 750000,
"pivot": true,
"style": "satellite",
}
}
</script>
</figure>

 Map with caption

You can add captions to the map to better explain it to your audience. You can add it by making a small modification to the above code. As shown below:

<figure class="op-map">
<script type="application/json" class="op-geotag">
{
"type": "Feature",
"geometry":
{
"type": "Point",
"coordinates": [23.166667, 89.216667]
},
"properties":
{
"title": "Jessore, Bangladesh",
"radius": 750000,
"pivot": true,
"style": "satellite",
}
}
</script>
<figcaption>
<h1>Map Caption</h1>
</figcaption>
</figure>

Conclusion

Facebook Instant Articles is yet another change in the ever-changing social media space. The several new features of the Instant Articles are tools that can be effectively used to provide an enriched user experience. Let us utilize all these features to make our stories touch many more hearts.

Your Opinion