Enabling Facebook Sign In

Some of our themes include an option for your customers/visitors to sign in via Facebook authentication. Not only does this feature make it easy for your visitors, it also increases sign up conversion rates and user adoption.

Before you can take advantage of this feature, you’ll have to setup a Facebook Developers account and follow the steps below.

Create a New Facebook App

In order for Facebook authentication to work with any sites, you must first setup what’s called an “app”. Not the best choice in terminology but it’ll have to do.

In this case an “app” serves as the gatekeeper between Facebook and your website when someone attempts to login to your site via Facebook.

For more technical details, check out the Facebook Getting Started Guide.

Complete the new Facebook App page details.

• Login to your Facebook account and then create a new app.
• Give your new application a name. We typically use the name of our website.
• Check the “I agree to the Facebook Terms” box and click “Continue”.
• Complete the security check Captcha challenge and click “Submit”.
• You will now see your new Facebook App page where you should complete the applicable fields.
• Save your changes so you don’t lose anything.
• Next, click on the “Web” left-hand sidebar link


Enter your site URL and site domain name.

• Add your web site’s URL to the “Site URL” field (i.e. http://www.appthemes.com/).
• Add your domain name only to the “Site Domain” field so it includes all sub-domains (i.e. appthemes.com).

Save your changes and your new Facebook App will be all set. Now it’s time to move onto the new step.

Setting Up Facebook Within Your Theme

Next, we’ll need to setup Facebook within your AppTheme. This part is pretty straight forward and only requires a few steps.

Enter your Facebook app ID and secret ID keys.

• Open another tab in your web browser so we can keep your new Facebook App page open.
• Login to your WordPress admin back-end.
• In your left column, click the theme settings page link (i.e. ClassiPress Settings)
• Click on the “Facebook” tab and you’ll see several options.
• Change the “Enable Facebook Authentication” drop-down to “Yes”.
• Copy the App ID from your Facebook app page (other browser tab) and paste it into the App ID field in the WordPress admin.
• Do the exact same thing with the Facebook app secret ID field.
• Save your WordPress admin page options and then everything should be setup.
• A Facebook login button should now appear on your sites login page.

Troubleshooting

It’s a little tricky testing it out on your own site. You’ll first need to be logged out of WordPress otherwise you might have Facebook authentication issues. It’s best to try logging in via another web browser.

If you wish to setup Facebook app testing on your localhost, you’ll need to jump over a couple of hurdles first. Since Facebook needs a valid domain name in order to setup an app, localhost won’t work….at least it didn’t for us.

So for our local testing, we created virtual hosts (i.e. http://classipress.dev) which mapped to our 127.0.0.1 localhost IP. Using MAMP Pro makes it very easy to do if you’re a Mac user. You could also use a dynamic DNS service like DynDNS which.

Here’s a pretty good tutorial on how to setup a Facebook localhost test environment.

facebook install

Categories: Tutorials

Written by: David on August 7, 2011. Last modified by: David on August 7, 2011 8:18 pm.