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

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!

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

	
  

Logged in as 

  
  
  . Logout

';
    }
    else echo "Logout »

" ; ?>

	


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


	 
	

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.

• RuhaniRabin.com now uses Facebook Connect social network api
• Easy steps to Facebook Connect Comment Box [How to]
• Facebook Connect Social Widget Comments Box for your website
• Easier way to add facebook connect to your blog using WP-FacebookConnect plugin
• WP-Optimize Database Cleanup and Optimization Plugin for Wordpress
• Top 10 Firefox Add-on for WordPress
• 14 Effective Practical Security Tips for WordPress
• How to Change Wordpress Permalinks without affecting Google

About Ruhani Rabin

Ruhani Rabin is the original owner and author of this blog. He also reviews web 2.0 startups at Tech2all.com. Largely interested in web 2.0 apps & Social Media. Currently the Vice President of MOL Access Portal (MOL is owner of Friendster.com). Also he is Web 2.0 & Social Media Researcher and a Total fun Geek!.. There you have it ;)

Twitter Profile: http://twitter.com/ruhanirabin