How to "Like" facebook content externally

Question

So I have been playing around with the facebook like button but I have run into a problem. I have a facebook page about some charity work I'm doing here:

http://www.facebook.com/Adam.Holmes.Climbs.Kilimanjaro.

I also have a web page that has pretty much the same information on it. Within this web page I have a facebook like button so that users can like the page as seen here:

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

Now my issue is with a seperate button. Within the facebook page I have added images of which some users have "liked" and commented etc. I have now placed those same images on my web page where I would like to add a facebook like button for each image and hence displaying all the likes that the image has on facebook. I have plugged many different links into the like button but none of them seem to work. I have tried a) the url of the page. b) the url of the image. c) random bits and bats manipulating different url's.

I attempted to look through the javascript source code but it is much too complicated for my understanding. I know that a function fc_click() is called from the button which further calls another function, and not long after that I get lost, and have not found what url is used.

So I guess my question is, what is the url to be placed in the "like" script so that I can use the like button externally to facebook?

If anymore info is needed, please say so.

Thank you very much :)

---

UPDATE: I have been trying all different combination's or URL's and still having no luck. The object for one of the "Like" buttons is an object in the graph i.e. Here is the object I want to like. but none of these links are working. Maybe facebook are restricting this as it is simple to use the url of the page and it works fine, just not individual items.

May I add again that I need the link that is to be placed in the tag and not just to be able to retrieve a count of the likes and comments etc. I also started a topic on the facebook developer forums here but no-one has replied with a solution.

Thanks again.

---

UPDATE 2: As pointed out by "Myles Gray" the code is actually rendered in the HTML as:

<label onclick="this.form.like.click();">

I'm not sure if there is a way to access the form from an external page since is wouldn't have the correct this reference. Is anybody able to shed some light on whether this can be done, and if so, how? Surely if this can be done, having the correct reference to this would allow me to like content externally.

Trunnion

Are you using OpenGraph? – Bunton

No, I'm just using the <fb:like> tags. – Trunnion

As to your second update this is just the window object so if you can grab the relevant window object your fine. – Auramine

Would that not require that facebook be open every time something was liked? I've done a bit of googling, and I guess I'm not quite sure what you mean... – Trunnion

so you want the user when he likes the image (or the image page) on your website to actually like the same image that is on facebook? – Harrie

@ifaour, yeah that's exactly what I want... – Trunnion

Answer 1

I'm afraid what do you want is not possible. A quick "evidence":

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/platform" show_faces="true" width="450"></fb:like>

This would work just fine, but using its Graph API interpretation:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="https://graph.facebook.com/19292868552" show_faces="true" width="450"></fb:like>

This won't work!

I don't think you should bother searching for a "workaround/hack" or trying to inspect and debug the photo page on facebook, because EVEN if you did find a way to use their like functionality externally I'm pretty sure that would get you into legal issues with Facebook!

Now what I would do is, monitoring when the user "likes" a photo on your website and have a pop-up or a DIV under the LIKE button to encourage him to go the photo page in Facebook to support it (like it) there too!

This can be done by using the edge.create event:

FB.Event.subscribe('edge.create', function(response) {
  // Encourage the user to support your cause in Facebook too!
  $("div_with_a_link_to_the_photo_page_on_facebook").show();

  // or using a dialog or whatever effect you like
  $("#facebook_support").dialog();
});

P.S: I'm using jQuery here

Also to actually like facebook "objects" externally you need an application and something like my answer here, but I think you don't want to do that.

Harrie

Answer 2

I don't think getting a Facebook like button on a piece of content that's not a page is possible with <fb:like>. To test this out, I tried a couple things on a photo I posted on my own wall. As you figured out, none of the URLs work.

That said, you can build your own like button. With the Graph API, you can pull objects from your own feed with /me/feed. The easiest thing would probably be using images from the feed; if you hosted the image you'd need a mapping table back to objects on your feed. Each object from your feed will have a Like counter.

Update

Reread the post and it looks like you don't want the user to have to log in. The Graph API can be called from the server side. As you're accessing your own feed, you just need to give your app offline permissions to your own feed, and the current user won't have to log in.

Update 2

It appears /POST_ID/likes only works on posts - I get "app must be on whitelist" on anything else.

Gyatt

Answer 3

I'd like to point out that this is a very messy mash-up of ideas to go about this, and not a complete solution. I would advise to sit down and crack your head open on the Facebook Docs for a little while.

Please look here. As you can see, every object in facebook, is part of the Graph API. As such, it has it's own unique ID an properties. As per photos, you can look here and see that each photo has it's own unique id.

So-what you need to do, is call that specific photo from that specific album from that specific page each time your web page is loaded, and as such, you will be able to pull all the comments and likes this photo received on Facebook.

I'd say the best way to go about this is to initialize the JavaScript SDK, perform an FQL query on the specific picture you want, and get the data.

Now-as per displaying: Since facebook does not have a special plugin to show photos on external web pages, the display part is the tricky part. All the info is received in a JSON object, which you can display in any way you want. I would suggest, to make the experience more social, creating a like button for each photo with the id of that photo in the Graph API. Docs are here.

Patentee

I have no issues using the graph API, I understand that quite thoroughly. I am not retrieveing the image from facebook, it just happens to be the same image. Using the graph api would force the user to "Connect with facebook" which is not my aim here, I would just like the number of likes, as I can with any other "like" page on facebook. – Trunnion

@Adam-this is not true. Querying data about an image requires nothing from the user. – Patentee

But retrieving the number of likes, or indeed any data from the graph api does not tell me which link I need to place in my "<fb:like>" script. I have tried all the links that are available for the image and all of them have failed. – Trunnion

Answer 4

AFAIK Facebook uses an internal stat counter that is somehow linked to the photo.php with the photo ID and album ID...

If you look at the source code you can see (To like it):

<label onclick="this.form.like.click();"><i class="img sp_29yryj sx_182771" title="Like this item"></i></label>

And further along (To view the people who liked it):

<a href="/browse/?type=likes&amp;id=1516817795900" rel="dialog" ajaxify="/ajax/browser/dialog/?type=likes&amp;id=1516817795900" title="See people who like this item">16 people</a>

If you can somehow work out what the URL is based on the image id you should be sorted, TMK it seems FB are using some sort of custom library to like the image's ID.

Ehtelehud

It would seem that the <i class="img sp_29yryj sx_182771"... does not play any part in liking individual content as this has appeared in several other pictures in other pages I am also an admin of... – Trunnion

Answer 5

Using the like plugin:

    <div class="fb-like" data-href="**http://graph.facebook.com/[object_id]**" data-send="false" data-width="270" data-show-faces="false" data-colorscheme="dark" data-font="arial"></div> 

(just put in your own object id). My problem is that I can't figure out how to detect if the user has already liked the object without being logged into an app (not just logged into fb in general).

To do this your app requires extended_permissions eg in this case it needs read_stream permission. Once you have that you can query the like table with fql.

Erastian