Slik publiserer du innhold med Facebook Instant Articles

Prestasjonsforhold, og de store aktørene på nettet, tar opp ytelsen på sine egne måter. Googles svar kommer i form av sin kontroversielle AMP; et publiseringsformat som gir en jevn opplevelse for deres mobile søkeresultater. Google selv rangeringer som implementerer AMP mer gunstig. 

Facebook har på samme måte uttalt sitt eget initiativ med Instant Articles slik at det kan tjene delte webinnhold på mobilappen øyeblikkelig med en innfødt mobil opplevelse. Innhold som har blitt bekreftet som en øyeblikkelig artikkel, vil bli merket med lynemblemet når det deles hvor som helst på Facebook-strømmen.

I denne opplæringen lærer vi hva "Instant Articles" er, og hvordan du kan sende ditt eget innhold til dette raske publiseringsverktøyet. La oss gå!

1. Registrer deg

Først må du ha admin eller redaktør tilgang til en publisert Facebook-side.

Ved begynnelsen var Instant Articles bare tilgjengelig for store eller mellomstore utgivere hvis Facebook-side hadde minst hundre tusen tilhengere, eller liker, med et aktivt publikum; lite lurt på at sidene mine ikke var kvalifisert til å registrere meg for Instant Articles da! I dag har Facebook åpnet Instant Articles for alle utgivere av alle størrelser, du må bare registrere deg.

Deretter velger du siden.

2. Bekreft ditt nettsted

Du må verifisere at du eier nettstedet ved å legge til FB: sider meta tag innenfor hode. Ikke glem å legge til nettadressen og trykk på Krav på URL å fullføre bekreftelsen. Du kan bekrefte flere nettadresser hvis nettstedet ditt består av flere kanaler eller underdomener, som Medium og Tuts + (webdesign.tutsplus.com, code.tutsplus.com, etc.).

Skriv inn detaljer og trykk på "Krav URL"

3. Formater Markup

Før du kan publisere Instant Articles regelmessig, må du sende inn minst fem artikler for gjennomgang. Disse artiklene skal bruke Instant Artikkel-kompatibel formatering, for eksempel:

         

Tittel

Subtitle

Zuck Zuck er administrerende direktør for Facebook.
Kult dekselhode

Webdesign

Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Doloremque doloribus quia quasi soluta atque veniam harum! Voluptatum facilis plasserer soluta molestias, dolore quasi parosatur minus corporis, consequatur amet facere.

Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Eksempel på maksimal volum når det gjelder eaque vero eius perspiciatis aliquam hic fugiat nobis debitis somperiores facilis ullam, nulla voluptatum animi. quo!

Bildebilde

Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Eksempel på maksimal volum når det gjelder eaque vero eius perspiciatis aliquam hic fugiat nobis debitis somperiores facilis ullam, nulla voluptatum animi. quo!

Som du kan se over, er Instant Articles-formatet en vanlig semantisk HTML-struktur med spesielle klasser og attributter. Bildet har for eksempel data-modus attributtet satt til full skjerm som vil gjøre bildet full skjerm. I det andre bildet har vi en data-tilbakemelding attributtsett som gjør det mulig for brukerne å gi en "Like" og legge ved kommentarer direkte til bildet.

Et par tilpassede metakoder blir også lagt til i hode tag som fb: article_style tag som definerer innholdsstiler. i tillegg kanonisk metakoden bør peke på den opprinnelige artikkelen; en faktor som fører mange utgivere til å foretrekke Facebooks direkte artikler over Google AMP. Google AMP er langt mer kryptisk om plasseringen av originalt arbeid.

4. Send inn innholdet ditt

Når du har det klart, send inn innholdet til Facebook.

Det er to måter å sende inn innholdet på. For det første kan du legge det direkte via din Facebook-konto. Innen Publiseringsverktøy skjerm, bør du finne + Skape knappen som fører deg til skjemaet for å legge inn HTML-koden.

Den andre tilnærmingen innebærer å gi en feed-URL som inneholder innholdet. Denne tilnærmingen kan ta litt tid å sette opp avhengig av hvilken plattform nettstedet ditt er bygget på. Heldigvis er et plugin tilgjengelig for populære plattformer som WordPress og Drupal som gjør det litt enklere å forvandle innholdet til et kompatibelt XML-format.

  • Instant Artikkel for WordPress
  • Instant Artikkel for Drupal

Likevel, å sende innholdet manuelt, er den raskeste måten å publisere innholdet som en øyeblikkelig artikkel, spesielt i disse tidlige stadiene.

5. Forhåndsvisning av artikkelen

For å forhåndsvise innholdet du har sendt inn, må du installere Facebook Page Manager mobilappen. Øyeblikkelige artikler er tilgjengelig i innstillinger menyen på siden Verktøylinje.

  • Facebook Page Manager for Android
  • Facebook Page Manager for iOS

6. Tilpass innholdsstyper

Styling Instant Articles er rett og slett lett, men likevel restriktiv. Facebook gir et grensesnitt for å endre enkelte komponenter i artikkelen, for eksempel skrifttypefamilien, skrifttypefarge, logoen etc. Hvis du har opprettet en tilpasset stil, må du kontrollere at stilnavnet er i samsvar med verdien som er angitt i fb: article_style metakode.

7. Venter på resultatene for gjennomgangsprosessen

Gjennomgangsprosessen kan ta opptil tre dager, og innleveringen kan ikke umiddelbart aksepteres. Det kan være kodefeil eller stylingproblemer som hindrer publisering. Jeg måtte en gang omorganisere bildehovedposisjonen på en artikkel, så det virket mer lik den på nettstedet. 

Likevel, når du har blitt godkjent, kan du fortsette å legge til nettadressen for å automatisk skyve innhold til øyeblikkelige artikler.

Wrapping Up

Facebook Instant Articles utgjør noen begrensninger som kan være en hindring for noen nettsteder. For eksempel støtter det ikke pre element som er en felles merkelapp brukt på utviklingsblogger for å gjengi kodeutdrag. Artikler som inneholder denne taggen, er ugyldige i henhold til standard artikler. Av denne grunn kan du kanskje ikke se nettsteder som Envato Tuts + eller Smashing Magazine på Instant Articles.

Dette adresserer ikke engang "bør" i alt dette. Som John Gruber uttalte, spesielt når han diskuterte Google AMP:

"Hvis du er en utgiver og nettsidene dine ikke lastes raskt, er den klare løsningen å fikse din f *** konge nettside slik at sidene lastes raskt, ikke å kaste hendene dine opp i luften og implementere AMP." - John Gruber

Vår jobb som webutviklere har blitt stadig mer om å opprettholde innhold for å være kompatibelt på forskjellige plattformer som AMP, Instant Articles, og hvis du er heldig, også Apple News (for ikke å nevne hvordan frontendens arbeidsflyt har endret seg drastisk i bare en par år med nye verktøy som Webpack, React, Vue, etc.)

Nylig utviklere kom opp med et nytt initiativ laget Progressive Web App (PWA). For nettsteder som ikke kan implementere Instant Articles eller AMP, kan PWA være et godt alternativ. Vi vil se på det i neste opplæring, jeg ser deg der!

Ytterligere ressurser

  • Facebook Instant Articles Documentation
  • Facebook Instant Articles for Code Eksempler