CODEWITHSUNDEEP
javascriptfacebook-like
jdepypere
jdepypere

Reputation: 3553

Facebook like button - Like page or image

I'm new to implementing social networking on my website. Now I'd like to implement a like-button for every image.

My page for an image is eg http://www.mysite.com/index.php?fx=photos&album=albumname&photoid=123. Now, this page has all the images of the album in the background. Onload, a fancybox get's opened with the image with the correct photoid.

Now for my questions - for the Facebook Like button you need a link. Should this link be the full site url as give above, or should it be the link to the image? (eg http://www.mysite.com/photos/photoid.jpg)?

I'm going to implement the iframe version for ease of use, I tried using the html5 version but couldn't get it updated when cycling through the images. In the iframe version however, you need to give the url as a GET parameter. If the answer to the previous version is you need to give the full url, how do I sanitize it using javascript? I know that using php rawurlencode should do the trick, but it needs to be done in js.

Now that I'm on it, is it necesarry to have the meta tags on your page with addidional info? Because of my fancybox image viewer, it would be quite a lot of work to edit the meta tags every time as well.

Upvotes: 0

Views: 783

Answers (1)

Laurence Moroney
Laurence Moroney

Reputation: 1263

To implement the Like Button, your index.php page should deliver the following JavaScript

<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/en_US/all.js#xfbml=1&appId=[[YOUR APP ID]]";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Then, every time you render a link to an image, you can render this code alongside:

<?php echo("<div class='fb-like' data-href='<IMAGE URL>' data-send='true' data-width='450' data-show-faces='false'></div>"); ?>

If the IMAGE URL is unique, you'll get unique likes for that image.

I shot this video a couple of years back about putting Facebook Like into a WordPress template page in PHP. Principles are similar, so hope this is helpful:

https://www.facebook.com/video/video.php?v=457944337233

Facebook stuff starts at 15:00

For the URL -- have you tried looking at: http://www.w3schools.com/jsref/jsref_encodeURI.asp -- this demonstrates a function that will allow you to encode a string as a URI.

Upvotes: 1

Related Questions