Faceboek "like" buttons op je eigen website zetten?

joker55 · 10 juli 2013

Ik heb een eigen website (mijn website heeft een commercieel karakter (ik verkoop diensten en produkten, heb een rijschool) heb ik mijn site-naam veranderd in "xxxxxxxx", normaal staat er wat anders, maar is ook niet van belang, denk ik.) en wil hierop graag de facebook like en verzend button toevoegen. De TWEET button ook, en die staat er inmiddels al op, dat is gelukt..Via google is er zat hierover te vinden, en ze verwijzen je allemaal naar deze site:

https://developers.facebook.com/docs/reference/plugins/like/

Ik vul dan ook keurig mijun website in het eerste vakje: www.xxxxxxxx.nl/index.html/

De opties eronder is niet van belang voor mijn vraag, en druk op "GET CODE"

Aangezien ik ook de send button erbij wil, ben je afhankelijk van de JavaScript SDK code.

Hij komt terug met het volgende:

De JavaScript SDK (plaatsen net na de <body> tag opening.)

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

en nog een stukje code op de plaats waar de button komt:

<div class="fb-like" data-href="http://www.XXXXXXXX.nl/index.html"
data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>

Ik bewerk de website met de HTML-kit, en via de preview wordt de pagina in een flits geladen.

Een stukje uit mijn "index.html" pagina nu ma het plakken van die JavaScript SDK code ziet er dan zo uit:

----------------------------------------------------------------------------------------------------

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="kader">
<div id="kop">xxxxxxxx</div>
<div id="menu">
<ul>
<li><a href="index.html"> Home</a></li>
<li><a href="nieuws.html"> Nieuws</a></li>

-----------------------------------------------------------------------------------------------------

en dat andere stukje code op de plaats waar ik de button wilt.

Nu via preview in de HTML-kit duurt het laden van de pagina wel 20-25 seconden, en daarna is de button niet te zien. Welo de tweet-button staat er mooi. Haal ik dat blauwe gedeelte weer weg, en de pagina wordt weer in een flits geladen.

Je kan ook een code opvragen voor een iframe, maar dan komt hij met een foutmelding, webpag niet gevonden. Wat ik ook probeer, de button krijg ik er niet op.

1. Wat doe ik fout?

2. is de button alleen te zien, NADAT ik alles upload naar de host? En dus niet off line op je eigen PC.

3. ik las ook ergens, je moet zelf ingelogt zijn op facebook, maar dat maakt geen verschil.

Iemand een idee??

:

10 juli 2013 aangepast door joker55

Puch · 10 juli 2013

Eigenlijk is het zeer eenvoudig.

Surf naar https://developers.facebook.com/docs/reference/plugins/like/

Vul daar je eigen url in en pas de opties aan naar eigen smaak

Klik op Get code

Als het popup venster verschijnt kies je bovenaan voor XFBML

Kopieer het eerste stuk code en plak het net na de body tag.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Kopieer het twee stuk code en vervang er de html tag mee.

<html> word dus  <html xmlns:fb="http://ogp.me/ns/fb#">

Het laatste stuk code plaats je waar jij wil dat de like button op je site word getoond.

<fb:like href="http://jou_url.nl" send="true" width="450" show_faces="true"></fb:like>

De volledige code zie er ongeveer zo uit (enkel blanco pagina met de like button)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like href="http://jou_url.nl" send="false" width="450" show_faces="true"></fb:like>
</body>
</html>

Succes

10 juli 2013 aangepast door Puch

joker55 · 13 juli 2013

Puch, bedankt voor je antwoord. Helaas krijg ik het nog niet werkend.

De stukjes code die je aandraagt, zijn ook dezelfde codes die ik in mijn eerste post noem.

Normaal worden mijn paginaas razendsnel geladen.

Als ik het eerste stukje code invoer (net na de body tag) duurt het laden van de pagina ruim 20 - 25 sec.

Dit plak ik dan net na de body tag:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ik heb ook dit toegevoegd: <html xmlns:fb="http://ogp.me/ns/fb#">

Je voorbeeld met blanke pagina heb ik compleet zo geladen in HTML-kit, en met preview komt er helemaal niets uit. Ik zie een leeg vlak, duurt wel 25 sec voordat de HTML-kit aangeeft dat de pagina geladen is. Ik snap er dus geen hout van. Wat gebeurt er, en wat gaat er fout???.

Puch · 14 juli 2013

Ik heb onderstaande code in een html pagina geplakt en ge-upload naar een server. Dit werkt perfect

KLIK

Het enige verschil met de blanco pagina code die ik eerder poste is dat sat4all als pagina to like staat.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
</head>

<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<fb:like href="http://www.sat4all.com" send="false" width="450" show_faces="true"></fb:like>
</body>
</html>

btw: je moet <html xmlns:fb="http://ogp.me/ns/fb#"> niet toevoegen, maar de bestaande html tag ermee vervangen.

Waarschijnlijk duurt het daarom zo lang om de pagina te laden. Er staan nl 2 html tags in je code.

En dan nog iets, de pagina moet wel degelijk online online staan. De pagina lokaal met je browser openen werkt niet.

Succes

14 juli 2013 aangepast door Puch

joker55 · 14 juli 2013

En dan nog iets, de pagina moet wel degelijk online online staan. De pagina lokaal met je browser openen werkt niet.

Dat was de gouden tip.......daarom werkte het niet. alles even ge-upload, en voila, werken!!!

Precies zoals ik het bedoelde!

Bedankt!

Puch · 15 juli 2013

Mooi dat het werkt

Hopelijk nu veel Likes

15 juli 2013 aangepast door Puch

joker55 · 15 juli 2013

Jawel: 'k heb er al 6

Alleen ik had wel geselecteerd show_faces="true"

maar de kleine fotootjes zie ik niet, maar goed. .

Puch · 16 juli 2013

Je zou enkel de "faces" zien van personen die op de knop hebben geklikt en je ook zelf als vriend op Facebook hebt.

16 juli 2013 aangepast door Puch

joker55 · 16 juli 2013

ja, dat klopt.......ik weet dat mijn kinderen "likes me" en ook gedrukt hebben.

Ze staan ook in mijn vriendenlijst op Facebook, maar ik zie geen icoontjes, faces dus.

Hoe "weet" facebook eigenlijk dat mijn website hoort bij mijn facebook pagina? De namen zijn compleet anders.

Moet ik ergens aangeven mijn facebook adres in het script?

joker55 · 16 juli 2013

Eureka !!!

Gevonden. De truuk is om niet als website in te vullen http://www.xxxxxxxxxx.nl/index.html,

maar http://www.xxxxxxxxxxxx.nl

Dus gewoon alleen de website, zonder de toevoeging /index.html.

Vraag me niet waarom, maar nu werkt het.......

Ik zie nu al 3 faces.......

BEDANKT !!!!

Sjattuh · 17 juli 2013

Eureka !!!

Gevonden. De truuk is om niet als website in te vullen http://www.xxxxxxxxxx.nl/index.html,

maar http://www.xxxxxxxxxxxx.nl

Dus gewoon alleen de website, zonder de toevoeging /index.html.

Vraag me niet waarom, maar nu werkt het.......

Ik zie nu al 3 faces.......

BEDANKT !!!!

Omdat het denk ik om de URL gaat die geliked moet worden en niet om de index pagina.

Puch · 18 juli 2013

Eureka !!!

Gevonden. De truuk is om niet als website in te vullen http://www.xxxxxxxxxx.nl/index.html,

maar http://www.xxxxxxxxxxxx.nl

Vandaar dat het inderdaad niet lukte, het gaat inderdaad om de url. btw: index.html of index.php moet je nooit in de url meegeven.

Deze worden door browsers automatisch gevonden.

Hoe "weet" facebook eigenlijk dat mijn website hoort bij mijn facebook pagina? De namen zijn compleet anders.

Moet ik ergens aangeven mijn facebook adres in het script?

Is allemaal javasript en jquery

In het gedeelte die je net na de body tag hebt geplakt staat een url naar een javascript die aangesproken word.

js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";

Daarin zit een gedeelte die gaat kijken of de Facebook cookie aanwezig.

Indien de cookie aanwezig gaan ze controleren als je wel degelijk bent ingelogd. Indien ingelogd, laden ze je vriendenlijst en vervolgens een controle of één van jou vrienden de pagina heeft geliked. Is dat zo geven ze die weer.

Om dit te controleren kan je even uitloggen op Facebook en daarna je website bekijken.

De vrienden worden niet weergegeven enkel het aantal personen die de pagina hebben geliked.

Als je op de knop klikt word er gevraagd om in te loggen op Facebook.

18 juli 2013 aangepast door Puch

joker55 · 18 juli 2013

duidelijk.....thanks.

ik geloof dat java en die cookies meer doen dan je allemaal in de gaten hebt.

Puch · 18 juli 2013

Javascript is gewoon een client side programmeertaal. Dat betekend dat alles eigenlijk op jou computer word uitgevoerd.

php en asp.net zijn dan weer server side programmeertalen.

Simpel uitgelegd, bij javascript stuurt men eerst alles door naar de browser en die verwerkt het.

Bij php en asp.net wordt alles eerste op de server uitgevoerd en word het dan naar je browser gestuurd.

Cookies doen helemaal iets verkeerd, het zijn gewoon handige dingen om website te bouwen en niet telkens dezelfde handelingen te moeten herhalen als een bezoeker op je website komt. Dingen zoals taalkeuze, login, enz,...

18 juli 2013 aangepast door Puch

Inloggen

Faceboek "like" buttons op je eigen website zetten?

Aanbevolen berichten

joker55

Puch

joker55

Puch

joker55

Puch

joker55

Puch

joker55

joker55

Sjattuh

Puch

joker55

Puch

Maak een account aan of log in om te reageren

Account aanmaken

Inloggen

Wie is er online 0 leden

Overig

Activiteit