In dit artikel vind je een stappenplan voor het installeren van de Facebook Instant Articles functionaliteit.

Facebook Instant articles zijn Facebook’s poging om te zorgen dat content sneller laadt in de Facebook app op smart phones. Dat doet Facebook door jouw webpagina’s binnen Facebook te halen met behulp van een koppeling tussen jouw website en Facebook en te strippen van ‘onnodige’ opmaak, menu’s etc.

Facebook Instant Articles: snellere laadtijd

Waarom zou je heir werk van maken? Simpel: gebruikersgemak. Instant articles worden razendsnel geladen als iemand op een link naar zo’n artikel klikt vanuit de Facebook app. Veel sneller dan wanneer een Facebookgebruiker jouw blogartikel opent in haar browser.

Je herkent Facebook instant articles op Facebook aan het bliksemschichtje:

Als je op een instant article klikt, krijg je een soort simpele versie van een webpagina.

Die ziet er heel anders uit dan wanneer je daadwerkelijk naar de (mobiele) pagina van een externe website gaat. De vormgeving en de functionaliteiten worden bepaald door het bedrijf dat de website beheert.

Dat kun je goed zien in de afbeelding hieronder. Ik klikte op een link naar dit blog die ik in de Facebook app tegenkwam. Dit blog gebruikt geen instant articles. Dat zie je heel duidelijk: er is een menu, social media knoppen, een zoekfunctionaliteit, etc. Heel anders dan het voorbeeld hierboven dat uit ‘kale’ content bestaat.

Argumenten tegen Facebook Instant articles

Facebook instant articles laden sneller. Maar toch willen veel online uitgevers en bloggers deze functionaliteit niet installeren. Voor veel (de meeste?) bedrijven is het belangrijk om bezoekers naar hun eigen site te krijgen. Alleen dan kunnen ze zorgen dat bezoekers acties ondernemen, zoals zich te abonneren, producten aan te schaffen, op advertentiebanners te klikken, etc. En omdat een instant article niet op jouw site maar op die van Facebook laadt, en in een kale versie, krijg je dat verkeer niet.

Je zou kunnen zeggen dat die Instant Articles Facebook’s poging zijn om jouw content te gebruiken zonder dat je er iets voor terug krijgt. Als mensen jouw artikelen op deze manier lezen, blijven ze binnen Facebook en komen ze niet op jouw website.

Er is dan ook de nodige discussie onder bloggers en online uitgevers over nut en noodzaak en verdienmodellen. Mocht je je in willen lezen, vind je onderaan dit artikel een aantal links.

Argumenten pro Facebook Instant articles

Het grote argument vóór instant articles is het gemak voor de gebruiker. Mensen bevinden zich binnen de Facebook app. Ze hebben steeds minder zin om uit die app te gaan naar jouw speciale mobiele app of te wachten tot je artikel geladen is in hun browser. Je maakt het ze dus gewoon gemakkelijk. Je blogartikelen laden vele malen sneller dan als ze vanuit je blog moeten worden geladen.

Dat je instant articles publiceert, wil bovendien niet zeggen dat je geen links naar landingspagina’s of andere calls to action kunt opnemen in je stuk. En het is wel degelijk mogelijk om ‘officiële’ advertenties op te nemen in de instant articles. Daartoe moet je je wel aansluiten bij Facebook’s advertentienetwerk. Op die mogelijkheid ga ik in dit artikel niet in, maar hier vind je een Engelstalige uitleg.

Het is ook mogelijk om alleen bepaalde subdomeinen te koppelen, zodat artikelen op het hoofddomein ‘gewoon’ naar je site blijven verwijzen. Zie hierover Facebook’s eigen uitleg (onder 2, subdomain).

Hoe werken Instant articles in de praktijk?

Als je Facebook Instant articles hebt geïnstalleerd en je plaatst een link naar je site op je Facebookpagina , opent die link voor gebruikers van de Facebook smartphone app als Instant Article binnen Facebook. Hetzelfde geldt als iemand anders een link plaatst op Facebook naar jouw artikel.

Facebook Instant articles werken zelfs als iemand (of jijzelf) de link naar je artikel van de website haalt en plaatst, via de desktop of de smart phone app. Als je website gekoppeld is en de artikelen zitten in de database opent je artikel als instant article. In onderstaand voorbeeld heb ik de link naar een artikel van een website gekopieerd en op Facebook gedeeld. Je ziet aan het bliksemschichtje dat het artikel toch als ‘instant article’ wordt getoond, ook al komt de link niet uit de Facebook app.

Stappenplan Facebook Instant Articles voor WordPress bloggers

Als je besluit om het er op te wagen, loop je tegen een aantal zaken aan. Het koppelen van je website of blog aan Facebook levert soms wat hoofdbrekens op, maar is te doen. In dit artikel heb ik de stappen vastgelegd die ik gevolgd heb om mijn eigen blog te koppelen aan Facebook Instant Articles.

Ik ga er van uit dat je:

1. Een Facebookaccount hebt;
2. al een facebookpagina hebt en
3. dat je een website hebt waarop dan 5 artikelen staan en die gemaakt is met WordPress.

Stap 1: Installeer de plugin

Je vindt de plugin net als alle andere plugins door via je dashboard naar Plugins te gaan, te kiezen voor de knop ‘Nieuwe plugin’ en in de plugin bibliotheek te zoeken op ‘Facebook instant articles’. Je zult een aantal plugins vinden, ik heb voor onderstaande gekozen:

Belangrijkste reden is dat hij gemaakt is door Automattic (het bedrijf dat WordPress maakt en beheert) en Facebook. Ik heb ook een andere plugin gebruikt, maar daar kwam ik niet echt uit. Deze plugin is niet heel gebruiksvriendelijk, maar doet wat hij moet doen: hij faciliteert de verbinding tussen jouw website en Facebook.

Als de plugin geïnstalleerd is, zoek je hem op in de lijst met plugins en klik je op ‘Instellingen’.

Stap 2: Maak je eigen Facebook app

Om de plugin te activeren, heb je je eigen ‘app’ nodig op Facebook. Je moet hiervoor als ‘developer’ geregistreerd staan. Alleen dan kun je instant articles publiceren.

Developer? Jij? Jazeker. Het klinkt ingewikkelder dan het is. Het komt er op neer dat je een stukje software nodig hebt is dat de verbinding maakt tussen Facebook en jouw website.

De plugin wijst je gedeeltelijk de weg. Volg de link in de plugin (onder ‘plugin activation’) om er een developersaccount of, als je die al hebt, naar je developerspagina te gaan en te kiezen voor ‘new app’. Let op de volgende stappen:

Kies in het eerste keuzescherm voor ‘www’:

Geef je app een herkenbare naam (ik kies hier voor ’test’):

Klik op ‘Create New Facebook App ID’.

Je krijgt het volgende scherm te zien:

Dit is geen test-app, dus houd de knop op ‘no’. Vul in je emailadres in bij ‘contact email’ en kies bij het veld daaronder voor ‘Apps for pages’:

Je krijgt een security check in beeld zodat Facebook zeker weet dat je geen robot bent. Kies de afbeeldingen die gaan over het onderwerp dat genoemd wordt. In onderstaand voorbeeld moet ik alle plaatjes aanklikken die een leeuw bevatten:

Je app is bijna klaar. Vul in het volgende scherm helemaal onderaan je website URL in:

Zet nu je app ‘live’. Dat doe je via ‘app review’, zet het knopje op ‘yes’:

Je hebt nu de app ID en de geheime code nodig. Die vind je door terug te gaan naar ‘My apps’ in de rechterbovenhoek en de app die je net gemaakt hebt te kiezen.

In het dashboard vind je de gegevens die je nodig hebt:

De ‘app secret’ krijg je te zien door op ‘Show’ te klikken.

Kopieer beide codes en vul ze in in de plugin op je WordPress-website. Als het goed is laat de plugin nu je facebookpagina of pagina’s zien (in het geval van meerdere pagina’s kies je de pagina waaraan je de artikelen wilt gaan koppelen).

Als het goed is gegaan, zie je het volgende (in dit geval met de gegevens voor mijn eigen Facebookpagina):

Stap 3: toevoegen van de Facebookcode (header script) aan je site

Klinkt technisch. Maar valt mee.

Ga naar je Facebookpagina en kies voor ‘Publishing tools’, bovenaan boven de header van je pagina.

Kies in het menu links voor ‘Instant articles’ en voor ‘Configuration’. Daarna ga je naar ‘Authorize your site’:

Kopieer de code die je te zien krijgt – het hele stuk, van <meta tot en met />, in de zwarte balk.

Deze HTML code, een ‘header script’, moet op je website in de HTML code van de header worden geplakt. WordPress biedt je meerdere handige manieren om die code in je broncode te plakken.

Methode 1: een header script toevoegen via je WordPress thema

Ik gebruik het ‘Genesis’ thema. In het menu van Genesis zit een speciaal stuk waar ik de code kan plakken, zie onder:

Het is de moeite waard om te kijken of in jouw WordPress-thema ook zo’n stuk zit met ‘Header and footer scripts’. Mijne zat bij ‘Theme settings’. Zo niet, kun je een plugin downloaden die dit stukje voor je regelt.

Methode 2: Header script toevoegen via een plugin

Ik heb o.a. de ‘Insert Headers and Footers’ plugin van WPBeginners geïnstalleerd. Je vindt hem door op ‘Nieuwe plugin’ te klikken en te zoeken op ‘Insert headers and footers’. Hij ziet er zo uit:

Methode 3 is het bewerken van de header.php file, maar als je geen ervaring hebt met coderen en HTML raad ik je dat af.

Stap 4: Check of het gelukt is om de code in je header op te nemen

Omdat de kans bestaat dat je verderop in dit proces foutmeldingen krijgt, wil je zeker weten dat het gelukt is om dat script in je code op te nemen. Je kunt gelukkig heel eenvoudig checken of de code inderdaad op je website staat.

Ga naar je website en klink met de rechtermuisknop op ‘View Page Source’. Ik gebruik de Chrome browser maar zo ver ik weet werkt dit trucje in alle browsers en voor alle websites. Ook die van je concurrenten, ja.

Je krijgt nu een beeldscherm vol html-code. Kies voor ‘Find’ in je menubalk.

Vul de zoekterm ‘fb:pages’ in – dat is een gedeelte van de code die je in de header hebt gestopt. Als het goed is, zie je nu op je scherm een stukje gemarkeerde tekst. Ik heb hem er twee keer instaan dus ik vermoed dat ik iets verkeerd heb gedaan. Maar het belangrijkste is dat het werkt. Check voor de zekerheid of de code overeenkomt met de code die je hebt gekopieerd vanuit Facebook.

Stap 5: Claim je URL en voeg een feed van je blog toe

Vervolgens ga je terug naar Facebook (>Publishing Tools > Configuration > Connect your site), je vult je website in, en klikt op ‘Claim URL’.

Toen ik dit deed, kreeg ik keer op keer een foutmelding. Gelukkig was die foutmelding de volgende dag weg en ging alles op groen toen ik nogmaals mijn sitenaam invulde en op ‘Claim URL’ klikte.

Net als bij veel andere diensten maakt Facebook gebruik van de feed van je blog, de dienst die een signaal geeft als er een nieuw artikel is gepubliceerd. Het feedadres dat je moet gebruiken bestaat uit je url plus een toevoeging:

http://eljadaae.nl/feed/instant-articles. Vervang ‘eljadaae.nl’ door je eigen domein. Zie de afbeelding hieronder.

Stap 6: Maak een opmaakprofiel aan

Facebook wil graag weten dat je artikelen er correct uit zien, als ze via Instant Articles worden gepubliceerd. Daarom kun je een ‘Style’ aanmaken, een soort van thema, waarin je aangeeft wat de kleuren moeten zijn, hoe links getoond moeten worden, etc.

Sterker nog: Facebook eist dat je een eigen style aanmaakt, wil je überhaupt mogen publiceren. Het is waarschijnlijk het beste om niet te veel aan te passen. En anders dan lettertypes en kleuren heb je ook niet echt veel keuze, eerlijk gezegd. (als iemand weet hoe je headers groter kunt maken, laat het even weten in de comments! Ik vind mijn headers te klein)

Als je eenmaal conceptartikelen hebt staan bij ‘production articles’ (zie verderop) kun je in de Facebook for pages app op je Facebook bekijken hoe die opmaakt er uitziet (zie ook verderop). Als blijkt dat de opmaak niet is wat je wilt, kun je bijvoorbeeld je koppen (header 1, 2) groter maken. Je vindt de ‘Styles’ onderaan, bij tools.

Ik heb wat kleuren aangepast (ik heb van mijn webdesigner ooit een style sheet gekregen met de kleurcodes):

Vergeet ook niet om een logo te uploaden. Zonder logo krijg je geen toegang tot de instant articles functionaliteit. Een logo dat je gebruikt moet:

• .PNG format zijn
• Minimaal 132 pixels hoog zijn en minimaal 690 pixels breed

Geen logo? Hier vind je een goede tip – maak gewoon een leeg logo aan met de juiste afmetingen.

Er gaan veel verhalen rond van uitgevers wiens ‘style’ niet voldoet aan de richtlijnen van Facebook. Maar daar gaan we ons op dit punt nog niet druk over maken…komt tijd, komt raad.

Stap 7: Download de Facebook for pages app

Facebook heeft een app voor op je smartphone, speciaal voor beheerders van Facebookpagina’s: de Facebook for pages app. Die heb je nodig om te zien hoe je artikelen er uit komen te zien als ze eenmaal gepubliceerd worden via Facebook Instant Articles. Je kunt hem hier vinden voor de iPhone.

Stap 8: Vul je ‘productielijn’ met artikelen

So far, so good. Als het goed, is verschijnen nieuwe artikelen die op je site gepubliceerd worden nadat de autorisatie is gelukt, nu bij ‘Production articles’. Hieronder zie je een screenshot van het artikel dat ik publiceerde op mijn blog nadat mijn site geverifieerd was. Het verscheen automatisch bij ‘Production articles’. Zoals je ziet is het nog niet gepubliceerd, want hiervoor moet een selectie van artikelen goed worden gekeurd door Facebook.

Facebook heeft minimaal 5 artikelen nodig om te kunnen beoordelen of je toegang krijgt tot Instant articles. Eerlijk gezegd liep ik hier tegen problemen aan. Ik kreeg alleen het laatste artikel dat ik publiceerde te zien. Je kunt net als ik wachten tot je 5 nieuwe artikelen gepubliceerd hebt. Maar dat duurt over het algemeen natuurlijk wel even.

 

Een goede tip om voldoende artikelen in de overzichtslijst bij ‘production articles’ te krijgen is de volgende (ik heb de tip uit dit artikel gepikt):

• Log in op WordPress
• Open een recent artikel
• Klik op ‘Bijwerken’
• NB: ik heb voor de zekerheid in al mijn artikelen iets gewijzigd, een punt of komma etc., en op ‘bijwerken’ geklikt.
• Bij mij leverde dit na enkele minuten al artikelen in mijn production feed op. Ik moest wel de hele pagina op Facebook verversen om ze te zien.

Stap 9: Check of de conceptartikelen goed getoond worden

Als er een artikel klaarstaat bij de ‘production articles’, moet je eerst kijken hoe het artikel getoond wordt. Eventueel kun je dan aanpassingen doen in de ‘style’ die je gekozen hebt bij de eerste stappen.

Om te zien hoe het artikel weergegeven wordt, ga je naar de app op je smart phone en zoek je het artikel op. Dat doe door de Instant articles op te zoeken. Ga naar de instellingen (stipjes) onderaan je scherm:

Kies voor ‘Expresartikelen’ (de Nederlandse vertaling van Facebook Instant articles?):

Hier zie je het overzicht van artikelen dat je ook ziet als je via de desktop naar ‘production articles’ gaat. Klik op een artikel om te kijken hoe je conceptartikelen er uit zien. In mijn geval was dat zo:

NB: bij het tweede artikel dat automatisch geïmporteerd werd vanuit mijn feed, ontbrak de inleiding. Dit bevestigt de waarschuwing dat je artikelen altijd even moet nakijken voor je ze publiceert. Ik heb het opgelost door in WordPress de html code te kopiëren en toe te voegen, zie volgende stap.

Stap 10: pas eventueel je artikelen aan zodat ze goed getoond worden

Misschien denk je bij stap 9: geen zin in. Dat had ik ook. Maar omdat ik niet goed gecheckt had hoe mijn artikelen er uitzagen, kreeg ik geen goedkeuring van mijn feed (zie stap 13). Ik kreeg de melding ‘Add text elements’ van het review team van Facebook Instant Articles. In mijn geval werden niet alle artikelen goed getoond. Bij een aantal artikelen verdween de eerste zin. Die ontbrekende tekst moest ik dus handmatig terugplaatsen. Als jouw probleem hetzelfde is als het mijne, kun je dat als volgt oplossen.

Ga via de desktop naar Production articles, kies het betreffende artikel en klik op het edit-icoontje:

Ga naar je blog, kies voor dashboard > all posts > kies voor het betreffende artikel. Klik op het de tekstversie van je artikel:

Hier vind je de code van je blog zoals die in HTML te zien is. Kopieer de ontbrekende stukken tekst.

Ga terug naar je artikel in Facebook instant articles in edit mode en plak de zojuist gekopieerde tekst er netjes tussen.

In mijn geval hoort er een witregel tussen de eerste tekst van het artikel en de rest. Ik voeg daarom in de HTML-code nog twee harde returns toe: <br> <br>.

Het kan zijn dat jij een andere foutmelding krijgt. Facebook geeft zelf in de developersdocumentatie de oplossingen voor een aantal veel voorkomende fouten.

Stap 11: Voorbereiden van het inzenden ter goedkeuring

Facebook wil graag 5 conceptartikelen zien voordat je goedgekeurd wordt. Je moet er dus 5 in je production articles hebben staan om goedkeuring aan te kunnen vragen. Je vindt hier de checklist:

1. Je moet minimaal 5 artikelen klaar hebben staan voor review
2. Artikelen moeten voldoen aan de guidelines (die negeren we maar even voor nu – als er problemen zijn, krijg je dat in het reviewproces te horen)
3. Je moet minimaal 1 nieuwe ‘style’ hebben aangemaakt, zie stap 6
4. Als je iets met analytics of advertenties wilt doen, moet je dat eerst in orde maken voor je verder gaat in het proces (ook deze step negeer ik)
5. De content van je instant articles mag niet korter zijn dan die van je website

Er wordt zoals gezegd veel gepraat over problemen bij het inzenden omdat artikelen niet voldoen aan de guidelines. Maar dat is een volgende stap.

Stap 12: zend je artikelen in voor review door Facebook

Als je 5 artikelen in de ‘production feed’ hebt staan die correct getoond worden, wordt de knop ‘Submit for review’ actief. Klik en hoop er het best van!

Bij mij duurde het ongeveer 3 werkdagen voor ik antwoord had.

Stap 13: repareer problemen

Veel mensen laten weten dat hun feed niet direct goed werd gekeurd. Helaas kan dat aan van alles liggen. Ik heb wel de indruk dat het voor WordPress-bloggers die de officiële plugin gebruiken, makkelijker is dan voor bloggers die zelf feeds moeten aanmaken.

In mijn geval kreeg ik na drie dagen kreeg ik de melding dat er problemen waren met met mijn artikelen.

Een gedeelte van de tekst van mijn blogartikelen op mijn site werd niet automatisch meegenomen in de artikelen op Facebook.

In stap 10 las je al hoe ik dit heb opgelost. Zo’n soort probleem kun je voorkomen door de stap onder Stap 9 serieus te nemen, maar zoals je begrijpt had ik dat niet echt gedaan.

Als je denkt de problemen opgelost te hebben, moet je je artikelen opnieuw ter review indienen via ‘Configuration’, step 2.

Stap 14: Je krijgt goedkeuring!

Yay! Je blog is gekoppeld met toestemming van Facebook. Laten we hopen dat het het allemaal waard is! De analytics zullen het uitwijzen.

Je moet nu nog 1 ding doen: op het knopje klikken om te zorgen dat al je nieuwe artikelen automatisch geïmporteerd worden:

Stap 15: finetunen

Onderaan ieder WordPress-bericht op je blog vind je nu informatie over de Facebook Instant Articles versie van je artikel. Je kunt daar ook technische informatie vinden. Klik op ‘Toggle debug information’ om de HTML-informatie te zien.

Next steps

Het is mogelijk om de resultaten van al deze moeite te meten, maar dat is iets voor een ander artikel. Je kunt bijvoorbeeld je Google Analytics account koppelen zodat je daar bij kunt houden hoe het verkeer naar de articles is. En of het resultaat zo bemoedigend is als Facebook hier beweert.

Facebook Instant Articles: artikelen en resources

Facebook Instant articles: doen of niet?

Zo publiceer je je werk met Instant articles

Facebook Instant Articles: een zegen of het paard van Troje?

Hoe maak je een Facebook app?

Set up Facebook Instant articles (Engels, met HTML-template)

Facebook Instant Article Troubleshooting guide Deze is van Facebook zelf. Voor veel voorkomende problemen, zoals missende logo’s, gebrek aan styling en missende alt-tags vind je hier de ‘easy’ (?!) oplossingen.