Integrate social networking in wordpress using facebook connect api and WordPress plugin tutorial

Advertisement

wordpress facebook connect

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.

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

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




  • 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

     facebook-connect-plugin-settings

    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.

    facebook-connect-plugin-settings-comments

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

    facebook-connect-widget-settings

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

Get Free Updates - Weekly

Sign up for the free tips on business and productivity today.
Receive email only when we have new content.

facebook-connect-plugin-popup

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.

facebook-connect-plugin-sidebar

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



Logged in as



. Logout

';
}
else echo "Logout »

" ; ?>

Advertisement

Divi - Huge Savings

Login..
';
echo "OR Login via Facebook
n"; ?>


 

facebook-connect-wordpress-comment-integration

Here is how it looks like.

 

facebook-connect-comment-logged-in

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.

Some of the link on this post may have affiliate links attached. Read the FTC Disclaimer.

77 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments