02 May 2011

Facebook Secret Hide Content on Fan Page Until Someone Likes It

Facebook, Most Popular Videos, Video Gallery 50 Comments

Hiding content on your Facebook welcome page can be a great incentive for people to like your page to get the hidden content. Since Facebook depreciated FBML we now have to use iFrames. This is pushing it further into the realms of developers rather than end users.
SEE LIVE EXAMPLE

How To Do It?

An iFrame only points to an html or other web-based file, it doesn’t actually do anything else. Hence the file you are pointing to is not contained on Facebook and can not directly access certain information. This means we must use either JavaScript or a server-based language such as PHP or .NET to communicate with Facebook as would an external page.

Since JavaScript and other methods require actual permissions from the user to see this information the only way I have found to do it, is to look in the “session” so to speak.

Step 1 – Create A PHP file and create the iFrame

If you don’t have an iFrame and php file already look at: How To Add An iFrame Application Tab To Your Facebook Page. This will take you through adding an iFrame application tab to your Facebook page.

However replace the .html file with a .php file. Only the extension of the file name needs to change and not anything else within the example.

Step 2 – Insert Code into PHP file

Next you need to add this in the part of your PHP file you want to display a different message for non fans and fans.

$request = $_REQUEST["signed_request"];
list($encoded_sig, $load) = explode('.', $request, 2);
$fbData = json_decode(base64_decode(strtr($load, '-_', '+/')), true);
if (!empty($fbData["page"]["liked"]))
{ ?>

You are a fan – insert html here

You are not a fan – insert html here

Step 2 – Testing

To properly test your code:

- Go to your Fan Page and click the Unlike Button in the bottom left hand side of your page.
– You should now see the “Like” button at the top, meaning that you’re not yet a fan
– You should see the content of Non-Fan
– Click the “Like” button; you should then see the fans-only content and the non-fan content will go away

That’s It!

Jarrett Gucci is the owner of Dynasty Web Solutions. A full service Internet presence provider specializing in WordPress development for business owners. Jarrett Gucci along with his team of professionals have designed over 400 WordPress websites. Jarrett Gucci believes strongly in creating websites that are unique, functional and generate referrals.

Facebook Twitter LinkedIn Google+ YouTube 

Did you enjoy this article?
"Subscribe & Get my Top 100 MUST HAVE WordPress Plugins E-book Download"
Subscribe to our Blog and get an instant download to the Top 100 MUST HAVE WordPress Plugins E-book Download complete with secret Plugins revealed.



50 Responses to “Facebook Secret Hide Content on Fan Page Until Someone Likes It”

  1. eternal life detox tea says:

    Heey there! I know this is somewhat off topic but I was wondering which blog platform are you using for
    this site? I’m getting tired of WordPress because I’ve hhad issues witrh
    hackers and I’m looking at options for another platform.
    I would be awesome if you could point me in the direction of a good platform.

  2. Jaryd says:

    Hi,

    Can you make a Facebook Business Page private using this method? And where exactly do you put the code into on FB? If you could email me that would be very helpful.
    Thanks

    Jaryd

  3. Jaiden says:

    Hi… can you send me the code for static html?? I want to hide my content on my fan page until someone like it.. I don’t know anything about html… Hope you can teach me… This is my email address Jaidenlkk@hotmail.com… Thx…

  4. Daniel says:

    I really interested in getting my page liked first before viewing can you help me. I am having lot’s of trouble with the tutorial.

  5. sezar says:

    hi can i hide some of my blog content until they like my facebook fan page? any help would be apprecited.

  6. James says:

    Well i’m gonna use it on my fan page :)

  7. James says:

    Very well i’m gonna use it on my fan page :)

  8. Abi says:

    Sorry sir but, i already installed Statci Html to my Fan Page (Maximum Relax), but i dont know how to continues, where to find the PHP file.
    I appreciate your help!

  9. Dana Crina says:

    Hello, I tried to do this app but the button “add to my page” doesn’t exists anymore. What should I do?

  10. Xander says:

    Hi, I am trying my hardest to get this to work but I must be doing something wrong :-( Not sure if facebooks new changes are causing the issue but figured I would ask.

    I am basically copying and pasting the code into the body of my index.php page

    Once i do this and go to the welcome tab it only gives me a blank white page? Un-like does the same thing. I do have a PHP server so I must be doing something wrong.

    Without pasting HTML into your php script should it still work?

    Thank you in advance…

  11. El.paštas says:

    For sure i’m gonna use it on my fan page :)

  12. amy says:

    Yes, I am using index.php for my file and my server is running PHP. I am familar with web and PHP, but new to integrating it into social networks, so I am not sure what a static HTML facbook app is. Any help would be appreciated. I tried many script variations in the PHP file, but none worked.

  13. amy says:

    Here is the code I have. I am using it on this page: As you can see the page is blank. What’s the problem?

    http://www.facebook.com/pages/Like-test/223160804404088?sk=app_204050586329040

    < ?php

    $request = $_REQUEST["signed_request"];
    list($encoded_sig, $load) = explode('.', $request, 2);
    $fbData = json_decode(base64_decode(strtr($load, '-_', '+/')), true);
    if (!empty($fbData["page"]["liked"]))
    { ?>
    You are a fan – insert html here

    You are not a fan – insert html here

    When I remove your PHP script and just use the standard HTML code with file name save as PHP the image shows up fine, so I know if is connecting to my server fine. I remove all the HTML and replace it with the above and everything disappears.

  14. littleshell says:

    how if html??
    i have no server side technology can be used

    any help would be appriciated

    littleshell@live.hk

  15. Jodestar says:

    You are pretty much a star .
    Thank youfor helping me with this

  16. J says:

    Yes it hosts PHP, we have a wordpress blog running. As mentioned, the script only seems to work when appending ?signed_request=x.x to the URL where it reveals the non-fan content message. Why is this?

    When creating the facebook iframe app, I’m linking to the .php file directly which prompts the 500 error.

  17. J says:

    This does not work for me. I copied and pasted the code as-is on the server and saved it as index.php

    My canvas URL is: http://mydomain.com/facebookpromo/
    My tab URL is: http://mydomain.com/facebookpromo/index.php

    When visiting the tab URL above, I get a 500 server error. However when appending something to the URL such as: http://mydomain.com/facebookpromo/index.php?signed_request=1.1 something looks to be working. I feel like a large chunk of instructions is missing, what am I doing wrong?

  18. Changis says:

    you always have great tips for us and I really appreciate it.
    Hiding content before getting a Like seems such a good idea to get more Like for your page and increase the speed of how fast you can go viral.
    I’ll have to see if I can do this.
    Best,
    Changis

  19. sheena says:

    Hi,

    Thank you so much for this work around.

    I’m going to try to do this myself but I need a server/hosting plan first, right?

    If I get a hosting plan from godaddy just for the landing page so no one can see the Wall content without “liking” the page first how big or small a plan would you recommend?

    Hope I can pull this off. :)

    Thank you!

  20. jersey says:

    Hi
    I try it but it dosen’t work ad i really need help :(

    I’ve created the application and all works but when i put the code in the page give me an error.
    Where i have to put the code? in the body?

    THIS IS MY CODE
    ————————————————–

    xxxxxxxxx

    body {
    width:520px;
    margin:0; padding:0; border:0;
    overflow:hidden;
    }

    You are a fan – insert html here

    You are not a fan – insert html here

    ——————————————————————————————————
    thanks for help!

  21. Burfelt says:

    I can’t get this to work. Keeps showing me “you’re not a fan” content.

  22. Peter says:

    I was lost without your help to be fair! much appreciated

  23. Peter says:

    Tried the tweak above and it still shows up the content.
    If first shows the “I’m not a fan” text and then goes ahead and loads the content regardless.
    Any help ?
    Thanks
    Pete

  24. kalnas says:

    cool stuff dude, thumbs up!

Leave a Reply


six − 1 =

Facebook