Prestaties zijn belangrijk, en de grote spelers op het web pakken de prestaties op hun eigen manier aan. Het antwoord van Google komt in de vorm van zijn controversiële AMP; een publicatie-indeling die een soepele ervaring biedt voor hun mobiele zoekresultaten. Google rangschikt zelfs vermeldingen die AMP gunstiger implementeren.
Facebook heeft op dezelfde manier een eigen initiatief bedacht met Instant-artikelen, waarmee het gedeelde webinhoud op zijn mobiele app kan aanbieden ogenblikkelijk met een native-mobile ervaring. Inhoud die is gevalideerd als een Instant-artikel, wordt gemarkeerd met het bliksemembleem wanneer deze ergens op de Facebook-feed wordt gedeeld.
In deze tutorial leren we wat 'Instant Articles' is en hoe u uw eigen content kunt porteren naar deze tool voor snelle publicatie. Laten we gaan!
1. Meld je aan
Ten eerste moet je beheerder- of bewerkingsrechten hebben voor een gepubliceerde Facebook-pagina.
Op het moment van zijn oprichting was Instant Articles alleen beschikbaar voor grote of middelgrote uitgevers wiens Facebook-pagina minstens honderdduizend volgers had of leuk vond, met een actieve doelgroep; geen wonder dat mijn pagina's toen niet in aanmerking kwamen om zich aan te melden voor Instant-artikelen! Tegenwoordig heeft Facebook Instant Articles geopend voor alle uitgevers van alle groottes, je hoeft je alleen maar aan te melden.
Selecteer vervolgens de pagina.
2. Controleer uw website
U moet verifiëren dat u de betreffende website bezit door de fb: pagina's metatag binnen de hoofd. Vergeet niet om de URL toe te voegen en druk op de URL claimen om de verificatie af te ronden. U kunt meerdere URL's verifiëren voor het geval uw site een aantal kanalen of subdomeinen omvat, zoals Medium en Tuts + (webdesign.tutsplus.com, code.tutsplus.com, enz.).
Voer details in en druk op "URL claimen"
3. Formatteer de markup
Voordat u Instant-artikelen regelmatig kunt publiceren, moet u ten minste vijf artikelen ter beoordeling indienen. Deze artikelen moeten de indeling volgens Instant Article gebruiken, bijvoorbeeld:
Titel
subtitel
Zuck Zuck is de CEO van Facebook. Koele hoeskop
Web ontwerp
Lorem ipsum dolor sit amet, consectetur adipiserende 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 adipiserende elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. quo!
Afbeelding bijschrift
Lorem ipsum dolor sit amet, consectetur adipiserende elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. quo!
Zoals je hierboven kunt zien, is de Instant Articles-indeling een eenvoudige semantische HTML-structuur met speciale klassen en kenmerken. De afbeelding heeft bijvoorbeeld de datamodus attribuut ingesteld op volledig scherm waarmee de afbeelding op volledig scherm wordt weergegeven. In de andere afbeelding hebben we een data-feedback kenmerkset waarmee onze gebruikers een "vind ik leuk" kunnen geven en opmerkingen rechtstreeks aan de afbeelding kunnen toevoegen.
Een paar aangepaste metatags worden ook toegevoegd binnen de hoofd tag zoals de fb: article_style tag die de inhoudsstijlen definieert. tevens de kanoniek metatag moet verwijzen naar het originele artikel; een factor die ertoe leidt dat veel uitgevers de Instant-artikelen van Facebook verkiezen boven Google AMP. Google AMP is veel meer cryptisch over de locatie van origineel werk.
4. Verzend uw inhoud
Zodra u klaar bent, verzendt u de inhoud naar Facebook.
Er zijn twee manieren om uw inhoud in te dienen. Ten eerste kun je het rechtstreeks via je Facebook-account plaatsen. Binnen de Uitgavehulpmiddelen scherm, zou u de + creëren knop die u naar het formulier leidt om de HTML-code te plaatsen.
De tweede benadering omvat het verschaffen van een Feed-URL die de inhoud bevat. Deze aanpak kan een tijdje duren om in te stellen, afhankelijk van het platform waarop uw website is gebouwd. Gelukkig is een plug-in beschikbaar voor populaire platforms zoals WordPress en Drupal, waardoor het een beetje eenvoudiger wordt om uw inhoud om te zetten in een compatibel XML-formaat.
Direct artikel voor WordPress
Instant-artikel voor Drupal
Niettemin is het handmatig indienen van de inhoud de snelste manier om uw inhoud te publiceren als een Instant-artikel, vooral tijdens deze vroege stadia.
5. Bekijk een voorbeeld van het artikel
Als u een voorbeeld van de inhoud die u hebt verzonden wilt bekijken, moet u de Facebook Page Manager mobiele app installeren. Instant artikelen is toegankelijk in de instellingen menu op de werkbalk van de pagina.
Facebook Page Manager voor Android
Facebook Page Manager voor iOS
6. Pas de inhoudstijlen aan
Het stylen van Instant Articles is ronduit eenvoudig, maar ook beperkend. Facebook biedt een interface om sommige componenten van het artikel te wijzigen, zoals de lettertypefamilie, letterkleur, het logo, enzovoort. Als u een aangepaste stijl hebt gemaakt, moet u ervoor zorgen dat de stijlnaam overeenkomt met de waarde die is ingesteld in fb: article_style metatag.
7. Wacht op de resultaten van het beoordelingsproces
Het beoordelingsproces kan tot drie dagen duren en uw inzending wordt mogelijk niet meteen geaccepteerd. Er kunnen codefouten of stijlproblemen zijn waardoor publicatie wordt voorkomen. Ik moest ooit de positie van de afbeeldingskop op een artikel reorganiseren zodat het meer leek op dat op de website.
Maar als je eenmaal bent goedgekeurd, kun je doorgaan met het toevoegen van de Feed-URL om inhoud automatisch naar Instant-artikelen te pushen.
Afsluiten
Facebook Instant Articles stelt enkele beperkingen die een struikelblok kunnen vormen voor sommige websites. Het ondersteunt bijvoorbeeld niet de pre element dat een algemene tag is die wordt gebruikt op ontwikkelingsblogs om codefragmenten weer te geven. Artikelen met deze tag zijn ongeldig volgens de standaard Instant Articles. Alleen al om deze reden zie je sites als Envato Tuts + of Smashing Magazine misschien niet op Instant Articles.
Hiermee wordt in dit alles niet eens de 'moet' aangepakt. Zoals John Gruber zei, met name bij de bespreking van Google AMP:
"Als u een uitgever bent en uw webpagina's niet snel laden, is het een goed idee om uw website goed op te lossen, zodat pagina's snel worden geladen, niet om uw handen omhoog te gooien en AMP te implementeren." - John Gruber
Onze taak als webontwikkelaars is steeds meer gaan over het onderhouden van inhoud om compatibel te zijn op verschillende platforms zoals AMP, Instant Articles, en als je geluk hebt, ook Apple News (en niet te vergeten hoe de front-endworkflow drastisch is veranderd in slechts een paar jaar met het verschijnen van nieuwe tools zoals Webpack, React, Vue, etc.)
Onlangs bedachten ontwikkelaars een nieuw initiatief genaamd Progressive Web App (PWA). Voor sites die Instant Articles of AMP niet kunnen implementeren, is PWA misschien een goed alternatief. We zullen het in de volgende tutorial bekijken, ik zie je daar!
Verdere bronnen
Facebook Instant Articles Documentation
Instant artikelen op Facebook voor codevoorbeelden
Accentsconagua
Share
Voer details in en druk op "URL claimen"
