How to "Like" facebook content externally

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开发者_如何学JAVA 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.

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.

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.

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.

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.

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.