how to detect fan of a facebook page
Posted by mahmud ahsan on May 18, 2009 in
Facebook | 34 Comments
some days ago, i was facing a critical problem of facebook page. i was stuck for more than 2 days to get the solution. detecting facebook fan is very easy in application’s canvas page or application’s tab page in user’s profile. i’ve given a screenshot of tab profile in a facebook page.
problem:
user will add my app in facebook page’s tab. now i’ve to detect if viewer user is a fan of that page or not. if viewer user is a fan of that page then i’ll show some special info to him, but if he isn’t fan of that page then i’ll not show him the special info. this will inspire user to become a fan of a given page.
if you write
print_r($_REQUEST);
you’ll get info like this:
Array ( [fb_sig_in_canvas] => 1 [fb_sig_request_method] => GET [fb_sig_is_admin] => 0 [fb_sig_type] => LOCAL_BUSINESS [fb_sig_is_fan] => 0 [fb_sig_locale] => en_US [fb_sig_in_new_facebook] => 1 [fb_sig_time] => 1242633535.5921 [fb_sig_added] => 0 [fb_sig_page_id] => XXXXXXXXX [fb_sig_page_added] => 1 [fb_sig_profile_user] => XXXXXXXXX [fb_sig_profile_id] => XXXXXXXXX [fb_sig_in_profile_tab] => 1 [fb_sig_api_key] => XXXXXXXXX [fb_sig_app_id] => XXXXXXXXX [fb_sig] => XXXXXXXXX )
if you see the actual info you’ll find, though user logged in facebook, but you’ll not get his id anyhow in facebook page’s tab profile. or another thing you’ll notice fb_sig_is_fan is remain same ’0′ all time whether user is a fan or not
solution:
at last i got the solution and it is very easy, just write below code and place fan info (special info for fan) within fb:visible-to-connection tag. so now special info will only shown to the fan user of a facebook page
<fb:fbml version="1.1"> <fb:visible-to-connection> Welcome, fans! blah blah blah... </fb:visible-to-connection> </fb:fbml>
Some of my friends ask me to show a perfect example. So please follow the below comment and code. You can copy this code in static fbml app and test.
Check the following link to see real example: http://www.facebook.com/pages/Thinkdiffnet/314110374728?v=app_4949752878
Developers please keep in your mind If you’re admin of facebook page, you all time see the fan restricted item and non fan restricted item. So use this code as example and must check a non admin facebook user’s account
<div>
<div style="height: 800px;">
<!-- start non-fan part -->
<div class="top">
Become fan and see deepika
</div>
<!-- end non-fan part -->
<fb:fbml version="1.1">
<fb:visible-to-connection>
<div style="position: absolute; top:2px;left:0px; width:100%; background-color:white">
<img src="http://s245.photobucket.com/albums/gg59/sathishcoumar/actress/deepika_sex_pictures_picture.jpg" alt='deepika' />
</div>
</fb:visible-to-connection>
</div>
</div>
for more info visit: http://wiki.developers.facebook.com/index.php/Fb:visible-to-connection
Enjoy!
Related Posts
If you think this article kicked ass, subscribe to the RSS feed or follow me on Twitter! Share with your friends, or leave a comment below (or better still, do both!)Comments (34)
I understand how you can use this tag to display content that’s just for fans, but how do you display content that’s just for NON-fans? The visible-to-connection tag doesn’t seem to work with fb:if and fb:else.
Any thoughts? I’ve been struggling with this for days now.
yeah fb:else will not work. normal info is shown to all fan/non-fan users.
You can create a div with a class on it, then set that style to visibility: hidden in the visible-to-connection tag. My question is how do you test this when you are admin of the page without going live with publishing it and creating a test account? Since I am an admin of the page, I the visible-to-connection tag is always true even when I am not a fan.
Would this actually work? It says in the wiki page “Content inside this tag is rendered to all users’ browsers, including those who are not one of the specified users. For those who are not one of those users, the content is shown as white space on the page but it is still visible by viewing the page source.”
If I’m reading that right, the browser would still see the div tag and thus make the text you write hidden for even non-connections.
figured it out
for html savvy coders
That worked perfect! Thanks a ton! I was just getting around to this part of the app and you posted this on the same day I needed to get it to work. This would be good added to the facebook wiki or something. I wish there was better documentation.
I want asked how about if admin want to detect fan’s information like fan’s name, fan’s address, fan’s birthday and etc by using static FBML and put it as one of the tab box. Then the tab box will authenticate only admin can go to the tab box.
@Sick, using static fbml its not possible. You can check the API if you can get fans info: http://wiki.developers.facebook.com/index.php/API
I have a problem here.. user is a fan of my app on face book. but how do I detect my fan user id if its on canvas page.. ?
so I can redirect them if they are not a fan
thanks b4….
@dwi, please see this link http://wiki.developers.facebook.com/index.php/Pages.isFan using this php api method you can easily check whether user is a fan of a given page or not.
thanks for the help.. much appreciate it. it works..
And do you know how to show page tabs on my canvas page like this:
http://i394.photobucket.com/albums/pp23/mojok3d/page_tab_on_canvas_page.png
is there any way how? thanks again b4…
I’ve search the internet and di’dn’t found a clue till now
@dwi, there is no api or method to get those page tabs in canvas page. But there is a way you can do it. Using firebug select those tabs and copy paste the html + css into your canvas page, and it will work. 2 months ago I did for this type of problem.
Hi mahmud its realy great you said that… stop me searching for nothing… much thanks.
I’ve gotten the visible-to-connection code to work on safari and firefox using the method described above by Gary B. However, on IE the images are not changing for fan or not fan and they are severely shifted.
Can someone please help be with this?
The example is at:
http://www.facebook.com/pages/ColorPrintDirectcom/189692313203?v=app_4949752878
I was searching for last 3 days, today it worked with above.
also wanted to thanks Gary B for HTML divs technique
But does this work in IE? Can you share the code here. Cause I tried and it does not work
Can you share the code here. Cause I tried and it does not work. Also does this work in IE?
Here is a page that works on IE as well
http://www.facebook.com/sears#/sears?v=app_10467688569
How does one do it?
@Glenn, the first technique described by Gary B is working in IE also, you may need to little modify the code. But that techniques works for me in both IE,FF also.
But the problem here is that when one becomes a fan…..the non-fan content is also displayed.
I wanted it to work like the sears page.
I have tried to do it here. But it just does not work in IE. FF works nicely.
http://www.facebook.com/webwhispers?v=box_3
@Glenn, please use the following code and modify it for your purpose. I mention it from a working project. This code works in IE 8, FF3, Safari 3, Chrome.
<div> <div style="height: 800px;"> <!-- start non-fan part --> <div class="top"> ..... </div> <!-- end non-fan part --> <fb:fbml version="1.1"> <fb:visible-to-connection> <div style="position: absolute; top:20px;left:0px; width:100%; background-color:white"> </div> </fb:visible-to-connection> </div> </div>@Mahmud Ahsan, Super…it works with text. However with images it give me a prob in other browsers and works perfectly find in IE.
Anyways, the text bit should work for me. Thanks a ton.
Thanks!!!!
thanks,thanks,thanks,thanks,thanks,thanks,thanks,thanks!!!!!
I pursuit it for weeks!!!!!!!!!!!!!!!
hi,
this code is not working for me. it is showing me the both fan and non-fan text when i become a fan of a page.
also, i need to actually use images instead of text and running into the same issue with images where both images show up after i hit “become a fan” button”.
any help is appreciated….the code is as follows…
<img src="/background_image.png” width=”750″ height=”455″ />
<img src="/share.png” width=”750″ height=”455″ />
<img src="http:///background_image.png” width=”750″ height=”455″ />
<img src="http:///share.jpg” width=”750″ height=”455″ />
Hello everyone.
I am also facing similar problem. There are has been great resources already present here. and would request to share the code which works with images too.
@Mahmud Ahsan, @Puneet, @Glen. Great effort from your side. i have been struggling very much to crack this at my end. Hence request you all to help me a little on this part and if I can use it in my projects. I have been in Social Media for almost a year and half. I have tried learning through extensive research. Guys if you can help with this code. it would be a great help.
thanks again… … Bhanu
@Bhanu, we are now chatting each other. And I’ve shown you the way. Let me tell all other developers please keep in your mind If you’re admin of facebook page, you all time see the fan restricted item and non fan restricted item. So use this code as example and must check a non admin facebook user’s account
<div> <div style="height: 800px;"> <!-- start non-fan part --> <div class="top"> Become fan and see deepika </div> <!-- end non-fan part --> <fb:fbml version="1.1"> <fb:visible-to-connection> <div style="position: absolute; top:2px;left:0px; width:100%; background-color:white"> <img src="http://s245.photobucket.com/albums/gg59/sathishcoumar/actress/deepika_sex_pictures_picture.jpg" alt='deepika' /> </div> </fb:visible-to-connection> </div> </div>Thankyou so much Mahmud. It really works well.. Thanks..
Hi Mahmud, first of all tank you for providing this excellent example. I have an app and I was wondering how can I show a fan box to non fans using this code, I’ve tried several things but none worked. Thanks in advance.
@Ramiro, I’m not sure how could it possible. And as I’m in vacation so I couldn’t try. Sorry for it.
I came acrossthis looking for goth culture! This post probably has a cool consideration on google even if it wasn’t sadly the post I searched
does anyone know how to incorporate the function? I have been trying for a while now, it seems to work a lil but I can still see the non fans image on the fans page that is already a fan
the code i placed in doesn’t seem to show on the last comment, it was “fb:else” function
Hi,
Thank you for the sample. Its working fine for me..
I’ve another small requirement. Instead of tag i applied the invite friends [request-form]. While loading non-fan page content the invite friends widget also loading.
Could you please guide me to short out the issue.
Looking for your valuable suggestion.