Jak na Facebook Instant Articles

Vzhledem k tomu, že na špatném mobilním připojení mohou být běžné webové stránky pomalé, vznikají pokusy o nabídnutí obsahu co možná nejrychleji.

Google přišel s technologií AMP HTML. Pokus o rychlé zobrazování obsahu od Facebooku se potom jmenuje Instant Articles:

Jak začít

Nejprve je nutné okamžité články povolit pro danou Facebook stránku:

Tím se odkryje možnost v nastavení Facebook stránky:

V nastavení je potom krok za krokem popsán postup, jak instantních článku docílit.

Požadavky

Je nutné prokázat vlastnictví stránky přidáním <meta> značky do jejího kódu.

Na rozdíl od AMP se obsah článků při použití Instant Articles ukládá na servery Facebooku. Načíst nové články jde asi nejsnadněji pomocí RSS. Jde použít i Facebook API.

RSS zdroj pro Instant Articles

Oproti standardnímu RSS zdroji vyžadují Instant Articles navíc plný obsah článku ve značce <content:encoded>. Je k tomu nutné použít obal pomocí CDATA.

Jeden článek v RSS zdroji vhodný pro IA tak bude vypadat třeba následovně:

<item>
  <title>Odkaz pro poslání SMS</title>
  <link>http://jecas.cz/sms-odkaz</link>
  <guid>http://jecas.cz/sms-odkaz</guid>
  <description>Jak dát na stránku odkaz pro předvyplnění SMS.</description>
  <content:encoded>
    <![CDATA[
      Obsah <b>včetně</b> HTML značek.
    ]]>
  </content:encoded>
  <pubDate>2016-04-05T07:29:07+0200</pubDate>
  <author>Bohumil Jahoda</author>
</item>

Povinné jsou pouze prvky <title>, <link> a </content:encoded>.

Dále je kvůli značce <content> potřeba do elementu <rss> přidat odkaz na jmenný prostor:

<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/">

Úpravy pro použití na Facebooku mohou způsobit, že RSS zdroj bude nevalidní.

Například nebude vyhovovat formát značky <author>. Značka <pubDate> potom vyžaduje datum ve formátu ISO-8601 místo RFC-822.

Při použití Nette a šablonovacího systému Latte jde požadované datum vypsat následovně:

<pubDate>
  {$datumClanku|date:'Y-m-d\\TH:i:sO'}
</pubDate>

Zdá se tedy výhodnější vytvořit speciální variantu RSS jen pro Facebook.

Do RSS se také dostane plný obsah příspěvku. Pokud to vadí, jde přidat i HTTP ověření, aby plný obsah z RSS nemohl stahovat někdo nepovolaný.

Po přidání RSS zdroje s články by se jejich obsah měl za chvíli načíst.

Je možné mít ještě jeden Development zdroj určený pro testování funkčnosti.

Logo

Logo je jedinou věcí, kterou je třeba upravit ve stylech Instant Articles. Musí se nahrát PNG obrázek o rozměrech 690 × 132 pixelů a víc.

Jinak jde vzhled článku omezeně upravovat v editoru na Facebooku (zejména barva písma).

Kontrola článků

Prohlédnout si naimportované články potom jde na stránce Publishing Tools → Instant Articles:

V případě problémů s články se zobrazuje žlutý vykřičník. Při zvolení editace jsou chyby znázorněny a popsány.

Pravidla pro obsah článku

Je možné, že obsah produkovaný pro běžnou HTML stránku nebude pro Instant Articles vyhovovat. Následuje popis některých problémů, které je třeba řešit.

1. Všechny odkazy musí být absolutní. Tedy:

   <a href="/jiny-clanek">

   Nahradit na:

   <a href="http://example.com/jiny-clanek">

   Totéž platí pro HTML #kotvy.

2. Nadpisy mohou být pouze o úrovních <h1> a <h2>.

   U běžných stránek bývá obvyklé, že <h1> je název článku a nižší nadpisy značí podnadpisy. V Instant Articles je hlavní nadpis v části <header>, takže se nabízí všechny úrovně o jednu posunout.

3. V kódu by neměly být prázdné elementy. To platí i pro obrázky obalené do odstavce:

   <p><img src="obrazek.png"></p>

   

4. Cílové obrázky vložené značkou <img> musí existovat (nesmí vracet chybu 404 apod.).

   

   Obrázky musí být obaleny značkou <figure>. Nemohou volně ležet v obsahu. Ideálně by měly mít i popisek v <figcaption>.

5. HTML seznamy mohou obsahovat pouze nadpisy a odstavce. Každá položka seznamu je omezena na maximálně jeden element.

   

   Není tedy možné do jednoho <li> vložit dva odstavce, není možné zanořit více seznamů do sebe a není možné v seznamech používat obrázky.

6. Není možné používat značku <svg>.

   

U stránek s pokročilejším formátováním tak příprava pro Instant Articles dá nějakou práci.

Schválení

Aby mohl být obsah dostupný přes IA, musí se nejprve nahrát alespoň 10 článků, které musí být ručně schváleny. Má to trvat jednotky dní.

Závěr

Okamžité články jde zatím z pohledu konsumenta obsahu používat jen v posledních versích Facebook aplikace pro iOS a Android.

U AMP platí, že nejrychlejší stránku je možné udělat bez AMP. V případě Instant Articles je situace trochu jiná, protože obsah článků je uložen na serveru Facebooku, čímž se minimálně ušetří doba potřebná k navázání spojení s novou doménou.

Navázání okamžitých článků na nativní FB aplikaci přináší značnou výhodu díky tomu, že při kliknutí na odkaz není nutné přeskakovat do prohlížeče a potom se složitě přepínat zpátky.