This tutorial is for WordPress developers who want to integrate Facebook login button in WordPress themes. E-Commerce, Forum etc themes require you to login, providing a Facebook login button make the login process faster for users as they don’t have to fill up long forms.
Downloading and including the Facebook OAuth WordPress library
I have created a Facebook OAuth library for WordPress which handles all the tough task of Facebook OAuth login. This library also creates necessary REST API URLs required for Facebook Login.
Extract the zip file in your theme folder. Now you will have a “inc” directory in your theme folder which has all necessary files for Facebook login.
Loading Facebook OAuth WordPress library
Now you need to load the library into WordPress. Inside your theme’s “functions.php” file include
Redriecting users
When user clicks on Sign In with Facebook button you need to redirect user to
This URL will handle all core functionality of Sign In with Facebook. Once the user has been logged in, the user will be redirected to the homepage of the website.
Creating and Installing Facebook App
Users who install your theme needs to create a Facebook App for their website.
Make sure while creating a app they provide the domain name of their website.
Once they have created a Facebook App they need to copy the App ID and App secret from Facebook App dashboard and store them as WordPress options.
Use the following option names to store the options value.
update_option("facebook_app_secret", $app_secret_variable);
This is all you need to do to have a Facebook login button in your theme.
Let’s create a Facebook Login widget which displays a Facebook Login Button.
Facebook Login Widget
Here is the code for creating a Facebook Login Widget.
You can put this code inside a plugin also. Make sure you pack the Facebook OAuth WordPress library with your plugin also.
require_once("inc/facebookoauth.php");
class Facebook_Login_Widget extends WP_Widget
{
public function __construct()
{
parent::__construct("facebook_login_widget", "Facebook Login", array("description" => __("Display a Facebook Login Button")));
}
public function form( $instance )
{
// Check values
if($instance)
{
$title = esc_attr($instance['title']);
$app_key = $instance['app_key'];
$app_secret = $instance['app_secret'];
}
else
{
$title = '';
$app_key = '';
$app_secret = '';
}
?>
<p>
<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'facebook_login_widget'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('app_key'); ?>"><?php _e('App ID:', 'facebook_login_widget'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('app_key'); ?>" name="<?php echo $this->get_field_name('app_key'); ?>" value="<?php echo $app_key; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('app_secret'); ?>"><?php _e('App Secret:', 'facebook_login_widget'); ?></label>
<input type="text" class="widefat" id="<?php echo $this->get_field_id('app_secret'); ?>" name="<?php echo $this->get_field_name('app_secret'); ?>" value="<?php echo $app_secret; ?>" />
</p>
<?php
}
public function update( $new_instance, $old_instance )
{
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['app_key'] = strip_tags($new_instance['app_key']);
$instance['app_secret'] = strip_tags($new_instance['app_secret']);
update_option("facebook_app_id", $new_instance['app_key']);
update_option("facebook_app_secret", $new_instance['app_secret']);
return $instance;
}
public function widget( $args, $instance )
{
extract($args);
$title = apply_filters('widget_title', $instance['title']);
echo $before_widget;
if($title)
{
echo $before_title . $title . $after_title ;
}
if(is_user_logged_in())
{
?>
<a href="<?php echo wp_logout_url( get_permalink() ); ?>" title="Logout"><input type="button" value="Logout" /></a>
<?php
}
else
{
?>
<a href="<?php echo site_url() . '/wp-admin/admin-ajax.php?action=facebook_oauth_redirect'; ?>"><input type="button" value="Login Using Facebook" /></a>
<?php
}
echo $after_widget;
}
}
register_widget("Facebook_Login_Widget");
Let’s see how the above code works:
- We first included the Facebook OAuth library.
- Then we created a Widget which displays a Login button on frontend and displays keys input boxes on backend.
- When users submit the widget form on backend the values are saved as WordPress options.
- When someone clicks on the Facebook Login button on the frontend of the widget, the users are redirected to the Redirect URL as mentioned above. The redirected URL handles all the login task.
Screenshots of the Facebook login widget
Access Graph API
This library also allows you to make calls to graph API. Its stores the access token required for graph API as user meta. You can retrieve it as
Now you can make calls to graph api using this token. By default this library has access to get only username and email address. You need to increase the permission by adding new facebook permissions to the $permission variable in facebookoauth.php file.
Complete Graph API Reference.
Refreshing Access Token
Facebook doesn’t allow you to use access token for more than 60 days. After the token has expired you need to ask the user to login again using the complete login flow.
While logging in user you can store the current time as user meta data and refresh it before 60 days. Or else you can wait until you get a 401 response error to refresh the token.
Conclusion
Now you have learnt how to create a facebook Login button. If you integrate it in your theme then you can place the button anywhere. If you integrate it in plugin then you need to put in a widget.
