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!

• 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)
2. Click the +Create New App button and the following will appear:
   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.
4. Now visit the following URL
   Replace the ‘YOURID’ with your App ID & the ‘YOURURL’ with your Page TabURLexample: 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.
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!