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:
Stap 2: Bezoek je eigen Facebook pagina en kopieer de URL.
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.
49 reacties op “Facebook Page Plugin box op je WordPress website plaatsen”
Ik zie op deze pagina geen facebooklike-mogelijkheid van jou. Je zegt: zo ziet het eruit en een like is fijn, maar ik zie niks. En dat is op mijn eigen site ook zo. Ik zie alleen de juiste naam van mijn facebookpagina. Maar verder niks.
Enig idee wat er aan de hand kan zijn?
Het artikel is ondertussen zo’n 6.5 jaar geleden geüpdatet, dus er kunnen veranderingen zijn. Facebook geeft het blijkbaar allemaal net iets anders weer tegenwoordig en heeft er meer een volgknop van gemaakt ipv like knop.
Het gekke is, dat mijn vriendin de likebox wel ziet op jouw pagina, maar ik niet. Kan dat door een chrome-extensie komen? Kan een adblocker dat doen?
Adblockers kunnen inderdaad iframes blokkeren, wat de like box is. Je kunt het eenvoudig testen door de adblocker tijdelijk uit te schakelen en het te controlen.
Beste Maikel,
Als ik de facebook url van de zakenpagina kopieer in Facebook developers Page Plugin pagina krijg ik wel het logo te zien maar in het vak blijft een circeltje draaien alsof deze ergens naar op zoek is. Heeft u een idee waarom hij de berichten niet kan vinden?
Dank voor het meedenken.
Nick
Geen idee, daarvoor kun je beter bij Facebook zelf zijn.
Beste Maikel,
Sorry voor de dubbele vraag.
Het is inderdaad een account. Ik heb nu binnen het account een pagina gemaakt en het werkt.
Bedankt voor je tip.
Prettige jaarwisseling.
Nick
Alles opgevolgd volgens uw video.
Iframe code gekopieerd naar pagina in html vak.
Code werkt niet. Er staat een rood kruisje met de mededeling: named entity expected Got none.
Het facebookaccount heet: inbalansbijsil Sil
Help
Moeilijk te zeggen vanaf hier. Meer dan de code kopiëren en plakken is het niet. Je hebt het echter over een account. Deze functie werkt alleen voor facebook pagina’s en niet voor accounts met vrienden, wellicht dat het daaraan ligt.
Bij mij werkt hij helemaal niet! Onzichtbaar op mijn website zelfs met een WP plugin werkt hij niet….
Dat zal met de instellingen van je Facebookpagina te maken hebben. Uitgelogd is deze pagina ook niet te bekijken, dus waarschijnlijk heb je restricties ingesteld.
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!
Super om te horen. 🙂
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
Ben er al uit wat het laatste betreft. De plugin van Jetpack Publicize heb ik aanstaan. Dat zal het lijntje naar Facebook zijn 😉
Je kunt geen like box maken voor een persoonlijk Facebook profiel. Je hebt een Facebook pagina nodig, vandaar dat je die melding krijgt.
mmmm was al bang dat het hem daarin zou zitten 🙁
Dank voor je bevestigend antwoord.
Nu moet ik gaan bedenken of ik mijn persoonlijke facebook profiel wil gaan omzetten naar een facebook pagina.
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.
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.
De maximale breedte is 500 pixels, dus de box kan gewoon niet groter. Wanneer je het probeert breder te maken zal er ook niets veranderen omdat hier geen ondersteuning voor is.
Oooo het is gewoon gelukt! Ik hoef geen antwoord meer.
Fijn om te horen dat het je gelukt is 🙂
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?
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;}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
Nee, je kunt niets zorgen dat een Facebook responsive is omdat de normale website dit niet is.
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.
Ik had in dit artikel al geantwoord op je vraag, maar ik zal het nogmaals in het kort samenvatten.
Het ligt waarschijnlijk aan de Scroll Triggered Boxes plugin. Probeer de volgende code eens (hoogte kun je eventueel aanpassen):
.stb { height: 300px; }Ah oke, dacht ook al dat ik iets had geplaatst in een ander artikel, kon het alleen niet meer vinden haha.. Bedankt voor je antwoord, top, waar moet ik deze code plaatsen?
Ik weet niet of je in de plugin zelf custom css kunt plaatsen, anders kun je het daarin plaatsen. Anders moet het in het style.css bestand van je thema.
Nee dat kan helaas niet. Heb het in Theme Options in de Custom CSS geplaatst maar dan wordt de box wit en zie ik geen Facebook Like Box meer. Waar in de style.css zou ik het moeten plaatsen?
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.
Ik heb de widget op mijn website gezet en de box werkt prima, alleen zie ik de cover foto niet. In plaats daarvan is er een grijs vlak. Enig idee hoe dat kan?
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.
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.
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.
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.
Goed om te horen dat het je gelukt is. Het zou inderdaad handig zijn dat het ook iets smaller kan, zo zijn er genoeg thema’s met een sidebar van 250px breed.
Hallo, Dat child thema heb ik ook geprobeerd maar is niet zo leuk je website wordt niet 100 % 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.