Facebook Fangate Magento Setup


Thanks for purchasing the Facebook fan gate module for Magento by Juno Media. This guide should be followed to complete a quick installation of the module.

1. Download

First step as with any Magento add-on is to download the module zip file. To do this login to your account at http://magento.junowebdesign.com/. Once logged in, navigate to the My Account section and click on the downloads link on the left side. Now you should see the module file available to download.

2. Install

The module has been packaged for installation via Magento Connect. This is the simpleset way to install and manage your modules. Navigate to www.YourDomain.com/downloader/ (replacing YourDomain.com with your actual domain name, then login when prompted.

When logged in you should see the upload package option. Use this option to locate the zip file downloaded in step one of this guide.

When located, select, upload and install. Now the module will be installed on your site. Next step is to return to the admin section of your website and goto the Admin > System > Cache Management section. Once on this page, clear all the caches and Magento Storage. Once the caches have been cleared you need to log out and log back into the admin, this triggers the install.

Now the module will be installed and ready to configure.

3. Configure Magento

Now the module is installed we can configure the options on the Magento side. Navigate to Admin > System > Configuration > Facebook Fan Gate. This will reveal the basic setting for the module:

  • Licence Key - This is provided by Juno Media and is available from your account section on the http://magento.junowebdesign.com/ website. Please email support@junowebdesign.com if you have any issues.

  • Custom CSS - Please add any custom CSS that you require on your pages into this text area. This CSS will be included on all of the framed pages.

  • Share Button - Yes / No - If the share button is active on the iframed pages.

  • Share Title - This should be the title of offer or fan page, this will be shown on the users wall when shared.

  • Share Description - This should be a description of your offer or fan page, this will be shown on the users wall when shared.

  • Share URL - This should be the URL of your Facebook Like Page.

  • Share Image - This should be the URL of a graphic to be used in the share button popup.

Once the basic module configuration is complete its time to create the static blocks. The static blocks will allow you to control the look and feel of the framed facebook pages. Navigate to Admin > CMS > Static Blocks and create three static blocks:

  • facebook_likeus - This block will be shown on the like us frame. This will be the page that users see before they have liked your fan page. If they already like you fan page this block will be skipped.

  • facebook_form - This block is displayed once the user has ‘liked’ your fan page. This page should contain your registration form.

    • Registration Form - There are two methods to entering the registration form on the form page. You can either enter a short code ##FORM## which will be dynamically replaced with a basic form when rendered. Or you can code your own form into the static block. The only requirements of a custom form are:

      • Post URL - The post url for the form should be www.YourDomain.com/facebook/frame/savedata/ (replacing YourDomain.com with your actual domain).

      • First Name Field - Text input with the name “firstname”

      • Last Name Field - Text input with the name “lastname”

      • Email Field - Text input with the name “email”

  • facebook_thankyou - This block will be shown after the user has signed up.

It is imperative that the static blocks are named as they are above for the module to function correctly.

4. Configure Facebook

Now Magento is setup and configured its time to login to Facebook and complete the configuration on your fan page. The first thing that you need to do is install the app to your page that is going to hold your sign up page content. This can be added from the following URL: http://woobox.com/statichtml.

Add a static html tab onto your facebook page (its free). Once you have added the tab onto your page, as the admin you will be able to see the configuration options for the tab. You will need to configure the following settings:

Click on the “Settings” link.

  • Page Source - This options needs to be set to: “URL”. The URL should be set to http://www.YourSite.com/facebook/frame/form/ (replacing YourSite.com with your actual domain name)

  • Fan-Gate - This option needs to be set to “URL”. The URL should be set to: http://www.YourSite.com/facebook/frame/likeus/ (replacing YourSite.com with your actual domain name)

  • Friend-Gate - This option should be set to “Off”.

  • Form Gate - This option should be set to “Off”.

  • Tab Name - This is the text that appears below the icon on your fan page.

Once this has been installed to your fan page, you will need to configure it.

5. Complete

Your fan page should now be integrated with your Magento ecommerce store.

If you require any bespoke additions or custom design work, please email support@junowebdesign.com with your requirements.

If you have any suggestions or ideas on how to improve the module, please email them over to support@junowebdesign.com

Skype support is also available from andyslater99