Een Facebook Like Button op je website plaatsen
Woensdag 5 januari 2011 in: Social media / Support / Techniek / ToolsAuteur: Rob de Kort | 15621x gelezen
Alweer een paar maanden geleden schreef ik over het plaatsen van een Tweet button op je website. In vervolg hierop een artikel waarin ik uitleg hoe je een Facebook like button op je website kunt plaatsen.
Algemene instellingen
Om een Facebook Like button te plaatsen zul je eerst de benodigde code bij Facebook moeten ophalen. Dit kun je hier doen.

Bovenstaande afbeelding verschijnt op het scherm. Hier kun je direct alle benodigde instellingen doen. Het volgende is te configureren:
- URL to Like: De URL van de pagina die je wilt kunnen 'liken' op Facebook. In dit geval promoot ik onze Facebook fanpagina (facebook.com/kortsluiting)
- Layout Style: De layout van de box die je op je website wilt plaatsen. In de standaard layout heb je de mogelijkheid om ook foto's te plaatsen van de mensen die jouw pagina leuk vinden. In het voorbeeld heb ik hier voor gekozen.
- Show Faces: Of er ook profielafbeeldingen getoond moeten worden van mensen die jouw pagina leuk vinden. Je ziet alleen van je eigen vrienden die deze pagina leuk vinden. Je moet ook ingelogt zijn om foto's te kunnen zien.
- Width: De breedte in pixels van je like button.
- Verb to display: De tekst die bij de knop moet komen te staan.
- Font: Het font waarin bijbehorende tekst moet worden getoond.
- Color Scheme: Het kleurenthema van de like button.
Klik vervolgens op de knop Get Code en er opent een pop-up waarin je de code kunt kopieren (Windows: ctrl+c / Mac: cmd+c). Kies in de pop-up voor de iFramecode en niet voor de XBMFL-code. Deze laatste hebben we niet nodig.
De code plaatsen
Als je vervolgens inlogt op het Kortsluiting CMS en je bent een tekst aan het bewerken dan ga je met de cursor op de plek staan waar je tweet button wilt plaatsen. Klik je in de teksteditor op de knop 'HTML' en plak de code in het venster dat zich opent (Windows: ctrl+v / Mac: cmd+v). Klik op 'Bijwerken' en je button is geplaatst. Hier rechts zie je een voorbeeld van de tweet button die we zojuist gemaakt hebben. Klik er op om onze Facebookpagina te liken.
Terug naar weblog
30 reacties
Direct reageren
hi, het lukt me niet om de button te laten werken.
hij staat wel op de site maar als je erop klikt krijg ik 'n foutmelding :
"Je moet een URL opgeven voor deze widget of API" (heb ik nochtans gedaan).
Bij het opmaken van de "like button" krijg ik dit berichtje ook nog :
Only verified developers can be added as listed developers of this app.
Only verified developers can be added as listed developers of this application. Read http://www.facebook.com/help/?faq=17580 for details.
kan je me hiermee verderhelpen
Beste,
Dat probleem heb ik ook, krijg dus geen code.
Hoe is dat te omzeilen?
Beste Fe en David, Ik kan inderdaad bevestigen dat het op dit moment niet werkt. Ik kan er ook niets over vinden, maar het lijkt erop dat dit een bug is op de developerspagina van Facebook. Andere social plugins werken namelijk wel gewoon. Ik ga nog even op onderzoek uit. Als ik meer weet plaats ik het hier.
Ok! Het is geen bug, maar sinds kort moet je geregistreerd FB developer zijn om een like button te plaatsen. Log in op facebook en ga naar http://developers.facebook.com. Klik op 'Toepassingen' en voeg een nieuwe toepassing toe. Verzin een naam voor je toepassing en accepteer de voorwaarden van FB. Vervolgens moet je je account verifiren met credit card of mobiele telefoon (sms). Ik heb deze laatste optie gekozen en vervolgens kon ik de code van de like button ophalen.
Succes! Als het nog niet lukt hoor ik het graag.
Hey Rob,
Werkt perfect, merci voor het napluizen.
Moet hem nog wel ff in de site plakken maar dat zal wel goed komen.
Groet,
david
hi, erg bedankt voor de info, maar ik zit nu in de knoei met m'n account. Dus nog niet kunnen proberen, aangezien het bij david lukt, ben ik hoopvol.
Alvast tnx en ik laat nog iets weten
Hoe krijg je een foto van het product op facebook als je op je website op de like button klikt?
gr
Ik zou inderdaad ook graag willen weten hoe ik een productfoto erbij krijg wanneer iemand op mijn website op de like-button klikt.
Groeten, Astrid
Hoi Christa en Astrid. Ik geloof dat ik niet helemaal begrijp wat jullie willen bereiken. Hebben jullie toevallig een voorbeeld van een like-buton die werkt zoals jullie het willen? Dan zoek ik het even uit.
Hoi Rob,
Ik heb even de eerste beste site gepakt: http://www.samsung.com/nl/consumer/pc-peripherals-printer/notebook/high-performance/NP-RF711-S01NL/index.idx?pagetype=prd_detail
Heel vreemd, ik heb een heel verhaal getypt over deze like button, maar zie maar twee regels op de blog ervan staan.
Maar wanneer je bij deze laptop dus op like drukt, verschijnt er op je facebook pagina een afbeelding van de laptop mt info over het product. Terwijl bij een gewone like-knop (zoals boven omschreven)alleen de link wordt vernoemd op je facebook. Als het goed is kan je dit aanpassen door een open graph tag te gebruiken?
Deze knop is geen like button, dit is een share button. Met een like button haal je fans binnen voor je fanpage. Met een share button kun je content vanaf een website plaatsen op je eigen profiel. Zie hier voor meer info:
https://developers.facebook.com/docs/share/
Hoi Rob,
Hallo ik ben nogal een computernerd op het gebied van FB, ik wil graag een button plaatsen op mijn zakelijke facebook maken zodat klanten die makkelijk kunnen liken, ik heb gegoogled etc, maar kom er niet uit, heb jij een jip en janneke uitleg?
(een like button zoals bij coca cola)
Ik hoor het graag!
Hoi Gabriella, in principe is mijn bovenstaande blogpost een antwoord op je vraag. Makkelijker kan ik het in ieder geval niet uitleggen. Eventueel kan ik het in opdracht voor je uitvoeren, mail me dan op rob@http://kortsluiting.com. Voor nu: succes!
Hallo Rob,
Dank voor je blog, dit heeft mij al een eind op weg geholpen met een like-button plaatsen, maar helaas werkt het nog niet.
Ik heb mij geregistreerd als FB developer en hierdoor een AppID gekregen en deze in het script ingevuld (via de facebooksite waren er een paar verschillende mogelijkheden: HTML5, XFBML en IFrame), maar ik krijg helemaal geen button op mijn site. Bij de HTML5 en XFBML blijft de plek waar de button zou moeten komen blanco, bij de IFrame wordt een youtube-filmpje dat ik later op de pagina heb staan in het like-buttonvak geperst! Heel apart... Als ik het youtube-filmpje tijdelijk weg haal, blijft er ook met de IFrame een blanco veld over.
Heb jij nog ideen wat ik zou kunnen proberen?
Hoi Serina. Ik weet zo niet wat er mis gaat. Mail me anders even met wat links met voorbeelden waar het mis gaat. Wie weet kan ik je dan helpen.
Hoi,
Ik heb een website op http://www.webklik.nl. Als ik daar de code in plak dan komt er niets te staan?
Hoe kan dat wel?
Groeten
Het zou kunnen zijn dat WebKlik dit niet ondersteunt.
is het ook mogelijk om een like-button aan een Facebook-groep te koppelen?
Hoi Cat. Als het geen besloten groep is kun je ook de URL van de groep opgeven bij het genereren van de like button. Zodra iemand dit liked zal hij echter geen lid worden van deze groep.
Hey, ik heb een like button op mijn pagina geplaatst met succes, echter zie ik staan: 2 vrienden met plaatje die het liken en 7 anderen waarvan het plaatje niet zichtbaar is. hoe zit dat dan?
(show faces staan offcourse aan)
Hoi Gerrit, ik moet je bekennen dat ik dit niet weet. Als de likebox wordt weergegeven op je pagina heb je de code goed gembed. Je krijgt vervolgens de like box te zien of niet. Het kan denk ik te maken hebben met het volgende:
1) Je hebt CSS code die op de n of andere manier de lay-out van de box overruled.
2) Bug bij Facebook
3) Het kan zijn dat er sinds kort een privacy-instelling is waardoor de foto van deze facebookgebruikers wellicht niet getoond wordt.
Misschien kun je mensen met dezelfde ervaring vinden op het Facebook Developers forum?
Wij hebben op http://www.recreatiewoning.nl ter plaatse van de linkerzijde van onze homepage nu ook een social media katern waar u een "tweet" een "vind ik leuk" en een "+1" aan onze website kunt meegeven.
Zou u onze website kunnen beoordelen en als u deze leuk vindt promoten op n van deze manieren.
Bij voorbaat dank voor het beoordelen van http://Recreatiewoning.nl
Mijne heer ik wil graag voor onze instelling; een kerkelijke instelling een Facebook like button op onze website plaatsen. kunt mij daarmee helpen, of een tip geven hoe dat moet. verder ben ik een leek op het gebied van HTML, dus het moet voor gekauwd worden. mijn pers. E-mail is jpaal@http://upcmail.nl
Hoi,
Ik probeer de like buton toe te voegen op mijn zakelijke facebook pagina.
Het lukt me zoals boven de instructie staat, om een code te krijgen.
Maar dan staat er dat je ergens moet inloggen om die code in te voeren en zo de like button te krijgen. Maar waar moet ik inloggen? Ik weet de verdere stap even niet.
Alvast bedankt.
Groet Suzanne
Rob,
Ik heb de vorige reactie bekeken. Op mijn website heb ik bij ieder product een like button geplaatst. Inderdaad wel met foto. Nu komt er op facebook echter de verkeerde foto in beeld. Hoe kan dat?
Karin
Ik heb hetzelfde als Suzanne (26) weet eindelijk de code te krijgen, die kopieer ik dan maar dan!!!!!!!! ik kom er niet uit.
Hoop op antwoord.
ik heb de faceboek I LIKe knop op mijn website gezet.
als men deze indrukt werkt het wel op de website, maar je ziet het niet op de facebookpagina van de personen die de knop hebben ingedrukt.
Meest gelezen
Meeste reacties
Categorieën
- Design (1)
- Hosting (1)
- Kortsluiting (1)
- SEO (2)
- Social media (3)
- Support (5)
- Techniek (6)
- Tools (4)
- Web 2.0 (2)

