GV Will Have Instant Articles – A Test Post
Here's what Facebook thinks a mobile web page should look like! (image caption)
This is a sassy test content article that also goes over the custom styles supported by GV for storytelling and how they will look in Instant Articles. Please see the Facebook Instant Articles Guide for a technical overview of how to use them. (italic)
Testing a post in iA by sharing it on Facebook and clicking the share on your phone.
Do you think Global Voices should implement Facebook's popular world-domination strategy called Instant Articles? I hope your answer was “YES!” because we are definitely going to use Facebook Instant Articles to help Global Voices get more reach on Facebook. Various organizations have seen big increases in Facebook traffic by using Instant Articles, so despite some misgivings about loss of autonomy and giving in to big blue, we are going to implement them for our sites.
This post was created by GV's tech director/web developer Jer to test different types of content in Instant Article format so that when we launch it on the main site it will work great. We need to have a live post for this to work, so I'm using this one! Expect lots of unnecessary formatting below!
What kinds of things do we need to test? (this is an H2)
There are lots of things to test, this list is a test itself, using the common heading formats (H3 and H4 especially, we dont’ usually recommend using H2 in posts and H1 is forbidden)!
Standard text formatting things (this is an h3)
Facebook iA has a very tight grip on how text is formatted in their system, so when we convert our posts into their format a lot can go wrong. Here's a symbolic breakdown that tests headings levels.
Blockquotes (this is an h4)
Blockquotes are one of the most important text formats on Global Voices because they let us quote the words of people around the world!
- Jeremy Clarke
Lists (this is an H4)
Things lists are useful for:
- Listing stuff.
- Breaking up complex text for readability.
- Getting those neat bullets.
Twitter Embed
Facebook Instant Articles doesn't allow horizontal rules because lines are dangerous and need to be kept under control.
— jeremyclarke (@jeremyclarke) February 1, 2017
Tweets should render from iframe even in Instant Articles.
YouTube Embeds
YouTube Videos should play directly in iA.
Tumblr Embeds
DISABLED-embed]http://globalvoices.tumblr.com/post/157945851862/walking-on-death-along-the-iraqi-border[/embed]
Tumblr embeds should work in iA, but don't yet. Follow up on GitHub.
[Custom text formats used by GV (h3 again)
These are trickier because FB doesn't support them by default, so to make them work in iA we use the transformations system in iA which converts them into the standard supported formats.
Translated Blockquotes (h4)
On GV we have a tradition of including both the source quote and the translation when we translate a direct quote from someone. On the main site this is displayed as tabs, with tabs for “Translation” and “Original Quote”. This needs very special handling for iA, because they have no support for special formats like our translated quote tabs.
In this case, the solution we've chosen is a bit sad but we don't have a lot of options: The source quote will be hidden completely, and only the translation of the quote will show in iA. So if you're looking at the quote below on a GV site, you'll be able to see the original in English (from above) in the “Original Quote” tab, but if you're looking at it inside Facebook, you'll see only the horribly translated French version.
Blockquotes are one of the most important text formats on Global Voices because they let us quote the words of people around the world!
- Jeremy Clarke
Les blockquotes sont un des plus importants formats de texte sur Global voices parce que ils nous laisse citer les mots des personnes a travers le monde!
- Jérémy Clarke
Tweet Embeds (Special GV format, this is h4)
We have special logic on GV sites that cleans up tweets so they live in plain text in the post, but it messes up iA and makes them not have all the special Twitter formatting. We have a special system to fix them up for iA, and the tweet below tests it:
Facebook Instant Articles doesn't allow horizontal rules because lines are dangerous and need to be kept under control.
— jeremyclarke (@jeremyclarke) February 1, 2017
Tweet Embed with Translation (this is h4)
Tweets can also have a blockquote.translation below them. We need to make sure that these don't get removed.
Facebook Instant Articles doesn't allow horizontal rules because lines are dangerous and need to be kept under control.
— jeremyclarke (@jeremyclarke) February 1, 2017
Les Articles Instants de Facebook ne permet pas de règles horizontales car les lignes sont dangereuses et doivent être gardées sous contrôle.
.contributors blocks (h4)
.notes blocks (h4)
.factbox blocks (h4)
H3 Heading inside the factbox
Little image that goes inside the factbox.
A little paragraph text that's inside the factbox, leading to a list:
- factbox test list item 1
- factbox test list item 2
- factbox test list item 3
.factbox is a generic gray box that can be used to add info to a post that doesn't fit well in the main text, or extract info that you want to re-iterate but doesn't work as a pull-quote. In normal use we usually float a factbox left or right, so it's a kind of in-post sidebar. On mobile though, the only place iA is used, there is no floating because the column is so narrow that the box would be in-line either way. Above/to the right is a factbox containing a few things for testing purposes.
In iA there is no way to display a box like this which contains complex info like images, lists or headings, so we basically have to just give up on them. In Instant Article display, .factbox will simply be removed, and the contents will appear in the post without any special display.
So in iA, we would expect this example factbox (starting with “H3 Heading…” and ending with “factbox test list item 3″) to look like normal content right below the heading that says “.factbox blocks (h4)”.
Facebook Embed
Above is a Facebook embed.
Instagram Embed
Above is an Instagram embed.
Anything else?
Yes actually! The last format we use is .pull-quote, which makes a bit of text big and usually floated left or right. Because these require floating, I'll insert a bunch of fake text below.
Please ignore the gibberish and if you actually read all this thanks! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus velit diam, interdum sed tincidunt viverra, porttitor et elit.
This is a non-floated pull-quote. It should be full width, but very large in a normal post.
In accumsan ultricies neque eu suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent malesuada pharetra arcu non pretium.
This is a right-floated pull-quote, it should have text wrap around it to the left on a large display.
Nulla eu lorem at ante semper elementum. Quisque hendrerit gravida eros, ut gravida dolor posuere quis. Etiam tincidunt arcu eget ipsum imperdiet mattis. Donec tempor nisl eu mi blandit et adipiscing elit consequat. Suspendisse a odio tincidunt tortor gravida auctor. Vestibulum a mollis felis. In sit amet lacus vitae est semper bibendum. Donec vel urna velit. Ut enim risus, scelerisque at ultricies nec, eleifend vel nunc. Fusce quis ultricies massa. Nam venenatis dapibus risus non laoreet. Duis et arcu vel metus faucibus pellentesque vestibulum vitae lectus. Suspendisse sed turpis augue, non pellentesque quam.
This is a left-floated pull-quote, same as a right-floated one, but with text wrapping around it's right side on large screens (on small screens all pull-quotes are full width).
Maecenas faucibus, quam id facilisis posuere, nulla tortor laoreet quam, sed volutpat erat justo ac tortor. Maecenas pulvinar nulla ultrices urna fermentum sit amet tincidunt nunc bibendum. Donec accumsan tortor in ante pharetra nec dictum nibh consequat. Pellentesque ante metus, commodo ultrices laoreet non, laoreet at urna. Nam dapibus facilisis lacus sagittis ultrices. Aliquam est mauris, imperdiet ut rutrum sed, rutrum nec orci. Ut dapibus fermentum pellentesque. Vivamus tincidunt felis eget tortor luctus fermentum. Maecenas id odio dolor, sed rutrum massa. Integer enim sem, dignissim eget rutrum nec, scelerisque vitae orci. Suspendisse venenatis lorem eu orci bibendum interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum rhoncus pretium cursus.
Floated captioned image test, since even floated images should be full screen for mobile.
This image is floated right, but should be full screen on IA.
Maecenas faucibus, quam id facilisis posuere, nulla tortor laoreet quam, sed volutpat erat justo ac tortor. Maecenas pulvinar nulla ultrices urna fermentum sit amet tincidunt nunc bibendum. Donec accumsan tortor in ante pharetra nec dictum nibh consequat. Pellentesque ante metus, commodo ultrices laoreet non, laoreet at urna. Nam dapibus facilisis lacus sagittis ultrices. Aliquam est mauris, imperdiet ut rutrum sed, rutrum nec orci. Ut dapibus fermentum pellentesque. Vivamus tincidunt felis eget tortor luctus fermentum. Maecenas id odio dolor, sed rutrum massa. Integer enim sem, dignissim eget rutrum nec, scelerisque vitae orci. Suspendisse venenatis lorem eu orci bibendum interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum rhoncus pretium cursus.
Floated plain image test, no caption
Maecenas faucibus, quam id facilisis posuere, nulla tortor laoreet quam, sed volutpat erat justo ac tortor. Maecenas pulvinar nulla ultrices urna fermentum sit amet tincidunt nunc bibendum. Donec accumsan tortor in ante pharetra nec dictum nibh consequat. Pellentesque ante metus, commodo ultrices laoreet non, laoreet at urna. Nam dapibus facilisis lacus sagittis ultrices. Aliquam est mauris, imperdiet ut rutrum sed, rutrum nec orci. Ut dapibus fermentum pellentesque. Vivamus tincidunt felis eget tortor luctus fermentum. Maecenas id odio dolor, sed rutrum massa. Integer enim sem, dignissim eget rutrum nec, scelerisque vitae orci. Suspendisse venenatis lorem eu orci bibendum interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum rhoncus pretium cursus.
Floated image wrapped in a link
Maecenas faucibus, quam id facilisis posuere, nulla tortor laoreet quam, sed volutpat erat justo ac tortor. Maecenas pulvinar nulla ultrices urna fermentum sit amet tincidunt nunc bibendum. Donec accumsan tortor in ante pharetra nec dictum nibh consequat. Pellentesque ante metus, commodo ultrices laoreet non, laoreet at urna. Nam dapibus facilisis lacus sagittis ultrices. Aliquam est mauris, imperdiet ut rutrum sed, rutrum nec orci. Ut dapibus fermentum pellentesque. Vivamus tincidunt felis eget tortor luctus fermentum. Maecenas id odio dolor, sed rutrum massa. Integer enim sem, dignissim eget rutrum nec, scelerisque vitae orci. Suspendisse venenatis lorem eu orci bibendum interdum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum rhoncus pretium cursus.
HTML5 Video Tag From Upload
1 comment