Facebook Connect

Lesson Progress
0% Complete

This extension allows your app users to login to your WordPress site through the app using Facebook.

Before you can use Facebook Login, please make sure you also add your Facebook App ID and name in your myapppresser.com dashboard under Your App => Facebook Login. More details here.

Installation

Install and activate the App Facebook Connect plugin from the zip file that you were given when you purchased.

In your WordPress admin, go to Plugins->Add New->Upload. Upload the .zip file you downloaded (do not unzip), and activate.

Alternatively, unzip the folder and upload to your wp-content/plugins directory.

Plugin Settings

Go to AppPresser settings page, and add your license key under Facebook Connect. You can find your license key on your account page on apppresser.com. Add your Facebook App ID see instruction below on how to create our Facebook App.

Settings:

  • Register New Users: check this box if you want to automatically register new users who try to login via Facebook. With this box checked, any users that don’t exist on your WordPress site will automatically be created with their Facebook email and name. After the new user is created, they are automatically logged in.
  • Redirect URL: Enter a url to send users after they login. The plugin will not work without this url.

Create a Facebook App

You need to create a Facebook App and get an App ID that you will use in your AppPresser app.

Go to this page, and select “Add a New App”:
https://developers.facebook.com/apps

Give your app a name and a category, then create it. Visit the app settings page.

At the bottom, click Add Platform.

Select iOS as the platform, and enter your
App ID in the “Bundle ID” field.

Next, click Add Platform again, this time choose Android.

Enter the same App ID you did for iOS where it says “Google Play Package Name”. Add CordovaActivity for the class name, and add your key hash. (See key hash information below)

When you save, it may show an error about not finding your app on Google Play. Just click to use the App ID anyways.

Next, visit Settings => Advanced, and toggle the native app switch.

Save your settings.

Finally, go to “App Review” in the left hand menu, and make the app public.

Copy the Facebook app ID, then add to the admin settings on your site and myapppresser.com

Android Key Hashes

Android requires a key hash to use Facebook Login. You will need to generate this using the command line.

You need to create a development key for testing Facebook login, then a release key hash after you submit to the Google Play Store.

To generate a development key hash, you can run the following command in any CLI tool:

Mac

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Windows

keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl
base64

That will output your hash, you need to copy/paste it into the Android platform setting. A hash looks like this:

ga0ASFLJKEON487950SLGQfpQWAPGJ8=

Please consult the Facebook documentation for the latest code samples:

Development key hash

Release key hash

Add your app ID to the plugin settings

Go to your /wp-admin/ and select the AppPresser menu item. Scroll down to the “Facebook Connect” section and enter your App ID and then press “Save Settings” button.

How to Use the Facebook Login

If your app is setup properly, a Facebook login button will be displayed on the modal login as part of the AppTheme, and on the AppBuddy login.

You can also display the Facebook login anywhere in your app by using the shortcode below.

Shortcode

[app-fb-login]

Insert this shortcode on any post or page. It will display a Facebook login button, only in the app. It will not display on your normal website.

Editable shortcode attributes include button_text and class.

[app-fb-login button_text="Login Please"]

Redirect URL

If you would like to redirect users after logging in, add the URL to the provided admin setting. Also, if you would like to only redirect new users, use the
appfbconnect_redirect hook. See sample code below.

Hooks

appp_fb_loggedin

There is a login hook that passes the logged in user ID.

function my_appfbconnect_hook( $user_id ) {     
	// do your magic here
}
add_action( 'appp_fb_loggedin', 'my_appfbconnect_hook' );
appfbconnect_redirect

If you would like to redirect a new user to a different page than an existing user, use the appfbconnect_redirect filter. You can add this code to a file named my-new-user-redirect.php and place this in the /wp-content/mu-plugins/ directory. You may need to create the mu-plugins directory if it doesn’t already exist.

 function my_new_user_redirect( $redirect_url, $user_id, $is_new_user ) {
	if( $is_new_user ) {
		$redirect_url = 'http://your-site.com/hello-new-users/';
	}
	return $redirect_url;
}
add_filter( 'appfbconnect_redirect', 'my_new_user_redirect', 10, 3 );
appfbconnect_redirect

AppFBConnect uses a wp_rewrite() function to simplify the url when the user returns back to your site after logging into Facebook. It adds the URL
http://yoursite.com/oauthcallback/ without you having to create a page. If your server doesn’t support rewrites, you can use the appfbconnect_oathcallback filter to change this URL.

function my_appfbconnect_oathcallback( $oauthcallback ) {
	$oauthcallback = site_url( '/my-new-page/' );
	return $oauthcallback;
}
add_filter( 'appfbconnect_oathcallback', 'my_appfbconnect_oathcallback' );
appfbconnect_me_fields

If you want to pull more than just the email and name of your Facebook user, read more about the different fields that are available from Facebook Developer Graph API documentation. Then use this filter to include additional fields that you want to use.

function my_appfbconnect_me_fields( $me_fields ) {
	$me_fields = 'name,email';
	return $me_fields;
}
add_filter( 'appfbconnect_me_fields', 'my_appfbconnect_me_fields' );

FAQ

How do I create a Twitter, Google, Linkedin, or other social network login?

It’s not possible at this time to use the native Twitter or other apps to login to your AppPresser app like you can do with Facebook. However, it’s possible to use a browser based login, which still works great.

Invalid Key Hash

If you receive the following error: Invalid key hash.  The key has ##### does not match any stored key hashes.  Configure your app key hashes at
https://developers.facebook.com/apps/{your-app-id}/.  Add the hash key you see in the error to your Facebook app in the Key Hashes for the Android platform settings.