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

Article Last Updated: 23^rd Apr 2010
Posted by Ruhani Rabin in PHP, Wordpress | View Comments |

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.

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

Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">


<?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>';
}
else echo "<a href='".get_option('siteurl')."/wp-login.php?action=logout' title='Log out of this account'>Logout »</a>" ; ?>

<?php else : ?>


<?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'.'">Login..</a> ';
echo "OR Login via Facebook <fb:login-button length="".$loginbutton."" autologoutlink="true" onlogin="window.location = '".$uri."';"></fb:login-button>n"; ?>


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

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.

GD Star Rating
loading...

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

Gopi Namasivayam
Hello,

I was wondering on how do i integrate the facebook share button with the login button.

I am actually seeking some help for someone to help me out, on a specialized share button.

Here's how it goes, for example you have http://www.ruhanirabin.com.

and on this website you have articles and you also have a share button, where visitors can actually share those articles from your website.

What i actually want to do is, i want this share button to be customized to do an extra thing.

which is, when "E.g: peter" clicks this share button it actually fetches the name peter from facebook , and adds it into the url and then the share is done.

so when the share is done it will look something like this http://www.ruhanirabin.com/?ref=peter

can this be done?
Guest
Nice tutorial. Now how can we port this to friendster instead of facebook?
Rohit Prabhakar
wonderful post. I am going to implement this on my blog http://rohitprabhakar.com . Please check in few days and review if I have done something wrong. Meanwhile can you please tell which plugin did you use for the toolbar in your blog footer?
Bottomless
Here's the Wordpress plugin:
http://wordpress.org/extend/plugins/like
No coding necessary, you can customize the look and placement of the button in the settings interface.
iamSiiN
Hi!.

Nice post you got there.

i was wondering if you can help me with installing the plugin

i got an error like this "Error updating Facebook templates!

Templates not synchronized with Facebook, write the templates text and press create templates!"

i hope you can help me with this problem i followed all the detailed instructions given and even read this article from smashingmagazine http://www.smashingmagazine.com/2009/09/14/how-... . im really frustrated right now about this problem i really want to install this beautiful plugin made by sociable :(
Raid recovery
Yes me too. And I think I'm the only one!
Madan Kumar
sdf
Khaldoon Masud
Nice topic
Gojeg
Hi, what about BuddyPress? It's a cool..
ravi
this was really helpful...