Så här publicerar du innehåll med Facebook Instant Articles

Prestationsfrågor och de stora aktörerna på webben tar upp prestanda på sina egna sätt. Googles svar kommer i form av sin kontroversiella AMP; ett publiceringsformat som ger en smidig upplevelse för sina mobila sökresultat. Google rankar även rankningar som implementerar AMP mer gynnsamt. 

Facebook har på samma sätt utformat sitt eget initiativ med Instant Articles så att det kan dela delat webbinnehåll på sin mobilapp omedelbart med en inbyggd mobilupplevelse. Innehåll som har validerats som en snabbartikel kommer att markeras med blixten när den delas var som helst på Facebook-flödet.

I denna handledning lär vi oss vad "Instant Articles" är och hur du kan skicka ditt eget innehåll till detta snabba publiceringsverktyg. Nu går vi!

1. Anmälan

Först måste du ha admin eller redaktör tillgång till en publicerad Facebook-sida.

Vid tidpunkten för starten var Instant Articles endast tillgängliga för stora eller medelstora förlag, vars Facebook-sida hade minst hundra tusen följare eller liknande med en aktiv publik. lite konstigt att mina sidor inte var berättigade att anmäla sig till Instant Articles då! Nuförtiden har Facebook öppnat Instant Articles för alla utgivare av alla storlekar, du behöver bara registrera dig.

Välj sedan sidan.

2. Verifiera din webbplats

Du måste verifiera att du äger webbplatsen i fråga genom att lägga till fb: sidor metakod inom huvud. Glöm inte att lägga till webbadressen och tryck på Hävda webbadress för att slutföra verifieringen. Du kan verifiera flera webbadresser om din webbplats innehåller ett antal kanaler eller underdomäner, som Medium och Tuts + (webdesign.tutsplus.com, code.tutsplus.com etc.).

Ange detaljer och tryck på "Claim URL"

3. Formatera Markup

Innan du kan publicera Instant Articles regelbundet måste du skicka in minst fem artiklar för granskning. Dessa artiklar ska använda Instant Article-kompatibel formatering, till exempel:

         

Titel

Texta

Zuck Zuck är VD för Facebook.
Kall omslagshuvudet

Webbdesign

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque doloribus quia quasi soluta atque veniam harum! Voluptatum facilis placeat soluta molestias, dolore quasi quos pariatur minus corporis, consequatur amet facere.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exquam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. quo!

Bildtext

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exquam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. quo!

Som du kan se ovan är formatet Instant Articles en vanlig semantisk HTML-struktur med speciella klasser och attribut. Bilden har till exempel uppgifter-mode attribut satt till fullskärm vilket kommer att göra bilden helskärm. I den andra bilden har vi en data återkoppling attributuppsättning som tillåter våra användare att ge en "Gilla" och bifoga kommentarer direkt till bilden.

Ett par anpassade metakoder läggs också till i huvud tagg som fb: article_style tagg som definierar innehållsstilar. Dessutom har kanonisk metakoden borde peka på den ursprungliga artikeln; en faktor som leder många utgivare att föredra Facebook: s Instant Articles över Google AMP. Google AMP är mycket mer kryptisk om platsen för originalarbete.

4. Skicka in ditt innehåll

När du har det klart, skicka in innehållet till Facebook.

Det finns två sätt att skicka in ditt innehåll. För det första kan du skicka det direkt via ditt Facebook-konto. Inom Utgivningsverktyg skärm bör du hitta + Skapa knappen som leder dig till formuläret för att posta HTML-koden.

Det andra tillvägagångssättet innefattar att tillhandahålla en Feed-URL som innehåller innehållet. Detta tillvägagångssätt kan ta ett tag att ställa in beroende på vilken plattform din webbplats är byggd på. Lyckligtvis finns ett plugin tillgängligt för populära plattformar som WordPress och Drupal som gör det lite lättare att omvandla innehållet till ett kompatibelt XML-format.

  • Instant Artikel för WordPress
  • Instant Artikel för Drupal

Ändå skickar innehållet manuellt det snabbaste sättet att publicera ditt innehåll som en snabbartikel, särskilt under dessa tidiga skeden.

5. Förhandsgranska artikeln

För att förhandsgranska innehållet som du har skickat måste du installera mobilappen för Facebook Page Manager. Instant artiklar är tillgänglig i inställningar menyn på sidan Verktygsfält.

  • Facebook Sidansvarig för Android
  • Facebook Sidansvarig för iOS

6. Anpassa innehållsformat

Styling Instant Articles är helt enkelt, men också restriktiv. Facebook ger ett gränssnitt för att ändra vissa delar av artikeln, till exempel teckensnittsfamiljen, teckensnittsfärg, logotypen, etc. Om du har skapat en anpassad stil, se till att stilnamnet matchas med det värde som anges fb: article_style metakod.

7. Vänta på granskningsresultatet

Översynsprocessen kan ta upp till tre dagar - och ditt inlägg kanske inte accepteras omedelbart. Det kan finnas kodfel eller stylingproblem som förhindrar publicering. Jag var en gång tvungen att omorganisera bildhuvudpositionen på en artikel så det verkade mer lik den på webbplatsen. 

När du väl har godkänts kan du fortsätta att lägga till flödesadressen för att automatiskt skicka innehåll till direktartikel.

Avslutar

Facebook Instant Articles ställer några begränsningar som kan vara ett hinder för vissa webbplatser. Till exempel stöder den inte pre element som är en gemensam tagg som används på utvecklingsbloggar för att göra kodsedlar. Artiklar som innehåller den här taggen är ogiltiga enligt standarden Instant Articles. Av den anledningen kan du inte se webbplatser som Envato Tuts + eller Smashing Magazine på Instant Articles.

Detta adresserar inte ens "bör" i allt detta. Som John Gruber uppgav, särskilt när han diskuterade Google AMP:

"Om du är en förläggare och dina webbsidor inte laddas snabbt, är den klara lösningen att fixa din f *** konungswebbplats så att sidorna laddas snabbt, inte kasta händerna upp i luften och implementera AMP." - John Gruber

Vårt jobb som webbutvecklare har blivit alltmer om att upprätthålla innehållet för att vara kompatibelt på olika plattformar som AMP, Instant Articles, och om du har tur, även Apple News (för att inte nämna hur front-workflowen har förändrats drastiskt på bara en några år med nya verktyg som Webpack, React, Vue, etc.)

Nyligen utvecklade utvecklare ett nytt initiativ med Progressive Web App (PWA). För webbplatser som inte kan implementera Instant Articles eller AMP, kan PWA vara ett bra alternativ. Vi ska titta på det i nästa handledning, jag ser dig där!

Ytterligare resurser

  • Facebook Instant Articles Documentation
  • Facebook Instant Articles for Code Examples