Back to News for Developers

Example Articles

February 10, 2016ByNatasha von Kaeppler

The Instant Articles team is excited to introduce a series of example articles that showcase the many typographic design and interactive features available for Instant Articles.

Many developers have told us they would like to have more and better code examples, particularly when it comes to Instant Articles' unique interactive features that are described in the Design Guide. We invite publishers to use the articles to preview layout and interactive options, get inspired, and copy the custom HTML-5 markup for their own application.

Three example articles are available now in the Instant Articles Library (instructions below) and can be experienced live in the Pages app. Use these example articles as a tutorial, a guide, and a handy reference when you want to activate new features or tweak the design of your layout and typography.

We plan on updating these articles regularly as well as adding new ones in the near future, so be sure to check back periodically for new showcases. Forthcoming example articles will help introduce new features as they are released and offer deep dives on specific issues, like ads and analytics.

Instant Articles: Feature Highlights

This example article outlines and previews the essential features available in Instant Articles—think of it as a highlight reel. Learn about expandable images, interactive video, feedback, cartography and more. You'll be surprised to see how easy these features are to create.

Text Styling

This article provides a bare-boned version of an Instant Article, which we encourage you to use as a “scrap article” to experiment with text styles and branding. The Style Editor in your Instant Articles Configuration page, under 'Settings,' is a powerful tool that allows you to customize the look and feel of your articles. Use this example to familiarize yourself with the custom style options available.

Using Captions

With this example you can learn about all the captioning formats to choose from in Instant Articles. Sometimes the best caption design for your articles will be a combination of those available. Preview some best practices around captions, and experiment to see which layouts work for your content.

Finding the Example Articles

You can access the example Instant Articles in the Instant Articles Library in your settings and see the previews in your Pages Manager app.

Instant Articles Library

1. Go to Publishing Tools.

Go to your Page and click on 'Publishing Tools' underneath the search field at the top of the screen.

2. Tap 'Examples.'

Click on the 'Examples' tab under 'Instant Articles' in the left column.

3. Browse example articles.

You will see the example articles in your library. The articles are read-only, but feel tree to copy the markup to start testing the features yourself!

Pages Manager

1. Go to Pages Manager.

Open your Pages Manager mobile app.

2. Tap the More Menu.

Tap the three dots in the bottom right hand corner of the screen.

3. Tap 'Instant Articles.'

Tap on the 'Instant Articles' tab in the 'Sections' heading on the next screen.

4. Tap 'Examples.'

In the top right hand corner of the screen, tap 'Examples' to see to feed of sample Instant Articles that we've posted.

These are just the first three in the example articles series we are planning. Be sure to follow the Instant Articles blog to find out when new examples are available.