Create a Facebook iFrame fan gate using Classic ASP code

As a social media marketing professional you will often have the desire to present different creative content based upon whether a visitor to your Facebook page is already a fan or someone you are trying to convert to a fan. This process of displaying different content based upon a user’s fan relationship with you is often called a “fan gate” for Facebook pages.

So the question becomes “How to make Facebook pages show or hide content based upon a visitor being a fan or not a fan.”

Step One: ASP Code for Facebook Fan gate

Since Facebook recently stopped supporting FBML and has recently went to supporting iFrames it becomes a coding issue. What follows is a bit of code that we use on Windows servers using Classic ASP to direct a fan based upon their fan status to your page.

For ease of programming to use a WYSIWYG editor like Dreamweaver; we have separated the code into five files. The first file determines if the visitor is a fan of your page or not and then tells your website which page to show them, the page created for fans or the non-fan page. Simply make any modifications you want to the ‘fans.asp’ or ‘nonfans.asp’ files in a program like dreamweaver, upload your files to your Windows server and you should be good to go!

DOWNLOAD THE FILES HERE (.zip)

The 5 files included in the link above are:

  • A page to determine Fan Status (index.asp)
  • Page for fans – Simple page to place whatever creative you want fans to see (fans.asp)
  • Page for non-fans – Simple page to place whatever creative you want non-fans to see (nonfans.asp)
  • Include file that helps us read what Facebook sends to the iFrame (json_decode.asp)
  • Include file that helps us read what Facebook sends to the iFrame (Base64_encode-decode.asp)

You will need upload all of these files to your Windows ASP server and place them all in the same directory. You can also add all images for your pages in the same directory for easy linking of images. We borrowed code from the following three places (Stackoverflow, GitHub, Free VBCode) and made some minor modifications so you could easily use these files to setup your fan gate. (Notice, I haven’t talked about strategy for your pages but we have plenty of that too here)

Step Two: Install iFrames App to your page

  1. Visit this URL: https://developers.facebook.com/apps
    (be sure to be logged in as the admin of your page, not using FB as a page though)
    Create an APP in Facebook
  2. Click the +Create New App button and the following will appear:
    Facebook - Name Application
    Be sure to give your application a name you can easily remember and identify; this is especially useful when working with multiple pages and clients.
    Once you hit “Continue” you will be asked to enter a captcha code to ensure you are human. (You are human right?)
  3. Next, you will need to tell Facebook where your iFrame code (from Step one above) is located.
    Be sure to add the following information: Page Tab Name, Page tab URL, Secure page tab URL
    -typically the secure page is the same address, just use https://  instead of https://
    (your site will need to have a SSL installed already for this)

    NOTE: Be sure to copy your App ID & Page URL to something for easy refrence on the next step.
    Facebook App Page Links

  4. Now visit the following URL
    Replace the ‘YOURID’ with your App ID & the ‘YOURURL’ with your Page TabURL

    https://facebook.com/dialog/pagetab?app_id=YOURID&next=YOURURL

  5. After you visit the link above you will be presented the following where you can select what page you want the tab added to.
    Facebook - Add Page Tab
  6. From there you can edit your page settings and have it defaulted to land on your newly created iFrame tab that shows different content for fans and non-fans!

Share your success and comments below…

Hey, if this article helped you, why not give it a Plus…

Once you have it done, let us know and post a link to your Facebook page in the comments below! We will go check out your pages! Can’t wait to see what you have done! Let us know if you have any questions!