Facebook connect is a Facebook API to integrate Facebook related social networking option to your website. It provides a secure layer of authentication mechanism to integrate partial Facebook features, user details for you. Today I’m going to show you a way to integrate Facebook authentication for your WordPress blog. This article assumes that you are already running WordPress 2.7 or above. It’s possible to make a Facebook connect plugin from the very scratch but here I’m covering the easy way to implement it. Alternatively because of some problems with this plugin, I’ve written another post for much more easier way to integrate facebook (Using Official Plugin). Now here are the steps to make you accomplish on this matter.
#1 – Make the Facebook Application
Do you have a Facebook Profile? If you don’t have a Facebook profile, create one first then move to Facebook developers page to create your website application. A Facebook application is required provide a secure layer of authentication and manage Facebook members for your website. Here is how you should do it.
-
Visit Facebook Developers page
-
Click on Start Now Button
-
You need to Login to Facebook Developers Application and you need to add it to your applications, once you do that you can head over here and use the “Set up New Application” button.
-
Insert your application name and create the application, here is the typical application settings
-
Once you are done you need to keep the settings page open for reference to the API Key.
#2 – Implementing the fbConnect Plugin
Sociable.es which is a part of SixJumps Social media marketing has created a wonderful OOP programmed Facebook Connect plugin which allows you to integrate Facebook connect in a minute inside your WordPress blog including Friend Invites, Last visited Facebook users Widget, Members of the blog and a profile page. This plugin also enables you to automatically create Facebook users on your blog database (Facebook uses don’t have to register to your blog) and able to syndicate the comments on the users Facebook mini-feed.
-
Get the Facebook Connect plugin
-
Extract, Upload and Install it on your WordPress plugins
-
Open and Edit your themes header.php file and add this code inside. The Second line is important!1
2<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> -
Once you are done, save and update the header.php file
-
Now go to WordPress Admin > Settings > Facebook Connect
Set the options, insert your API Key and Secret Key from the Facebook Application Page, see below
Enable Comment Auto-Approval and Allow send user comments to Facebook. Click on Update Options Button when you are done
-
Once updated, follow down to the Comment Templates section of the page and click on “Create Template” button to create basic feed template for the users Facebook mini-feed.
-
Well you are almost done, just go to WordPress Admin > Appearance > Widgets to add the Facebook Connect Widget to your sidebar. Save your sidebar settings and you are done. Note that you can customize some of the options of the sidebar widget from by clicking on “Edit” options on the sidebar management admin panel.
-
You can go to your blog now and have a look at the sidebar.
#3 – See it in Action
Now you’ve added the plugin to your system and integrated the functions to your blog. So it’s time for you to check it out. Try to login using your sidebar and you should be presented with a Facebook login popup dialog.
Once you enter the credentials, you should be logged in to your blog as a Facebook user and will be able to see your Facebook avatar at the sidebar panel.
These are only the basic setup of the plugin. If you like you can take it further, see the rest of this article get the idea of doing it.
#4 – Implement the Facebook Connect options in your Comment posting form (NOT necessary for the newer version of the plugin)
Now we are going to do some changes in the comments.php file which comes with your theme package. Here is a example of implementing the Facebook Login Button just before the Author Name field. Open your comments.php file in your favorite text editor. If you don’t have one you can read this and choose one for yourself and yes they are free. In your text editor search for the line “wp-comments-post.php” then follow the code changes below..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( $user_ID ) : ?> <?php // facebook user checking function $fb_user = fb_get_loggedin_user(); //fb user check ?> <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"> <!-- facebook user checking function --> <?php // if facebook User if ($fb_user){ echo $user_identity." - Via Facebook"; } else echo $user_identity; ?> </a>. <?php // if facebook User if ($fb_user){ echo '<a href="#" onclick="FB.Connect.logout(function() { window.location = ''.get_option('siteurl').'/?fbconnect_action=logout'.''; })">Logout</a></p>'; } else echo "<a href='".get_option('siteurl')."/wp-login.php?action=logout' title='Log out of this account'>Logout »</a></p>" ; ?> <?php else : ?> <p> <?php // adding an icon for general login OR facebook login option graphic echo "Already a Member? "; echo '<a href="'.get_option('siteurl').'/wp-login.php'.'"><b>Login..</b></a><br/>'; echo "OR Login via Facebook<br/><fb:login-button length="".$loginbutton."" autologoutlink="true" onlogin="window.location = '".$uri."';"></fb:login-button>n"; ?> </p> <p> <input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" /> <label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?> </p> |
Here is how it looks like.
And once you login using your Facebook account the comment posting form will turn into this.
#5 – Known Issues
-
This plugin seems not be working with WP-Super Cache plugin, which cache static HTML files of the dynamic WordPress website.
Well, this is all for now. Please do post your comments about your implementations and possible problems that you’ve hit along the way.
About Ruhani Rabin
Pingback: How to integrate social networking in wordpress using facebook connect api and wordpress plugin [Tutorial] | WpMash - WordPress News
Pingback: JOMYUT.NET » WordPress – Social Network Integrated
Pingback: How to integrate social networking in wordpress using facebook | Joint Pain Relief
Pingback: How to integrate social networking in wordpress using facebook | Wood TV Stand
Pingback: Sociable FBConnect and Wordpress Integration • Blog Archive • onlyStuff.com
Pingback: Facebook Connect : Paul’s Time Sink
Pingback: Facebook Connect Social Widget Comments Box for your website
Pingback: Easier way to add facebook connect to your wordpress blog using WP-FacebookConnect plugin, fast and easy Integration [WordPress] | Ruhani Rabin
Pingback: Designer&Developer » Five Easy Steps to Integrate Facebook Connect with your Blog
Pingback: Wordpress Updates » Blog Archive » Integrate Facebook with WP via Connect
Pingback: RuhaniRabin.com is Powered by Facebook Connect Social Platform - Securely login to RuhaniRabin.com using your Existing Facebook account | Ruhani Rabin