vienna.html - Turn your Blog into Facebook Instant Articles + Contentful Intro
•
2 gefällt mir•609 views
Facebook Instant Articles and Static Sites - does that fit together? Yes it does. Quick intro how Instant Articles work and they fit together with Static Sites. Presentation also includes an into to Contentful. Presented at vienna.html on Jun 28, 2016.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie vienna.html - Turn your Blog into Facebook Instant Articles + Contentful Intro
Ähnlich wie vienna.html - Turn your Blog into Facebook Instant Articles + Contentful Intro (20)
Mehr von Rouven Weßling
Mehr von Rouven Weßling (11)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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