vienna.html - Turn your Blog into Facebook Instant Articles + Contentful Intro
2 likes613 views
The document discusses turning blogs into Facebook Instant Articles using Contentful, a cloud-based content management system focused on API integration. It outlines the benefits of Contentful's architecture in adapting to new web technologies and devices, emphasizing speed and efficient content delivery. The document also covers the technical aspects of publishing articles to Facebook and the limitations of using RSS feeds for static sites.
![<!-- A map within your article -->
<figure class="op-map">
<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>](https://image.slidesharecdn.com/vienna-html-160628163446/85/vienna-html-Turn-your-Blog-into-Facebook-Instant-Articles-Contentful-Intro-25-320.jpg)
![Analytics
<figure class="op-tracker">
<iframe>
<script>
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)
analytics.load('XXXXXXXXXXXXXXX');
analytics.page()
}}();
</script>
</iframe>
</figure>](https://image.slidesharecdn.com/vienna-html-160628163446/85/vienna-html-Turn-your-Blog-into-Facebook-Instant-Articles-Contentful-Intro-30-320.jpg)
vienna.html - Turn your Blog into Facebook Instant Articles + Contentful Intro
- 1. Turn Your Blog into Facebook Instant Articles + Contentful Intro vienna.html Meetup, June 2016 By Rouven Weßling ( ) Ecosystem Developer / Developer Evangelist, Contentful @RouvenWessling photo credit: by Matthias RippVienna night view (license)
- 2. Like a CMS... without the bad bits. Contentful is a content management developer platform with an API at its core.
- 3. What is Contentful? Contentful is a content management system (a bit like WordPress) built as a cloud platform (like SalesForce) with an API-first approach for developers (think Twilio)
- 4. Customers
- 5. A web application for managing content
- 6. Powerful API’s for delivering content to any platform and device
- 7. Why does Contentful exist? New devices
- 8. Why does Contentful exist? New channels, including push
- 9. Why does Contentful exist? New technologies (front & backend)
- 10. Why does Contentful exist? The architecture of the web is changing and moving content beyond a page-centric web 2000 A web of linked pages 2016+ Linking programmable objects between connected clouds
- 11. Contentful and Static Sites Why?
- 14. Integrations
- 15. Sync Webhook Getting the content
- 16. Facebook Instant Articles for Static Sites
- 17. 0:06
- 18. How is it so fast? Reduced markup No JS in main document Stored on Facebook's server Aggresivly cached
- 19. Markup
- 20. <head> <meta charset="utf-8"> <meta property="op:markup_version" content="v1.0"> <!-- The URL of the web version of your article --> <link rel="canonical" href="http://example.com/article.html"> <!-- The style to be used for this article --> <meta property="fb:article_style" content="myarticlestyle"> </head>
- 23. <body> <article> <header> <!-- The cover image shown inside your article --> <figure> <img src="http://mydomain.com/path/to/img.jpg" /> <figcaption>This image is amazing</figcaption> </figure> <!-- The title and subtitle shown in your article --> <h1>Title </h1> <h2>Subtitle </h2> <!-- A kicker for your article --> <h3 class="op-kicker">This is a kicker</h3> <!-- The author of your article --> <address> <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a> Brandon is a avid zombie hunter. </address> <!-- The published and last modified time stamps --> <time class="op-published" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time> </header> </article> </body>
- 24. <!-- An image within your article --> <figure> <img src="http://mydomain.com/path/to/img.jpg" /> <figcaption>This image is amazing</figcaption> </figure>
- 25. <!-- A map within your article --> <figure class="op-map"> <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>
- 26. How do I get it to Facebook? Publishing API vs. RSS feed
- 27. For static sites, use the RSS feed.
- 28. RSS limitations The feed is ingested roughly every 10 minutes. If an article has been modified more than 24 hours before ingestion, it will be ignored. No more than 100 articles, sorted by modification time, will be ingested. Deleted articles won't be deleted automatically
- 32. Use Markdown and clean it up require 'kramdown' module FbiaHelper def render_fbia_markdown(text) html = Kramdown::Document.new(text.to_s, {:auto_ids => false, :html_to_native => true}).to_html return html end end https://github.com/contentful-labs/kramdown-instant-article
- 33. Ignore what doesn't work Syntax highlighted code Complex mediaplayers (use iFrames) Complex layouts (e.g. multi column)
- 34. def markdown_has_codeblock(text) text && text.include?("~~~") end
- 36. Slides will be available on Slideshare: http://www.slideshare.net/rwessling