Tutorial: de nieuwe Facebook like box

Vanaf 23 juni werkt je Facebook like box niet meer! Facebook heeft een nieuwe manier bedacht om de like box vorm te geven, maar je moet dit wel zelf aanpassen voor je pagina. In dit blog leg ik uit hoe je in minder dan een half uur een nieuwe Facebook like box kan maken voor je WordPress-website.

1. Je box opmeten

Om de nieuwe like box te maken moet je weten hoe breed je box moet zijn. Deze breedte wordt gemeten in pixels. Je kan het aantal pixels op verschillende manieren meten. Ik gebruik zelf de Chrome-extensie Page Ruler, dit is een soort lineaal voor op je beeldscherm.

Page ruler extensieJe kan de extensie hier downloaden, kies voor de blauwe button ‘toev. aan Chrome’, klik nog een keer op ‘toevoegen’ en je zal zien dat de lineaal rechtsboven in je browser verschijnt, naast de adresbalk. Ga naar je website, klik op het lineaal-icoontje en je kan een vierkant trekken om je like box om deze op te meten. De waarden die je nodig hebt zijn ‘width’ en ‘height’.

Als je geen Chrome gebruikt kan je de website Piliapp gebruiken. Tik de url van je website in, in het vakje waar http://edition.cnn.com/ staat. Haal het vinkje bij ‘auto’ weg, en meet je like box op door er een vierkantje omheen te trekken.

2. Het adres van je Facebookpagina opzoeken

Behalve de afmetingen heb je de URL van je Facebookpagina nodig.  Ga hiervoor in je browser naar je Facebook-pagina. In de adresbalk zie je nu: https://www.facebook.com/evelieneet?_rdr, of iets wat daarop lijkt. Selecteer de tekst vanaf het begin, tot aan het vraagteken. Dus in mijn geval: https://www.facebook.com/evelieneet. Dit is de URL van je Facebookpagina.

3. Je nieuwe Facebook like box maken

Nu heb je alle gegevens die je nodig hebt om je nieuwe Facebook like box te maken. Ga naar de website die Facebook hiervoor heeft gemaakt: https://developers.facebook.com/docs/plugins/page-plugin. Hier vul je de afmetingen in die je nodig hebt, en de URL van je Facebookpagina. Je kan nu uit een aantal opties kiezen:

1. Adapt to container width, deze kan je gewoon aangevinkt laten.

2. Show friend’s faces: hiermee kan een bezoeker van je website zien welke van zijn vrienden je pagina leuk vinden. Bijvoorbeeld: je moeder bezoekt je pagina, en ziet dat je broer je pagina al geliket heeft. Ik zou deze optie zeker aanraden.

3. Use small header: je kan kiezen uit een grote of kleine header. Het verschil met de grote header is dat er in de grote header nog een ‘share’-knop zit, waarmee iemand je Facebookpagina met zijn vrienden kan delen.

Ik gebruik zelf de kleine versie, en ik denk dat dat voor de meeste websites het beste is. Je houdt zo ruimte op je website over voor dingen die belangrijker zijn. In mijn geval: ik heb een Facebookpagina voor mijn blog Evelien Eet, en ik verwacht niet dat bezoekers van mijn website zó enthousiast over mijn blog zijn dat ze de ‘share’-button gebruiken om hun vrienden over mijn blog te vertellen. En als ze wel super enthousiast zijn, dan kunnen ze de share-knop ook op mijn Facebookpagina vinden.

4. Hide cover foto: je kan je coverfoto laten zien of weghalen. Klik op het vinkje om te zien hoe beide opties eruit zien. Ik heb voor mijn like box de coverfoto verborgen, zo is de like-box een stuk duidelijker en rustiger.

5. Show page posts: je kan in je like box de meest recente posts laten zien op je Facebookpagina. Of je hiervoor kiest hangt verschillende dingen af: je moet zeker weten dat je de komende tijd regelmatig updates op je Facebookpagina post. Weet je dat niet 100% zeker, vink dan deze optie uit, om te voorkomen dat bezoekers een slechte indruk krijgen. Verder ligt het eraan hoe veel ruimte je voor je Facebook like box hebt gemaakt op je website. Heb je ruimte genoeg, en is Facebook belangrijk voor je bedrijf of blog, dan zou ik zeker de recenste posts laten zien.

Je hoeft je Facebook like box natuurlijk niet precies even groot te maken als je oude like box. Experimenteer met de afmetingen om te zien hoe groot je je nieuwe like box wil maken.

4. Je nieuwe Facebook like box plaatsen

Om de box te plaatsen klik je op de button ‘get code’, onder het voorbeeld van je like box. Kopieer de code uit het tweede vakje, deze begint met <div class=. Ga in een ander tabblad naar het dashboard van je WordPress-website, en ga in het rechter menu naar Weergave/Widgets (of Appearance/Widgets). Maak een nieuwe widget van het type ‘text’. Je kan kiezen of je je widget een titel wil geven. Ik heb dit vak zelf leeg gelaten, volgens mij is het heel duidelijk dat deze like box over Facebook gaat, dus waarom dat er dan nog boven zetten?

Plak nu de code in de widget, en ga terug naar het tabblad met de Facebook-code. Selecteer de eerste code, deze begint met <div id=. Deze code plak je onder de code die je net in je WordPress-widget hebt geplakt. Ik heb onder het eerste blokje twee keer op enter gedrukt, zodat er een witregel tussen de twee stukjes code staat. Klik op de knop ‘save’ of ‘opslaan’, en ga in een ander tabblad naar je website om je nieuwe like box te bewonderen! Vergeet niet je oude like box weg te halen 😉

Als je er niet uitkomt met deze handleiding mag je me altijd mailen, of stuur een berichtje via de chat! 

Geef een reactie