Facebook 'like' op foto's

[Aloneal]

Hallo,

Ik heb een website met veel foto's op één html webpagina. Ik wil graag per foto een facebook 'like' optie integreren. Is dit te realiseren zonder voor iedere foto een afzonderlijke webpagina aan te maken? Zoja: hoe? Ik heb het al geprobeerd met # pagina links, maar dat lijkt niet te werken.

 

[Yuri4]

Je gebruikt ook CSS neem ik aan? Zet de foto en de likebox in een div bijvoorbeeld (op de like-box moet je niet letten, gewoon als voorbeeld):

<div class="afbmetlikebox">
   <img src="afbeelding.png" class="afb" /><br />
   <div class="likebox">Likebox</div>
</div>

.afbmetlikebox {
   width: 200px;
   padding: 5px;
   margin: 10px;
   border-style: outset;
   border-color: #403E3F;
   border-width: 5px;
}

.afb {
   width: 190px;
}

.likebox {
   background-color: #403E3F;
   position: relative;
   left: 128px;
   width: 52px;
   padding: 5px;
   color: #FFF;
}

 

[Aloneal]

Bedankt voor je antwoord Yuri. Het probleem is dat in de iframe code van facebook een url opgenomen moet zijn die dezelfde is als de url van de webpagina waarop deze iframe code word geplaatst. De afbeeldingen hebben uiteindelijk wel een andere url, maar in de afbeeldingen kan ik dus geen iframe code toepassen. En op de webpagina zelf kan alleen een werkende iframe code geplaatst worden met daarin dezelfde url als de webpagina (en dus niet de foto).

Misschien is wat ik wil helemaal niet mogelijk, maar ik had gehoopt dat mijn onkunde de mogelijkheden voor me verborgen hield.

 

[Yuri4]

Dit veranderd niet veel, ik weet niet of je dit bedoeld? (http://developers.facebook.com/docs/reference/plugins/like/)

<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 class="afbmetlikebox">
   <img src="afbeelding.png" class="afb" /><br />
   <div class="fb-like" data-href="http://www.jesite.nl/afbeelding.jpg" data-send="false" data-width="190" data-show-faces="true" data-font="arial"></div>
</div>

.afbmetlikebox {
   width: 220px;
   padding: 5px;
   margin: 10px;
   border-style: outset;
   border-color: #403E3F;
   border-width: 5px;
}

.afb {
   width: 210px;
}

Probeer het een keer in je site, ik heb het getest en het werkt. Je moet alleen nog de afbeelding aanpassen, ook in het stukje van facebook en verander alles zoals jij wilt.

P.S. Het boxje veranderd autmatisch aan de hoogte van de afbeelding he?!?

*edit* Nog een voorbeeld

 

[Yuri4]

Of bedoel je dit niet?

 

[Aloneal]

Hoi Yuri, ik heb het geprobeerd. Op mijn eigen website lijkt alles koek en ei met deze methode. Echter de likes en eventuele commentaren worden niet doorgestuurd naar facebook zelf. Is dit bij jou wel zo?