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.fac

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.