Facebook Page Plugin box op je WordPress website plaatsen

De kans is groot dat je bekend bent met de Facebook like box die je al meerdere jaren op diverse websites ziet staan.

Wist je al dat deze like box gaat verdwijnen? 23 juni wordt de nieuwe Graph API uitgebracht en dan zal de traditionele Facebook like box stoppen met werken.

Gelukkig komt Facebook wel met een nieuw alternatief die op de Like box lijkt. Het alternatief is de Facebook Page Plugin.

Je kunt op dit moment nog even wachten met het plaatsen van de Facebook Page Plugin box, maar vergeet niet om de huidige like box te vervangen voor 23 juni 2015.

In dit artikel kun je lezen hoe je de Facebook Page Plugin op je WordPress website kunt plaatsen.

Wat doet de Facebook Page plugin?

De Page Plugin van Facebook doet eigenlijk precies hetzelfde als de vind ik leuk box. Het verschil is alleen dat het er iets anders uitziet en dat de afbeeldingen van mensen die je pagina leuk vinden wat kleiner zijn geworden.

De vernieuwde like box ziet er als volgt uit: (klik gerust op vind ik leuk of delen 🙂 )

Het valt je waarschijnlijk direct op dat de omslagfoto zichtbaar is. Het kan dus zeker lonen om hier even wat extra aandacht aan te besteden wanneer je de Facebook Page Plugin box op je website wilt weergeven.

Het valt je wellicht ook op dat er niet alleen een vind ik leuk knop staat, maar dat er nu ook een knop “delen” staat. Je fans hebben hierdoor niet alleen de mogelijkheid om je pagina leuk te vinden, maar ook om je pagina te delen op Facebook.

Verder heb je overigens ook nog de mogelijkheid om de laatste berichten van je Facebook pagina weer te geven.

Facebook Page plugin integreren in WordPress

Hieronder volgt een beschrijving met stappen die je kunt nemen om de Facebook Page Plugin op je WordPress website te krijgen. Ik ga er in onderstaande stappen vanuit dat je al een Facebook pagina hebt gemaakt. Heb je nog geen pagina, ga dan naar: facebook.com/pages/create

Stap 1: Wanneer je een Facebook pagina hebt kun je naar de Facebook developers Page Plugin pagina gaan om een Facebook Page Plugin box te maken. Je krijgt op deze pagina de volgende instellingen te zien:

Facebook Page Plugin instellingen

Stap 2: Bezoek je eigen Facebook pagina en kopieer de URL.

Facebook pagina

Je kunt de URL vervolgens bij Facebook Page URL invoeren. Je krijgt vanaf nu onder de instellingen de Page Plugin box van je eigen Facebook pagina te zien.

Stap 3: Bekijk even hoe breed (in pixels) je de vernieuwde Facebook like box wilt hebben op je website en vul dit in bij “width”. De minimale breedte die je kunt gebruiken is 280 pixels en de maximale breedte is 500 pixels. Bekijk na het invullen van de breedte ook even of de omslagfoto er nog goed uitziet.

Tip: Heb je geen idee hoe je moet achterhalen hoe breed een onderdeel van je website is? Je kunt een screenshot maken en het onderdeel van je website even uitknippen om te bekijken hoe breed dit onderdeel is in pixels.

Stap 4: Bij “Height” hoef je in principe niets te doen. Facebook zal automatisch de juiste hoogte gebruiken. Wanneer je berichten wilt weergeven die je op je Facebook pagina plaats, dan is het wel verstandig om een bepaalde hoogte in te stellen.

Stap 5: Zoals je zal zien heb je verder ook nog de mogelijkheid om de omslagfoto en profielfoto’s te verbergen en daarnaast ook om de berichten van je Facebook pagina in de Page Plugin box te laten weergeven.

Stel de Page Plugin in zoals je de box wilt laten weergeven op je website. Wanneer je ergens een vinkje zet of weghaalt kun je meteen de veranderingen zien in de Page Plugin box die je onder de instellingen kunt zien.

Stap 6: We komen nu bij de laatste stap terecht. Het enige wat je nog hoeft te doen is een stukje code op je website plaatsen. Klik op “Get Code”, kopieer de code en plaats de code op de juiste plek op je website.

Je zal twee verschillende codes zien staan. Het bovenste stuk is het JavaScript gedeelte en Facebook wilt het liefst dat je dit net onder de body tag plaatst. Wanneer je het op deze plek wilt plaatsen moet je in het header.php bestand van je thema zijn en opzoek gaan naar <body> om de code hieronder te plaatsen.

Je kunt vervolgens het andere stukje code kopiëren en plakken op de locatie (bijvoorbeeld in widget of artikel) waar je de Facebook Page Plugin box wilt tonen op je website.

Tip: Vergeet niet om eerst een back-up en child theme te maken van je thema voordat je iets in de bestanden aanpast.

Facebook Page Plugin in een widget

Wanneer je de thema bestanden niet wilt aanpassen heb je ook nog een andere mogelijkheid om de Page Plugin box op je website te krijgen. Het is namelijk niet noodzakelijk om de JavaScript code net onder de body tag te plaatsen. De Facebook Page Plugin werkt ook op je website wanneer je bijvoorbeeld beide codes op dezelfde plek plaatst.

Je kunt bijvoorbeeld beide codes onder elkaar in een WordPress widget plaatsen en vervolgens integreren in de sidebar of in een bericht of pagina met behulp van een plugin als amr shortcode any widget.

Deze methode werkt overigens niet goed wanneer je de code in een bericht of pagina plaatst, vandaar dat het integreren van een widget in een bericht of pagina een goede oplossing kan zijn.

Waarschijnlijk komt er na verloop van tijd ook nog wel een plugin waarmee je direct de Page Plugin box in een artikel kunt krijgen, maar op dit moment heb ik hier nog geen plugin voor kunnen vinden.

Hoe denk jij over de Facebook Page Plugin?

Ben je van mening dat de Facebook Page Plugin een goede vervanger is voor de originele Facebook Like Box? Laat het weten in de reacties hieronder.

Kom je ergens niet helemaal uit en werkt de Page Plugin niet op jouw website? Stel gerust hieronder je vraag.

39 reacties Voeg ook een reactie toe

  1. Hai Maikel,

    Ik had al maanden een lelijke like-box op mijn pagina die niet goed werkte. Ik kwam er maar niet achter hoe ik het kon verbeteren. Ik heb nu jouw beschrijving gevolgd en het staat er prima op. Dank je wel!

  2. Hoi Maikel,
    Al stoeiend ben ik word press aan het ontdekken en heb daarbij al vaak op info naar jouw site gekeken. Prima uitleg! Thanks!
    Ik wil nu graag een facebook like box volgens jouw bovenstaande uitleg toevoegen en ik kan alle stappen volgen, maar loop tegen1 probleem aan.
    Als ik mijn URL code invul geeft hij steeds aan dat het geen geldige URL code is. Ik kopier hem vanuit de brouwserbalk, dus een type fout staat er ook niet in.
    De URL die ik gebruik is:
    https://www.facebook.com/johan.ria.vanmiddelaar
    Kun je mij uitleggen waar het mis gaat?
    Dank alvast!
    groetjes, Ria

    • ps: het lukte me wel om code te krijgen als ik de configurator like button gebruikte. Die code heb ik in een widget gezet. Maar er komt niets tevoorschijn 😉
      Alleen merk ik nu dat er wel op de een of andere manier een lijntje is van mijn site naar facebook. als ik een nieuw bericht post komt hij nl ook direct op facebook te staan 🙂
      groetjes, Ria

  3. Hallo,

    Ik wil de page plugin in de sidebar zetten. Ik heb beide codes onder elkaar geplakt, maar ik zie alleen maar een wit vlak en de titel.. Hoe kan ik dit oplossen?

    • Dan is het niet helemaal goed gegaan, maar dat kan best aan Facebook liggen als ik het zo test.

      Als ik het nu test en voor de eerste keer op get code klik, dan zie ik bij de onderste code alleen “

      ” staan. Wanneer ik het weg klik en er nog een keer op klik krijg ik wel de volledige code te zien.

      Waarschijnlijk was dit bij jou ook het geval en zal het een kwestie van zijn om het even opnieuw te doen.

  4. Hallo Maikel,

    Complimenten voor de heldere uitleg. Ik had alleen een vraag over de breedte. Kun je aangeven hoe ik de ‘box’ groter dan 500px kan krijgen in de breedte? Voorheen stond de likebox over de breedte van de pagina op 1180px.

  5. Hoi Maikel

    Allereerst: mijn complimenten voor je stapsgewijze uitleg. Je bent de 1e waardoor ik het echt snap! Ik snap dus in principe wat de bedoeling is. Ik weet waar ik de 2e code moet plaatsen. Deze kan ik gewoon kopieren en plakken op de pagina waar ik wil. (bij het tekst gedeelte). Alleen die 1e code… Daar kom ik niet uit. Die plaats je op de header…? Ik weet dat de header het thema zelf is. Maar waar precies plaats ik dan die 1e code?

  6. Beste Maikel,
    Ook ik heb geprobeerd met de scroll triggered box de facebook likebox plugin werkend te krijgen. Ik krijg alleen een scroll triggered box met kruisje, maar geen fb-pagina. Ik heb de 2 codes gekopieerd in het tekst gedeelte van de plugin en ik heb getracht de eerste code te kopieren in de header php na . Echter bij mij staat er geen maar <body >. Ik heb het maar hierna geplaatst, maar werkt nog steeds niet. Kun je helpen?
    groet Yolanda

    • De box staat zo te zien ook al in de sidebar, dus de JavaScript code hoef je niet in het thema bestand te plaatsen omdat deze er al op een andere manier instaat.

      Je hoeft nu in principe alleen het onderste stukje code (vanaf

      • dank voor je snelle antwoord! Alleen volgens mij mist het meest belangrijke deel van jouw antwoord?! Nu weet ik nog niet waarom ik het niet voor elkaar krijg om een scroll triggered box te laten verschijnen met het tweede stukje code ;(

        • Je kunt de breedte (box width) gewoon aangeven dacht ik bij de instellingen van de box. Wanneer dit niet werkt zou je onderstaande code kunnen invoeren bij manual css:

          .stb {width:300px;}
  7. Beste Maikel, als ik de Facebook page plugin bekijk met mijn mobiel en ik klik op de naam van mijn Facebookpagina, dan wordt ik doorgelinkt naar Facebook, maar niet responsive. Kan dat aangepast worden? Groeten

  8. Hi Maikel, ik ben momenteel mijn website van Weebly naar WordPress aan het overzetten. De site is bijna klaar. Ik heb de Box via de plugin Scroll Triggered Boxes gemaakt, in de rechter benedenhoek komt de box dan steeds als pop-up in beeld. Echter zie ik bij de box een schuifbalk, wat ik graag weg wil hebben. Weet jij wat ik daarvoor moet doen? Op andere websites zie de box zonder schuifbalk verschijnen.

  9. Heb beide codes onder elkaar in de Tekst widget in de hoofdside bar gezet maar hij laat alleen de titel zien en verder niets.
    Wat doe ik verkeerd? Verkeerde widget gebruikt? Ben nog een beginner in wordpress

    • Je kunt hier inderdaad gewoon een tekst widget voor gebruiken en kunt dan beide codes erin zetten. Ik weet niet of je in de tussentijd nog iets hebt aangepast? Ik zie namelijk wel gewoon de Facebook Page plugin box op je website.

    • Volgens mij heb je het al opgelost. Ik zie in ieder geval de coverfoto wanneer ik de box op je website bekijk. De grijze box zag je wellicht omdat er “Hide Cover Photo” was aangevinkt en je daarna de code genereerde of misschien was er een klein foutje bij Facebook waardoor het tijdelijk niet zichtbaar was.

  10. Ik heb zojuist de nieuwe page plugin van facebook op mijn website aangepast.
    Helaas is nu de minimale breedte 280, en mijn widgetbar is ongeveer 260.

    Is het mogelijk om dit via een omweg te omzeilen?

    • Je kunt de page plugin wel smaller krijgen, maar het probleem is dan dat het wordt “afgeknipt”. De elementen versmallen niet verder dan 280px. Er is daardoor een stuk tekst niet zichtbaar en de deelknop is wordt ook half eraf geknipt als je het smaller wilt maken.

  11. Maikel

    Wat is de consequentie als je de JavaScript niet installeerd
    Ik heb de code in een widget geplaatst zonder de JavaScript in mijn body te plaatsen, maar hij lijkt het gewoon te doen

    • Juist door de JavaScript code werkt het of werkt het niet.

      Het kan zijn dat een plugin (of thema) waar je gebruik van maakt deze code al heeft toegevoegd aan je website. Het is dan niet nodig om nog een keer de JavaScript code te plaatsen om het werkend te krijgen.

  12. Hallo Maikel,
    Bedankt weer voor een leerzaam artikel. Ik ben altijd blij met je artikelen en leer er veel van.
    Ik heb de nieuwe likebox op mijn site gezet aan de hand van je handleiding en het is prima gelukt. Het enige waar ik tegenaan liep en wat verschilt met de oude mogelijkheden om de breedte van de likebox in te stellen is dat het minimum nu 280 is. Mijn oude likebox was 260 px breed en dat paste mooi in mijn sidebar. Nu steekt de likebox iets uit dus dat is minder mooi. Laten we hopen dat Facebook in de toekomst ook smallere likeboxes mogelijk maakt.

  13. Hallo, Dat child thema heb ik ook geprobeerd maar is niet zo leuk je website wordt niet 100 {32f65c9ada3faeb23e650eff87e781e3f4ba3bc800588e5965aad85b8f21f9f8} het zelfde weer gegeven dus heb ik het weer weg gedaan.

    • Met een child theme maak je gbruik van het desgin van het hoofdthema en dit ziet er dan dus ook hetzelfde uit.

      Het enige wat je wel moet doen als je een child theme maakt voor een bestaande website is alles even opnieuw instellen net zoals bij het hoofdthema.

Geef een reactie