Hoe plaats je een Facebook like box in de sidebar

Facebook like box

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

Abonneer je op mijn YouTube kanaal

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.

Facebook pagina

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.

Facebook like box instellingen

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.

Like box plugincode

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.

Facebook like box 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

  1. 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?

  2. 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?

  3. 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.

  4. 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?

  5. 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?

      1. 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.

  6. 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?

  7. 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?

    1. 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.

  8. 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

    1. 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 🙂

  9. 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.

    1. 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;
      }
  10. 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.

    1. 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.

  11. 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?

    1. 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.

  12. 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?

  13. 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?

    1. 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.

  14. 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.

  15. 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

  16. 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.

    1. 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.

  17. 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

    1. 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.

    1. 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!

  18. 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?

    1. 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.

  19. 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 🙁

  20. Hmm.. net WordPress geupdate en mijn fb-like button is verdwenen! Een andere widget geprobeerd en ook via Jetpack maar niets.. iemand enig idee..?

    1. 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.

  21. 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?

  22. 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

  23. 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

    1. 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.

    1. 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.

  24. 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

    1. 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.

  25. 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?

    1. 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?

  26. 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.

    1. 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.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *