This documentation is for AppPresser 2 only. For AppPresser 3 docs, click here.

App Facebook Connect

This extension allows you to connect to Facebook through the native In App Browser.

Allow your app users to login, register, and more instantly if they have a Facebook account.

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.

Options:

  • 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.

Create a Facebook App

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

1 - Go to this page, and click the "My Apps" menu and select "Add a New App": https://developers.facebook.com/apps

2 - Select www (website) as the platform.

3 - Enter a unique name for your app and click Create New Facebook App ID.

4 - Select a Category from the dropdown and press the Create App ID button.

5 - Click "My Apps" menu again and select the app you just created.

6 - Click "Settings" in the left navigation and enter your domain in the "App Domain" field and your email in the "Contact Email" field.

7 - Press the "+ Add Platform" button and select "Website", enter the URL to your website.

8 - Press the "+ Add Platform" button, and add iOS:

Add your Bundle ID, it should be a reverse domain like com.myapp.app. It must match the value in your config.xml file. Ignore everything else.

9 - Press "Save Changes" button.

10 - In the left hand menu click Products => Facebook Login, and set the following:

  • Client OAuth Login? Yes
  • Web OAuth Login? Yes
  • Under Oauth redirect URIs, you need to add two URLs:
    https://www.facebook.com/connect/login_success.html and
    http://your-domain.com/oauthcallback/
    Note: you don't need to create this page, the plugin creates a url rewrite to the inc/oauthcallback.html located in the plugin files.
  • All other settings can be No. Leave the security fields blank.

11 - Press "Save Changes" button.

12 - Under the Status and Review tab, Toggle "Yes" to make your app available to the general public. (Confirm that your app to be publicly available to all users)

13 - Copy this app ID, then add to the admin settings on your site (instructions below)

Add your app ID to the plugin settings

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

(Deprecated) No Longer Required to Configure Phonegap Project

This extension no longer requires any changes to the www/config.xml file in your Phonegap Project. (If you are upgrading this plugin and your app is already live and you have already configured this you can leave or remove these settings).

No longer required: Previous versions of this plugin required the following to your config.xml file:

<gap:plugin name="com.phonegap.plugins.facebookconnect" version="0.9.0">
    <param name="APP_ID" value="..." />
    <param name="APP_NAME" value="..." />
</gap:plugin>

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" class="btn-primary"]

HTML buttons

You can also add the login and status update buttons with normal HTML, although it is not recommended, and may cause unexpected behavior.

Login button HTML:

<button class="appfbconnectlogin btn">Post Status Update</button>

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' );

Customization

It's possible to add your own javascript to create your own buttons and Facebook Connect functionality.

Please note: we cannot provide support for this type of customization.

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.

You can use a plugin for that, (it works in the app). We recommend this plugin https://wordpress.org/plugins/wordpress-social-login/