Een Facebook Like Button op je website plaatsen

Woensdag 5 januari 2011 in: Social media / Support / Techniek / Tools
Auteur: 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.

Stap 1: Code ophalen

Bovenstaande afbeelding verschijnt op het scherm. Hier kun je direct alle benodigde instellingen doen. Het volgende is te configureren:

  1. 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)
  2. 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.
  3. 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.
  4. Width: De breedte in pixels van je like button.
  5. Verb to display: De tekst die bij de knop moet komen te staan.
  6. Font: Het font waarin bijbehorende tekst moet worden getoond.
  7. 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

1.  fe zei op 8 september 2011 18:06 uur het volgende:

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


2.  david zei op 13 september 2011 10:10 uur het volgende:

Beste,

Dat probleem heb ik ook, krijg dus geen code.

Hoe is dat te omzeilen?


3.  Rob zei op 13 september 2011 11:11 uur het volgende:

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.


4.  Rob zei op 13 september 2011 11:11 uur het volgende:

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.


5.  david zei op 13 september 2011 16:04 uur het volgende:

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


6.  fe zei op 13 september 2011 16:04 uur het volgende:

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


7.  Christa zei op 4 oktober 2011 13:01 uur het volgende:

Hoe krijg je een foto van het product op facebook als je op je website op de like button klikt?
gr


8.  Astrid zei op 7 oktober 2011 12:12 uur het volgende:

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


9.  Rob zei op 9 oktober 2011 14:02 uur het volgende:

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.


10.  Astrid zei op 9 oktober 2011 17:05 uur het volgende:

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


11.  Astrid zei op 9 oktober 2011 17:05 uur het volgende:

Heel vreemd, ik heb een heel verhaal getypt over deze like button, maar zie maar twee regels op de blog ervan staan.


12.  Astrid zei op 9 oktober 2011 17:05 uur het volgende:

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?


13.  Rob zei op 10 oktober 2011 10:10 uur het volgende:

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/


14.  gabriella zei op 13 oktober 2011 22:10 uur het volgende:

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!


15.  Rob zei op 17 oktober 2011 14:02 uur het volgende:

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!


16.  Serina zei op 17 oktober 2011 17:05 uur het volgende:

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?


17.  Rob zei op 19 oktober 2011 11:11 uur het volgende:

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.


18.  LiveEredivisie_ zei op 19 oktober 2011 20:08 uur het volgende:

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


19.  Rob zei op 20 oktober 2011 17:05 uur het volgende:

Het zou kunnen zijn dat WebKlik dit niet ondersteunt.


20.  Cat zei op 23 oktober 2011 15:03 uur het volgende:

is het ook mogelijk om een like-button aan een Facebook-groep te koppelen?


21.  Rob zei op 24 oktober 2011 11:11 uur het volgende:

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.


22.  Gerrit van Lohuizen zei op 26 oktober 2011 11:11 uur het volgende:

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)


23.  Rob zei op 26 oktober 2011 14:02 uur het volgende:

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?


24.  Recreatiewoning.nl zei op 3 november 2011 13:01 uur het volgende:

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


25.  NAZARETH zei op 29 november 2011 02:02 uur het volgende:

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


26.  Suzanne zei op 8 december 2011 14:02 uur het volgende:

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


27.  Karin zei op 9 december 2011 20:08 uur het volgende:

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


28.  maddie zei op 15 december 2011 16:04 uur het volgende:

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.


29.  marion zei op 20 december 2011 10:10 uur het volgende:

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.


30.  Timo zei op 8 januari 2012 22:10 uur het volgende:

Net zo makkelijk met de