how to detect fan of a facebook page


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


tab-profile


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

UPDATE:

Facebook fixed the problem and now if a user is a fan of your page you’ll see fb_sig_is_fan = 1, so now you can avoid the <fb:visible-to-connection> solution and only just check the fb_sig_is_fan parameter to detect whether user is a fan of your page or not.

[fb_sig_is_fan] => 1

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!

mahmud ahsan

Computer programmer and hobbyist photographer from Bangladesh, lives in Malaysia. My [Business | Twitter | Linkedin | Instagram | Flickr | 500px]

You may also like

44 Comments

  • Savannah Brentnall
    September 4, 2009 at 1:42 am

    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.

    • mahmud ahsan
      mahmud ahsan
      September 4, 2009 at 3:47 pm

      yeah fb:else will not work. normal info is shown to all fan/non-fan users. πŸ˜€

  • Jim Zimmerman
    September 8, 2009 at 8:19 pm

    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.

  • Becky
    September 30, 2009 at 12:05 am

    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.

  • Gary B
    October 16, 2009 at 11:04 am

    figured it out

    for html savvy coders

    open div1.. style=position relative, background:white
    non fan content goes here
    
    fb:visible-to-connection tag open
    open div2.. style=position absolute, top:20px;left:0px; width:100%; background:white
    
    fan content goes here
    
    fb:visible-to-connection tag close
    close div2
    close div1
    
  • Jim Zimmerman
    October 18, 2009 at 11:28 am

    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. πŸ™‚

  • Sick
    October 28, 2009 at 10:43 am

    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.

  • dwi
    December 13, 2009 at 1:23 am

    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
    December 13, 2009 at 7:16 pm

    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

    • mahmud ahsan
      mahmud ahsan
      December 14, 2009 at 6:42 pm

      @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. πŸ™‚

  • dwi
    December 14, 2009 at 10:40 pm

    Hi mahmud its realy great you said that… stop me searching for nothing… much thanks.

  • Tim
    December 17, 2009 at 10:25 am

    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

  • Scorpion
    December 17, 2009 at 6:51 pm

    I was searching for last 3 days, today it worked with above.

    also wanted to thanks Gary B for HTML divs technique πŸ™‚

  • Glenn
    December 18, 2009 at 7:16 pm

    But does this work in IE? Can you share the code here. Cause I tried and it does not work

  • Glenn
    December 18, 2009 at 7:17 pm

    Can you share the code here. Cause I tried and it does not work. Also does this work in IE?

  • Glenn
    January 25, 2010 at 11:47 pm

    Here is a page that works on IE as well

    http://www.facebook.com/sears#/sears?v=app_10467688569

    How does one do it?

  • mahmud ahsan
    Mahmud Ahsan
    January 25, 2010 at 11:52 pm

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

  • Glenn
    January 26, 2010 at 12:22 am

    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

  • mahmud ahsan
    Mahmud Ahsan
    January 26, 2010 at 12:35 am

    @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>
    
    • Pankaj
      November 13, 2010 at 10:31 pm

      Hi @mahmud ahsan – I have Worked out for visible to connection comments and not visible to connection comments without having hide or including div tags :

      Content that needs to be displayed to fans
      Content, that would’t be displayed to fans but visitors

    • Pankaj
      November 13, 2010 at 10:34 pm

      Srry I don’t know how to use html tags, it just trimming the tags of my code , its a one more try of code –

      Content that needs to be displayed to fans
      Content, that would’t be displayed to fans but visitors

  • Glenn
    January 26, 2010 at 2:02 am

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

  • Carlos Duran
    February 10, 2010 at 6:47 am

    Thanks!!!!
    thanks,thanks,thanks,thanks,thanks,thanks,thanks,thanks!!!!!

    I pursuit it for weeks!!!!!!!!!!!!!!!

  • puneet
    February 22, 2010 at 7:06 am

    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″ />

  • puneet
    February 22, 2010 at 7:10 am

    <img src="http:///background_image.png” width=”750″ height=”455″ />

    <img src="http:///share.jpg” width=”750″ height=”455″ />

  • bhanu
    February 28, 2010 at 2:33 pm

    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

    • mahmud ahsan
      mahmud ahsan
      February 28, 2010 at 3:37 pm

      @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>
      
      
  • bhanu
    March 1, 2010 at 8:30 pm

    Thankyou so much Mahmud. It really works well.. Thanks..

  • Ramiro
    March 12, 2010 at 6:05 am

    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.

    • mahmud ahsan
      mahmud ahsan
      March 12, 2010 at 9:02 pm

      @Ramiro, I’m not sure how could it possible. And as I’m in vacation so I couldn’t try. Sorry for it.

  • Danyell Gouchie
    March 16, 2010 at 11:17 pm

    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

  • daddy design
    August 21, 2010 at 4:59 am

    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

  • daddy design
    August 21, 2010 at 5:01 am

    the code i placed in doesn’t seem to show on the last comment, it was “fb:else” function

  • Navien Amirtharaj
    August 30, 2010 at 5:02 pm

    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.

  • ccarrasco
    October 8, 2010 at 8:24 pm

    Hi mahmud ahsan
    i have a problem with :
    And this don’t work πŸ™ any idea?

    πŸ™

  • ccarrasco
    October 8, 2010 at 11:13 pm

    Hi,
    my problem is with visible – to – connection AND fb : comments both thing are not working πŸ™

  • Jangla
    November 1, 2010 at 9:54 pm

    Can I ask how we can achieve the same ability to show and hide content to fans/non-fans on a canvas application? I’ve tried to get FB.api({ method: ‘pages.isFan’…. to work with no luck.

  • Raheel
    December 24, 2010 at 6:22 pm

    can anyone tell or give example code me how can i get current user id of my fan page using GRAPH API?
    Please help me about this.
    Thanx in advance…

  • Hasin
    January 4, 2011 at 6:56 pm

    Mahmud, thanks for this nice trick. We’ve used it in MiproApps for fixing the recently introduced oAuth 2.0 for pages. this fb_sig_is_fan is now deprecated and we are using this trick by visible-to-connection

    thanks again. carry on

  • alxkid
    July 1, 2011 at 5:22 am

    This post seems to well explain the mechanism and give a nice solution :

    http://as-on-the-web.blogspot.com/2011/06/how-to-detect-facebook-fan-page.html

  • Joby Joseph
    January 26, 2012 at 9:49 am

    If you are dealing with facebook app tab page, following code help you to find isfan status

    $signed = parse_signed_request($_REQUEST[‘signed_request’], ‘YOUR-APP-SECRET’);
    if ($signed[‘page’][‘liked’] == 1) {
    $fan = true;
    } else {
    $fan = false;
    }

    Visit this link for demo and source code: http://bit.ly/zmaGgv

Comments are closed here.

About Me

Computer programmer and hobbyist photographer from Bangladesh, lives in Malaysia. My [Business | Twitter | Linkedin | Instagram | Flickr | 500px]

Flickr

Flickr Feed
Flickr Feed
Flickr Feed
Flickr Feed
Flickr Feed
Flickr Feed
Flickr Feed
Flickr Feed
Flickr Feed

Twitter Feed

Fanpage