How to Add the Facebook 'Like' Button for Images on my Website Image Gallery?

MrTIMarshall · 11-02-2012, 02:56 PM

Hello,

I have tried so many methods to try and implement the Facebook 'Like' button you see when you on a Fan Page's images on my websites image gallery to also show in the style you see whilst on Facebook and you hover over to see the buttons to 'Like', 'Comment' and 'Shared' amount.

I have tried using the direct image URL, the pages URL and whatnot with the normal 'Like' button you can find on the developers.facebook.com side of Facebook, however, whenever you click on the button, it does not update the 'likes' on the Fan Page and it also doesn't load with the current 'likes'.

I would be very grateful for some help or any advice and thank you in advanced!

Best Regards,
Tim

kevin619 · 11-23-2012, 04:51 AM

Go to Facebook help and find out a solution.

MrTIMarshall · 11-23-2012, 01:15 PM

I don't mean to appear to be rude, however do you not thing I have done so and if it was that easy, there wouldn't be almost 5,000 views and no advice so far.

jimutt · 11-23-2012, 10:19 PM

This solution has been working for others:

Code:

$('#likebutton').click(function(){
    $.ajax({
       type: 'POST',
       url: 'https://graph.facebook.com/OBJECT_ID/likes?method=POST&format=json&access_token=TOKEN,
       success: function(res) {
          // do something like style button
        }
    });
});

The reason why it doesn't work for you when you copy the URL it's because the actual "like" is sent by an AJAX request and it's not sent by just sending the user to a specific URL.

I got the code example from this StackOverflow question: http://stackoverflow.com/questions/5...facebook-photo

johnnyrand · 11-27-2012, 07:09 AM

Jimutt! The code you have provided here really works for me. I'm also having some problems with the facebook like button as well before. Thanks!

rameezzahid · 11-28-2012, 02:06 PM

You can use this code for face book like button.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<a target="_blank" href="http://www.facebook.com/dialog/feed?app_id=467220903300036&
link= your url
&picture= picture if you need
&name=title of your post
&description=drugstore.com offers Percentage off at Department Store. Save Up to 60% on Cuisinart Kitchen Cookware and Tools at Drugstore.com
&redirect_uri=http://www.test.com/"><img src="http://www.test.com/fbpage/fb_share_button.png"></a>
</body>
</html>