Facebook login

Updated on 20-October-2016 at 10:16 AM

Business Catalyst End of life announcement - find out more details.

Step 1: Setting up a Facebook application

In order to integrate Facebook login with your site, you will first need to setup a Facebook application. To do this, follow the below steps:

  1. Go to http://developers.facebook.com/ and login using your Facebook account.
  2. You will be prompted to give permission for the developer application to access your basic information. Click Allow.
  3. You will now be taken to the Facebook developers apps page. On the top right of the page, click + Create New App.
  4. Enter an App Name, this will be displayed to your customers when they first login to your site using the Facebook application. Agree to the Facebook terms and click Continue.
  5. Follow any security prompts to complete this process. Once you have done this, you will then be taken to the App basic info page.
  6. From the menu on the left, click the Web tab.
  7. On this page, under the Website Settings section, you will see 2 fields for the Site URL and Site Domain. Enter the URL of the site you will be using this app for, e.g. http://mysite.com and then click Save Changes
  8. Note down the App ID/API Key, App Secret and Site URL as you will need to enter this in the admin of your site in the next step.

Step 2: Configuring your site

Now that you have created a Facebook application, you are now ready to configure the admin of your site. To do this, follow the below steps:

  1. Login to the admin of your site and go to Site Settings and then click the Social Integration option.
  2. Using the details you have acquired from step 1 above, enter the App ID, App Secret and Site URL in the appropriate fields.
  3. Click Save

Step 3: Inserting a Facebook login button on your site

The Facebook login module allows your customers to login to your sites and secure zones using their Facebook credentials.

This module can be inserted into a web page, template or layout using the TOOLBOX menu. Go to the page or template you would like to insert this module into, and from the TOOLBOX on the right, select Social Media > Facebook login > Customize.

As a mandatory step, in order for the module to render you will need to specify a Button Image and a Button Text to use for the login button:

 

Depending on the process you would like to implement for your customers, follow the below tutorials to achieve this:

Customizing the Facebook Login module

The Facebook login module can be customized through parameters added to this module. See below the parameters available:

Parameter Description Default value
LoginImage Image used to display the Facebook login button  
LoginText Text used in the Facebook login button  
ZoneId The ID of the secure zone to log user into -1

To customize these parameters, you can either manually modify the parameter values after inserting the module or through the TOOLBOX menu. To customize these parameters using the TOOLBOX. From the TOOLBOX menu, select Social media > Facebook login and on the next screen, click Customize. You can now customize the below options:

  • Button Image - Click the icon next to this field to open the file manager and select and image.
  • Button text - Enter your own text to replace the default button text
  • Secure Zone to login to - Select one of your current secure zones for customers to login to.

The account link module will allow your customers to link their Facebook account with the Facebook application you have setup in the above step.

Note: The account link module must be inserted within a secure zone. Customers must login in order for this module to render.

To insert this module, open the web page or template you would like to add this module to. From the TOOLBOX menu, select Social media > Facebook Account link > Customize, then select an image for Account Link/Unlink Image. Click Insert.

Customizing the Facebook account link module

The Facebook account link module can be customized through parameters added to this module. See below the parameters available:

Parameter Description Default value
FbAccountLinkImg Image used to display the Facebook account link button  
FbAccountLinkText Text used in the Facebook account link button  
FbAccountUnlinkImg Image used to display the Facebook account un-link button  
FbAccountUnlinkText Text used in the Facebook account un-link button  

To customize these parameters, you can either manually modify the parameter values after inserting the modules or through the TOOLBOX menu. To customize these parameters using the TOOLBOX, select Social media > Facebook account link and on the next screen, click Customize. You can now customize the below options:

  • Account Link Image - Click the icon next to this field to open the file manager and select and image.
  • Account Link Text - Enter your own text to replace the default button text
  • Account Unlink Image - Click the icon next to this field to open the file manager and select and image
  • Account Unlink Text - Enter your own text to replace the default button text

How to automatically login Facebook users into your site

When a customer logs into your website using their Facebook credentials, you can generically log them into your site and not any particular secure zone. This section assumes you have followed step 1 and step 2 explained above.

To log customers into your site when entering their Facebook details, follow the below steps:

  1. Navigate to the template or Web page you would like to insert the login button on, then from the TOOLBOX menu, select Social Media > Facebook Login.
  2. From the Existing users will be logged into drop-down, select Current Site.
  3. Click Customize if you would like to customize the Facebook button image and text as descriped in step 3 above.
  4. Click Insert.

How to register and log customers into a secure zone

When a customer logs into your website using their Facebook credentials, you have the option of logging existing users into the secure zone and subscribing new users to this secure zone. This section assumes you have follow step 1 and step 2 explained above.

To subscribe a user to a secure zone using their Facebook details to login, follow the below steps:

  1. Ensure you have setup the relevant secure zone. See Creating Secure Zones .
  2. Navigate to the template or Web page you would like to insert the login button on, then from the TOOLBOX menu, select Social Media > Facebook Login.
  3. From the Existing users will be logged into drop-down, select the secure zone you would like customers to be logged into.
  4. Check the Subscribed to the secure zone to subscribe new users to this secure zone
  5. You can additionally redirect these customers to a specified web page by checking the Redirected to a page check box and selecting the relevant page from the list..

How to register and collect payment for a secure zone

If a new customer has signed up to your site using their Facebook login details, you may want to collect additional information from these users as well as payment. This section assumes you have follow step 1 and step 2 explained above.

To collect additional user data, follow the below steps

  1. Firstly, you will need to create a Web Page and a Web Form that will collect this information.
  2. Place the web form on the web page you will be redirecting new Facebook users to.
  3. Navigate to the template or Web page you would like to insert the login button on, then from the TOOLBOX menu , select Social Media > Facebook Login.
  4. From the Existing users will be logged into drop-down, select the secure zone you would like customers to be logged into.
  5. Check the Redirected to a page check-box.
  6. From the drop-down, select the web page you have placed your web form on. These users will be redirected to this web page to collect additional information once they have logged in.

How to display a welcome message for new customers

When a customer logs into your website using their Facebook credentials, you have the option of logging the customer in and displaying a welcome message. This section assumes you have followed step 1 and step 2 explained above.

  1. Navigate to the template or Web page you would like to insert the login button on, then from the TOOLBOX menu , select Social Media > Facebook Login.
  2. From the Existing users will be logged into drop-down, depending on whether you would like to log the customer into a secure zone or just the site, select the relevant option.
  3. From the New user will be drop down, select a web page you will use to display a welcome message.
  4. Click Customize if you would like to customize the Facebook button image and text as described in step 3 above.
  5. Click Insert.