Friday, July 1, 2011

How to detect a FACEBOOK LIKE on a Fan Page

When having your own application or html page running in a Facebook fan page iframe, sometimes you need to display a page if the user is fan, and another if the user is not.


If in this iframe you are displaying your application, then it is possible to detect a fan ONLY if the user has already grant permission to your application. For that, many solutions can be found in JAVASCRIPT using Facebook Javascript SDK (For instance FB.init(), then FB.Login() etc...). I let you look on Google for that. However, the constraint would be for the user to accept the application, and we do not want this ugly step !


There is solution for that. But obviously this IS NOT POSSIBLE IN JAVASCRIPT ! 
So the SOLUTION IS ONLY SERVER SIDE. Since Javascript is only client side, I repeat : There is no solution in Javascript.


Here is an explanation of how to do it :
  1. When adding your own tab in a facebook fan page displaying an iframe, Facebook always POST a string data to the URL loaded in the iframe. And this string data contains the information we are looking for (like boolean). Since it is a POST request and not GET request, only the server can read the information.
  2. The string POST parameter is called "signed_request". This last one is composed of 2 values separated by a simple dot (.)
  3. On server side (with PHP, .NET, JAVA or whatever language you use), you just have to split the string and keep the second part. For information, both part are base64 encoded.
  4. Then, you just have to decode (Base64) the second part and get a nice string with the LIKE boolean included inside.
  5. And finally, display the page you want in fan page Iframe.
For instance :

  • This is a signed_request send by Facebook to the URL loaded in an fan page iframe 
signed_request=fp6hpPZzs7fbauzZAxnZzOydJybGZZd9yd9kVSt3sCc.eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImlzc3VlZF9hdCI6MTMwOTQ2ODAzMSwicGFnZSI6eyJpZCI6IjE5OTUzMTU4MzQwOTM2MSIsImxpa2VkIjp0cnVlLCJhZG1pbiI6dHJ1ZX0sInVzZXIiOnsiY291bnRyeSI6ImZyIiwibG9jYWxlIjoiZW5fVVMiLCJhZ2UiOnsibWluIjoyMX19fQ

  • Keep only the second part, after having split the string with dot separator:
eyJhbGdvcml0aG0iOiJITUFDLVNIQTI1NiIsImlzc3VlZF9hdCI6MTMwOTQ2ODAzMSwicGX0sInVzZXIiOnsiY291bnRyeSI6ImZyIiwibG9jYWxlIjoiZW5fVVMiLCJhZ2UiOnsibWluIjoyMX19fQFnZSI6eyJpZCI6IjE5OTUzMTU4MzQwOTM2MSIsImxpa2VkIjp0cnVlLCJhZG1pbiI6dHJ1Z
  • Now decode in base64 the string and you will get 
{"algorithm":"HMAC-SHA256","issued_at":1309468031,"page":{"id":"199531583409361","liked":true,"admin":true},"user":{"country":"fr","locale":"en_US","age":{"min":21}}



In fact, everything is well explained on Facebook Developers page. But since there are so many information to learn you may have not seen it so far :
http://developers.facebook.com/docs/authentication/signed_request/ 


Obviously, it exists APIs for PHP, .NET and maybe JAVA also. However, this is easy to implement, you may not need to struggle with a API to learn.
Anyway, here are some API links if you don't want to code it yourself :
PHP : 
C# SDK :