Instant Articles
Get familiar with your new storytelling tools. Make your media come alive, and keep readers coming back for more
Introduction
Instant Articles Team
Yes, it’s true. Instant Articles open on mobile devices really quickly.
But that’s just the beginning of it. Instant Articles are buttery smooth and addictive. Once you’ve read a few, you’ll never want to go back.
The Facebook-native format is packed with innovative ways to tell deeply engaging, interactive stories. Thanks to the powerful, built-in media features and customizable typographic elements, Instant Articles gives you awesome new editorial tools to use while delivering a decidedly superior experience for your readers.
More than half of Instant Articles readers scroll 90% of the way through their articles, while, historically, 38% of web readers haven’t made it past the first line of other online media.
This article gives you a quick highlight tour of Instant Articles features and shows you how to make magic with the format. You’ll be happy to find that Instant Articles are not only delightful but surprisingly easy to create.
Photography
All photographs are interactive by default. When tapped an image will expand to fill the screen, then readers can tilt the phone back and forth to explore the margins.
Photograph Example
Tap this image to make it expand. Tilt the phone right and left and see what happens.tunart/Getty Images
To return to the article, tap the image again. The interactive mode works best with high-definition photos containing rich visual information. For low-resolution media, we recommend using the non-interactive setting so that it will remain in-line in the correct aspect ratio and your readers won’t tap into a mushy, pixelated experience.
Social Feedback
You can add native Facebook Likes and Comments buttons to images, giving readers extra opportunities to engage with individual elements in your stories. This feature currently works for photographs and videos.
Slideshow
You can also group collections of images into slideshows that scroll horizontally.
1/5
This caption becomes visible once you enter the slideshow by tapping the first image.Kimson Doan/Unsplash
2/5
Each photo in a slideshow can have its own caption.Peter Dargatz/Pixabay
3/5
This is the third photo of the slideshow.blanaru/iStock
4/5
The fourth photo of the slideshow.Christian Beirle González/Getty Images
5/5
The fifth photo of the slideshow.Ole Spata/EyeEm
Slideshow Example
The slideshow caption is visible in-line in the main body of the story. You can also add individual captions for each image in the gallery, which become visible only after entering the slideshow. Tap on the first image to open it.
Video
Native videos in Instant Articles play automatically, by default, as soon as they scroll into view on the reader’s screen—a powerful way to make the page come to life. You have many options for presenting videos. Here’s an interactive one with play controls.
2:57 | Interactive Video Example
When this video first scrolls into sight, it appears in-line in its correct aspect ratio and plays automatically with the volume off. By tapping it, the video expands to fill the screen and can be turned to view horizontally. The soundtrack becomes audible, and play controls, with scrubber, are accessible.To hide play controls, tap the video again; the pause/play icons and scrubber can be toggled on and off this way. You can also rotate the phone sideways while the video is in-line to view it in landscape mode.
Alternately, try using a short video to add color and mood to a story. Disable the play controls and set it to loop with a cross-fade.
Ambient Video Example
Tap the video to expand and then tilt to explore. Think of this kind of interactive video as a moving photograph. It gives curious readers an opportunity to explore a living scene and become immersed in a new way. Looping continuously, the video adds atmosphere to an article and can be used to emphasize a section break. torcia/iStockYou can also ingest GIFs natively—no need for third-party players.
We know GIFs are exciting, but please try to calm down.
iStock
Cartography
Another great way to add information and texture to your stories: maps! Instant Articles has two cartographic features that deliver additional context to news and help readers situate it in the wider world.
Geotagging Example
Major news events often occur in locations unfamiliar to readers. Photos and videos in Instant Articles can easily be geotagged, such as this image of Mount Etna, so that readers can tap the globe icon to see where the action is happening. By pinching this map, you can zoom in to see details on the snow-capped slopes of the volcano or zoom out far enough to see the boot of Italy—and beyond.Marco Restivo/Getty Images
Rotating contour maps can be inserted in stories with a simple code block, giving readers a bird’s-eye view of topography and the ability to pinch and zoom in or out.
Map Example
The pin on this map designates Facebook Media Central’s offices in New York City.Embeds
Instant Articles deliver rich, multimedia stories even when you don’t own all the source media files. You might want to publish evolving news about an incident captured in video on YouTube. Or a listicle made up entirely of Tweets, Facebook posts, Instagrams and Vines. Instant Articles seamlessly integrate all types of web-based embeds, including your own interactive graphics, video players, ads and social media, such as this post from Mark Zuckerberg.
Typography
Don’t forget to make use of pull quotes and block quotes. Give the quote extra punch by customizing its color using the Style Editor.
Being connected means having opportunity. We’re connecting the world so one day everyone can fulfill their dreams.
Mark Zuckerberg
To include a long excerpt from another source, such as the following example from Sheryl Sandberg’s Lean In: Women, Work, and the Will to Lead, use a block quote. It’s in the same style as the body text but set off with a rule on the left margin.
But knowing that things could be worse should not stop us from trying to make them better. When the suffragettes marched in the streets, they envisioned a century later, men and women would be truly equal. A century later, we are still squinting, trying to bring that vision into focus.
In-line Related Articles
Pique reader interest in more articles from your publication with an in-line related articles element. Choose up to 3 stories and guide readers to other engaging articles.
You can also add a related articles element in the footer. Scroll down to the bottom of the story to see that feature in action.
Customizing the Formatting
To create advanced effects, you can play with different layout settings on your media elements. To create full-bleed layouts with a magazine-like feel, for example, you can crop a series of photos vertically and stack them in-line without spacing or text in between.
Fullscreen Media
Another option is to set images or videos to fullscreen mode, in which case the art crops automatically so that it bleeds off the screen frame and snaps gently into place. It’s kind of like a digital gatefold, giving readers a chance to enjoy a special moment in the story. See how this next image pauses briefly when you scroll it into view.
“I want to stay as close to the edge as I can without going over. Out on the edge you see all kinds of things you can’t see from the center.”
Kurt VonnegutVisit the Instant Articles Design Guide to learn how to customize your typography and layout. The Format Reference describes the HTML-5 markup used to set interactive features and vary the presentation modes for media.
Next
Get inspired by some of the incredible showcase articles that we’ve posted on the Instant Articles Facebook page. Whether you want to create a specially designed long read filled with multimedia elements or to quickly publish an on-the-scene video connected to an evolving news story, Instant Articles has the features and flexibility to help you deliver stories that not only load fast but are hard to forget.
Look at this format as a tool box. How you choose to use Instant Articles and what you make with them are limited only by your imagination. We plan on continuously adding tools to the kit, based on your experiences and feedback. Our team is eager to work with publishers, bloggers and independent journalists to help you deliver your stories to new audiences with the most impact and multimedia goodness possible.
Add Comments