Ga naar inhoud


Faceboek "like" buttons op je eigen website zetten?

joker55

Door joker55
in Off topic

 Delen
Ga naar oplossing Opgelost door Puch,

Aanbevolen berichten

joker55 Mentor

joker55

Geplaatst:
Geplaatst: (aangepast)

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:

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

<link rel="stylesheet" type="text/css" href="basis.css" />
</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>
<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??

 

 

:

aangepast door joker55

HUMAX iCord is vervangen door de VU+  4k SOLO,

 

Link naar reactie
Delen op andere sites

Puch Superster

Puch

Geplaatst:
Geplaatst: (aangepast)

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

aangepast door Puch

iMac 27" macOS Sierra
iPhone 5s iOS 10

Link naar reactie
Delen op andere sites
joker55 Mentor

joker55

Geplaatst:
  • Auteur
Geplaatst:

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???.

HUMAX iCord is vervangen door de VU+  4k SOLO,

 

Link naar reactie
Delen op andere sites
  • Oplossing
Puch Superster

Puch

Geplaatst:
  • Oplossing
Geplaatst: (aangepast)

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

aangepast door Puch

iMac 27" macOS Sierra
iPhone 5s iOS 10

Link naar reactie
Delen op andere sites
joker55 Mentor

joker55

Geplaatst:
  • Auteur
Geplaatst:

 

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!

HUMAX iCord is vervangen door de VU+  4k SOLO,

 

Link naar reactie
Delen op andere sites
joker55 Mentor

joker55

Geplaatst:
  • Auteur
Geplaatst:

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?

HUMAX iCord is vervangen door de VU+  4k SOLO,

 

Link naar reactie
Delen op andere sites
joker55 Mentor

joker55

Geplaatst:
  • Auteur
Geplaatst:

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 !!!!

HUMAX iCord is vervangen door de VU+  4k SOLO,

 

Link naar reactie
Delen op andere sites
Sjattuh Superster

Sjattuh

Geplaatst:
Geplaatst:

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.

Weet je wat erger is dan een worm in je appel?

Een halve worm in je appel...

Link naar reactie
Delen op andere sites
Puch Superster

Puch

Geplaatst:
Geplaatst: (aangepast)

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.

aangepast door Puch

iMac 27" macOS Sierra
iPhone 5s iOS 10

Link naar reactie
Delen op andere sites
Puch Superster

Puch

Geplaatst:
Geplaatst: (aangepast)

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,...

aangepast door Puch

iMac 27" macOS Sierra
iPhone 5s iOS 10

Link naar reactie
Delen op andere sites

Maak een account aan of log in om te reageren

Je moet een lid zijn om een reactie te kunnen achterlaten

Account aanmaken

Registreer voor een nieuwe account in onze community. Het is erg gemakkelijk!

Registreer een nieuwe account

Inloggen

Heb je reeds een account? Log hier in.

Nu inloggen
 Delen
Ga naar topic overzicht

  • Wie is er online   0 leden

    • Er zijn geen geregistreerde gebruikers deze pagina aan het bekijken
×
×
  • Nieuwe aanmaken...