Let op! De Facebook like box zal vanaf 23 juni niet meer werken. Er is wel een vernieuwde versie van de like box, namelijk de Facebook Page Plugin box.
Je hebt een groeiend aantal bezoekers en wilt dat zij jouw website ook in de gaten houden via je Facebook pagina.
Een Facebook like box (zie afbeelding) in de sidebar is hier een goede mogelijkheid voor.
Een bijkomend voordeel is dat wanneer je veel Facebook likes hebt, dit een stukje sociaal bewijs is dat de mensen je website waarderen.
Je ziet in de Facebook like box allemaal gezicht van mensen die jouw pagina leuk vinden op Facebook. Is er een vriend van je bezoeker die de pagina leuk vindt? Dan zal je bezoeker deze vriend zien staan bij de lijst met gezichten.
Video uitleg: Facebook like box maken
Wanneer je meer informatie nodig hebt of liever de uitleg in tekst wilt lezen kun je hieronder verder lezen.
Plaats een Facebook like box in 8 stappen in je WordPress sidebar
1. Zorg ervoor dat je weet hoe breed de sidebar van je website is. Heb je geen idee hoe je dit moet doen, dan raad ik je aan om een screenshot te maken en deze is paint te plakken. Knip vervolgens je sidebar uit en bekijk de afmeting (in pixels).
Je kunt eventueel ook zomaar een nummer invullen in de Facebook Like box code totdat het er goed uitziet.
2. Bezoek de Facebook developers Like box pagina.
3. Bezoek je eigen Facebook pagina en kopieer de URL.
4. Stel de Like box in zoals je het wilt laten weergeven op je website. Je kunt met de instellingen spelen en direct eronder het resultaat van je gekozen instellingen bekijken.
5. Klik op “Get Code” en kies voor iFrame en kopieer de code. De reden hiervoor is dat je voor HTML5 en XFBML extra code moet implementeren om het werkend te krijgen, bij de iframe heb je maar 1 stukje code die je hoeft te gebruiken.
Het staat je uiteraard vrij om ook voor HTML5 en XFBML te kiezen als je hier de kennis voor hebt.
6. Ga naar je WordPress website en ga naar Weergave -> Widgets.
7. Kies een normale tekst widget en sleep deze naar je sidebar. Plak vervolgens de code in de widget.
8. Klik op Opslaan en bekijk je website om te kijken of alles goed is gelukt.
Je hebt nu een mooie Facebook like box in de sidebar van je website staan om meer likes te genereren en sociaal bewijs te leveren aan je bezoekers.
Loop je tegen een probleem aan of heb je nog een andere vraag? Laat het weten in de reacties. Ik zou het erg waarderen als jij hieronder op “vind ik leuk” klikt in mijn Facebook Like box als het je gelukt is.
89 reacties
Hi!
Ik heb de link gekopieerd van Iframe.
Dit heb ik in de widget tekst gezet. Ik krijg echter een melding: Heb je al gehoord dat we een “Eigen HTML”-widget hebben? Je kunt het vinden in de lijst met beschikbare widgets op dit scherm. Probeer het eens om eigen code toe te voegen aan je site.
Nu heb ik het zowel in tekst als in visual gezet.
Bij beide krijg ik geen mooie box te zien.
Wat moet ik anders doen?
Het is je al gelukt zo te zien.
Hallo,
Ik probeer een likebox te creëren via deze pagina: https://developers.facebook.com/docs/plugins/page-plugin
Nu heb ik mijn naam met een punt er tussen (https://www.facebook.com/voornaam.achternaam) als facebook URL. Klopt het dat ik hiermee geen likebox kan maken?
Een . hoeft niks uit te maken. Gaat het om een persoonlijke Facebookprofiel? Dan is dit het probleem. Een like box kun je alleen voor pagina’s maken.
Hoi,
Ik krijg de like box niet ingevoegd op mijn website. Ik heb de iframe code, alleen als ik ‘m in de widget plak zie je het niet.
Wat gaat er mis?
Dit is voor mij te weinig informatie om er antwoord op te kunnen geven.
Ik wil een groep toevoegen aan de facebook like box? krijg nl een foutmelding
error, not a valid facebook Page url
Het is alleen mogelijk om een Facebook pagina toe te voegen. Groepen en persoonlijke pagina’s werken niet.
Welke versie van WordPress gebruik jij?
Want als ik op de website zit, en aan de linkerkant bij de website naam m’n muis plaats, krijg ik alleen de opties: Dashboard/Thema’s/Menu’s.
Dus ik kan niet de optie ‘Aanpassen’ gebruiken, die jij gebruikt.
Dit is een oude video. Ondertussen heet het “Customizer” en staat het ernaast en niet meer bij die opties.
Ik heb een facebook page plugin geinstalleerd in mijn wordpress website. Deze is echter alleen te zien op de website als ik ingelogd sta bij facebook. Op welke manier ik ook de website aan facebook verbind – via de code of jetpack etc – als ik niet ingelogd sta krijg ik steeds een scherm te zien dat de url mogelijk verlopen is of dat ik niet tot de doelgroep behoor. Zodra ik ingelogd sta bij facebook zie ik alles wel weer. De facebookpagina waarmee ik wil verbinden is openbaar.
Heb jij een idee waar ik dit kan oplossen?
Ik zou toch maar even kijken hoe alles ingesteld staat op de pagina zelf. Wanneer je uitgelogd bent en de directe URL invoert kom je namelijk ook niet op de pagina uit en krijg je dezelfde melding.
Hoi! Superdank voor de stap voor stap uitleg. Mijn facebook likebox is maar voor de helft zichtbaar, hoe los ik dat op? Alvast dank! groetjes Judith
Tijdens het genereren van de code zal je de maximale breedte moeten aanpassen naar 235px. Hetzelfde geldt voor de hoogte, deze moet ook aangepast worden om alles in beeld te krijgen naar bijvoorbeeld 235px.
Mijn likebox is in de sidebar maar voor de helft te zien. Bij posts doet die wel normaal. Enig idee? 🙂 http://www.ditisderks.nl/
Het is je volgens mij ondertussen al gelukt om het op te lossen? 🙂
Ik heb dit wel werkend gekregen maar vreemd genoeg zie ik de video posts op facebook niet op de page plugin op website, klopt dat?
Klopt, video’s worden volgens mij niet weergegeven.
In internet explorer zie ik gewoon video op de plugin zoals in facebook. In firefox en chrome echter zie ik alleen de tekst en niet de video. Ga ik echter in firefox of chrome naar facebook dan zie ik de video wel.
Heeft iemand een idee hoe dit kan.
Kun je weinig aan doen. Ligt geheel aan Facebook in combinatie met de browsers, er zijn geen instellingen voor.
Ik heb dit zojuist geprobeerd, maar ik krijg van FaceBook bij “Get the code” niet de optie om te kiezen voor iFrame. Alleen de 1 en 2 codes. Deze heb ik geplakt in een tekst widget, maar dat werkt niet.
Hoe kan ik dat werkend krijgen?
Wanneer je beide codes plaatst in een tekst widget hoort dit gewoon te werken. Ik heb hier persoonlijk nog nooit problemen mee gehad.
De iframe mogelijkheid is inderdaad verdwenen sinds de like box de Facebook Page plugin is geworden.
Hoi Maikel,
ik heb de Facebook widget op de contact pagina. Deze werkt op zich goed, alleen is de kleur van de titel donker. Als ik op deze die sta, wordt de kleur wit. Hoe kan ik dit aanpassen dat de kleur altijd wit is?
Heeft niet zozeer met de Facebook box zelf te maken, maar het komt omdat de widget titel een link is. Je kunt het aanpassen met behulp van CSS.
Je zou de volgende code kunnen plaatsen in het style.css bestand van het thema waar je gebruik van maakt.
.enigma_sidebar_widget_title a { color: #ffffff; }Het is overigens wel verstandig om hier een child theme voor te maken, zodat de veranderingen bij een thema update niet verloren gaan.
Super, het werkt, dank je wel.
Geen dank, fijn dat het gelukt is.
ik krijg alleen maar de titel (volg ons op facebook) te zien en verder niets. De volgende widget begint direct hieronder. Wat doe ik fout?
Mijn code is:
Edit: Code weggehaald
Javascript code in de reacties plaatsen gaat niet zo goed dus kan niet precies zien wat je code is. Wel zie ik dat de box ondertussen gewoon zichtbaar is in de sidebar van je website, dus ik denk dat je het al hebt opgelost 🙂
Hi Maikel, ik heb de like box ook op mijn website staan waarbij de box als een pop-up rechtsonder in het scherm verschijnt. Echter heb ik nog te maken met een schuifbalk onder de box, omdat de box niet helemaal goed te zien is. Als ik de breedte/hoogte verander blijf ik de schuifbalk zien, weet jij hoe ik die schuifbalk wegkrijg?
Ik heb de box gemaakt met de plugin Scroll Triggered Boxes, waarbij ik code 1 in the header heb geplaatst (achter ) en code 2 in de tekst van een gemaakte box in de plugin.
Ik krijg niets te zien als ik je website bekijk dus kan het niet met 100% zekerheid zeggen, maar ik heb weleens gespeeld met de plugin waar je het over hebt.
Ik vermoed dat je de hoogte van de scrolbox moet moet aanpassen om de schuifbalk weg te krijgen. Je moet hiervoor een code als deze gebruiken (hoogte kun je aanpassen):
.stb { height: 300px; }Wat ik ook doe krijg ik alleen helaas de javascript en plugin info, ik zie geen html info??
Graag advies bvd Marga Dekkers
Ik weet niet wat je precies bedoelt met html info. Het is echter zo dat je nu beter kunt gaan voor de Facebook Page plugin omdat de like box over een maand stopt met werken. Zie de volgende link voor meer info: https://webtalisvip.nl/facebook-page-plugin-wordpress/
heb alles ingevuld, maar de nw webwinkel zegt code onjuist. van facebook.
krijg deze vermelding.
wat doe ik fout?
Het ziet ernaar uit dat je Facebook URL verkeerd is geconfigureerd. Gelieve je widgetinstellingen te controleren.
Wanneer je de foutmelding leest lijkt het erop dat de Facebook URL die je hebt ingevoerd niet goed is. Ik zou het dus nog een keer controleren en opnieuw doen.
Daarnaast is het wellicht handiger om nu al over te gaan naar de vernieuwde versie van de like box, namelijk de Facebook Page plugin. De like box stopt 23 juni 2015 met werken.
Bij mij is het helaas ook niet gelukt. Ik heb bij punt 5 niet de optie om te kiezen voor Iframe. Er staat alleen: Your Plugin code. Iframe staat er niet tussen.. hierdoor is deze ook niet zichtbaar. Wat moet ik doen om het wel voor elkaar te krijgen?
Klopt, de iframe optie is er niet meer en in principe is dit ook niet heel erg. Wat je kunt doen is gewoon de code kopiëren die je nu krijgt en deze plaatsen in een sidebar widget of op een andere locatie waar je de code wilt hebben.
Binnenkort zal ik een nieuw artikel maken voor de Facebook page plugin waar iedereen na 15 juni op over moet schakelen.
Deze oplossing stopt met werken op 15 juni 2015.
Je moet nu gebruik maken van een page plugin maar ik zie niet hoe je deze als code kan toevoegen in wordpress?
https://developers.facebook.com/docs/plugins/page-plugin
je kunt beide delen van de code die je krijgt in principe gewoon toevoegen in bijvoorbeeld een widget in WordPress en dan zal het werken.
Hoi Maikel,
Jij zegt kopieer de URL…deze URL mag zeker geen getal zijn? Jij hebthttps://www.facebook.com/webtalis?fref=ts
Is het zo dat een Page URL moet worden vast gelegd hiervoor moeten eerst tenminste 25 fans nodig zijn om dit te kunnen doen….
Hoe zit dit precies?
Het werkt ook gewoon wanneer je nog een URL hebt waarin een nummer staat.
Bedankt voor de handige film! Ik heb alle stappen gevolgd, maar helaas verschijnt er nog steeds een witvlak bij ons op de website i.p.v. de Facebook like box. Zou jij ons hiermee misschien kunnen helpen?
Wanneer ik in de code kijk staan er wat dingen die niet kloppen. Zo staat er twee keer 2.60 bij width (breedte) terwijl daar geen punt hoort te staan. Wanneer je hier gewoon 260 van maakt zal het probleem opgelost zijn.
Hoi Maikel,
ik ben er uit hoe het werk in ieder geval bedankt.
Goed om te horen dat het je gelukt is.
Hoi Maikel,
ik heb het geprobeerd om ook een fb like box aan te maken diverse malen geprobeerd het lukt
steeds niet alleen wit veld.
weet jij het hoe het werkt. Bedankt alvast.
Hoi Maikel,
Ik vind de like box best leuk en het plaatsen is ook gelukt. Maar ik vind die blokjes die jij bovenin in je rechter sidebar hebt staan ook erg leuk. Met welke plugin of widget kan ik deze plaatsen?
Alvast bedankt voor je antwoord.
Groet, Ellen
Dit is bij mij geen plugin omdat deze optie in het thema verwerkt zit. De maker heeft echter ook een plugin versie gemaakt, maar deze is wel betaald. De plugin heet Arqam en is te vinden op codecanyon.
Bedankt voor je antwoord. Ik ga gelijk even kijken 🙂
Hallo,
Ik heb geen box, maar gewoon een like en share button gedaan. Het is wel gelukt maar onder deze button blijft nu een stuk open, terwijl ik wel gewoon andere tekst eronder heb die eigenlijk gewoon meteen daaronder zou moeten aansluiten. Nu staan er dus een aantal witregels tussen de button en het volgende die ik graag weg zou willen krijgen.
Ik kan vanaf hier zonder een website te weten niet precies zien wat er fout staat. In de code staat als het goed iets over de hoogte (height) en daarachter een cijfer. Wellicht kun je dit verlagen om de witruimte te verminderen.
Maikel, super bedankt, het werkt nu! weer wat geleerd 🙂
Hallo,
hoe kan ik deze box-in op een willekeurige pagina plaatsen? Als ik de code in het tekstvak zet, zie je het op de website ook als tekst 🙁 , ipv als facebook-like-box
Wanneer je het in de visuele editor plaatst krijg je inderdaad alleen tekst te zien. Je moet de code in de tekst editor plaatsen.
Onder het vak waar je de titel kunt invullen staat rechtsboven “Wysiwyg” en “Tekst”. Je moet hier voor tekst kiezen en dan de code plaatsen.
Ik gebruik weliswaar Blogger, maar aan de FB-kant zie ik iets waar ik geen raad mee weet. Er staat: Initialize the JavaScript SDK using this app: -en dan een keuze-. Zie het screenshot hier http://files.overblijf-magazine.nl/bak/fb.png. De FB box werkt ook niet. Wat te doen?
Ik heb de rubriek, naam en adres van mijn FB-pagina veranderd. Het adres is nu: https://www.facebook.com/Overblijfmagazine. Het gevolg is dat ik bij Get Code nu niet meer krijg ‘Initialize the JavaScript SDK using this app’. Dat scheelt.
Er staat nu een like box van webtalis op mijn site die goed werkt (zie http://www.overblijf-magazine.nl/) maar als ik ‘webtalis’ verander in ‘Overblijfmagazine’ dan werkt het niet meer ….. FB is frustrerend!
Ik mail je zo even de code die ik krijg als ik een like box maak voor je pagina. Heb de code even getest en bij mij werkt het prima.
Kun je deze tool ook voor personen pagina’s van facebook krijgen?
Nee, dit werkt alleen voor Facebook-pagina’s. Voor pagina’s van personen is dit helaas niet mogelijk.
Hoi
Het is gelukt om de plugin te plaatsen op mijn website.
Mijn website is tevens geoptimaliseerd voor mobile devices alleen word hij daar niet getoond? Hoe kan dit?
Als je het via bovenstaande methode doet hoort het gewoon op smartphones e.d. te werken (methode in dit artikel is geen plugin). Ik kan er verder weinig over zeggen met deze informatie en zonder dat ik de website weet.
Zijn er ook opties die werken in een wordpress-pagina in plaats van in een sidebar?
En ik kan zelf al antwoord geven: het werkt ook op een pagina 🙂
Klopt, de code kun je eigenlijk overal op de website plaatsen.
Ik heb een leeg vlak. Hoe krijg ik de afbeeldingen te zien?
Volgens mij is het je ondertussen al gelukt. de Facebook like box ziet er gewoon goed uit als ik je website bekijk.
Hey Maikel,
Ik krijg in mijn like box gezichtjes dubbel. Of komt het omdat ik er nog maar weinig heb?
gr
Jan
http://presentationxl.com/presentationxl.com/blog/
Klopt, wanneer je nog weinig likes hebt kan het voorkomen dat er afbeeldingen dubbel staan.
Hey Maikel,
dat was nou eens een ongebruikelijk snel en werkend handleidinkje.
Thanks!
Jan
Hoi Maikel, mijn facebook vind ik leuk box was altijd precies groot genoeg, aangepast aan mijn lay out.. Nu is hij ineens te breed van de een op de andere dag en als ik breedte van 300 naar kleiner wil doen dan springt hij telkens terug op 300. Als ik je aanwijzingen opvolg en de code print van IFRAME en dan probeer te plakken in TEKST widget op facebook dan druk ik op opslaan en dan verdwijnt in een keer de tekst.. Hoop dat je me kunt helpen, baal er van want nu ziet het er niet zo mooi uit 🙁
Dit probleem is momenteel bij meer WP.com websites aanwezig, er zit blijkbaar ergens een fout. Zie ook: (http://en.forums.wordpress.com/topic/facebook-widget-width-not-conforming-to-sidebar-width?replies=17).
Als het goed is hoort dit nu weer opgelost te zijn.
Hmm.. net WordPress geupdate en mijn fb-like button is verdwenen! Een andere widget geprobeerd en ook via Jetpack maar niets.. iemand enig idee..?
In principe heeft een WordPress update geen enkele invloed op een facebook like button. Wellicht dat iets anders op je website voor een conflict zorgt (andere plugin). Verder valt er weinig over te zeggen met deze informatie.
Ik had het voor elkaar voor mijn bedrijfspagina op fb een likebox op wordpress. Maar u , een paar uur later is het een leeg vak, met alleen mijn prive profielfoto overschakelen naar geraldine…????
Hoe krijg ik het nu weer goed?
Ik denk dat je het zo te zien al hebt opgelost. Bij mij ziet het er gewoon goed uit op dit moment.
Hallo Maikel,
Als je naar de website gaat zie je in de rechter kolom “”Vind ons leuk” staan en dan eronder een witte leegte waar het wel zou moeten staan. Kan je herkennen waarom er niets verschijnt?
Groetjes
Jurgen
Ik denk dat je het al opgelost hebt. Als ik je website bekijk doet de like box het gewoon goed.
Hallo Maikel,
Ik heb alle stappen doorgelopen en het is gelukt om de likebox werkend te krijgen.
Bedankt voor je tips!
Hoi,
Ik heb alle stappen opgevolgd maar ik krijg geen IFRAME code te zien. Wel HTML5 code. Weet je wat is de rede daarvan? BVD Kerim
De reden ligt bij Facebook die zo te zien iets verkeerd hebben gedaan waardoor dit is ontstaan. Ik neem aan dat dit weer spoedig opgelost wordt.
De code staat er overigens wel degelijk, je kunt alleen de tekst niet zien. Wanneer je in het veld ctrl + a en daarna ctrl + c doet, dan heb je de code gewoon gekopieerd.
ik had donker gevraagd maar krijg transparant lijkt wel. hoe los ik dat op,
in de iframe code zie ik wel ergens dark staan.
Klopt, alle Facebook like boxen zijn transparant. De kleuren die je kiest gelden alleen voor de buttons.
De achtergrond kleur kun je aanpassen door in je ifame code te zoeken naar:
style=”border:none; overflow:hidden; width:300px; height:290px;”
en dit gedeelte te vervangen voor:
style=”background:#333;border:none; overflow:hidden; width:300px; height:290px;”
De kleurcode (#333) kun je eventueel nog aanpassen naar je eigen wensen. Dit is de achtergrondkleur die je op Facebook ziet. De rest van de code kun je hetzelfde houden.
Hallo!
Een vraagje:
ik heb een wordpress.com, weliswaar custom design, maar zonder plugins ed. Nu gebruik ik de facebook-likebox widget. Werkt eigenlijk prima, maar ik zou graag het aantal gezichten dat in de box getoond wordt willen beperken. Bijv max 10. Nu is het erg ‘vol’ en sommige gezichten staan er maar half op. Kan dit met mijn account? Ik heb het geprobeerd met een tekstwidget maar die codes pakt ie bij mij niet. alvast dank Karin
Je kunt niet instellen hoeveel gezichten er getoond worden, dit is puur afhankelijk van de breedte en hoogte van de like box.
Het enige wat je dus hoeft te doen is de hoogte (height) en/of breedte (width) aan te passen naar het gewenste resultaat.
Hoi, ik begrijp het niet vanaf ‘weergave –> widget’. Bij weergave zie je menu, thema’s en bewerker, geen widget. Moet ik een content widget kiezen? Maar die kun je niet slepen?? Ik begrijp het vanaf dan toe niet… zou je het kunnen uitleggen?
Weergave -> Widgets hoort gewoon te bestaan. is dit niet het geval dan kan dit door je thema komen of door een plugin. Wanneer je even omschakelt naar het standaard thema of alle plugins uitzet, heb je dan wel weergave -> Widgets?
De box wordt aan de rechterkant ‘afgekapt’, de breedte aanpassen wijzigt alleen de breedte van de tekst van bijvoorbeeld mijn Facebookposts. Dat betekent dat er staat: ‘Jij vindt dit le’, in plaats van ‘leuk’. Ik gebruik thema Vortex. Heb je hier een oplossing voor?
Groeten, Renate.
Dit zal met de CSS van je widget te maken hebben, hierdoor wordt de like box niet met de breedte weergegeven die je wilt hebben. Je zult dus de breedte van je widgets moeten aanpassen met CSS.
Ik weetniet hoeveel verstand je van CSS hebt, maar wanneer ik de website niet kan zien, kan ik hier moeilijk bij helpen.
Geprobeerd werkend te krijgen maar laat niets zien behalve leeg deel.
??
Dit komt omdat HSC Hierden op Facebook een “persoon” is die je als vriend kunt toevoegen. De Facebook like box werkt alleen voor Facebook pagina’s.