Five Easy Steps to Integrate Facebook Connect with your WordPress Blog

Wondering how to seamlessly integrate Facebook Connect into your WordPress blog? Have no fear, Facebook Connect Man is here. Uh, well, not really, but read on if you want millions of people to be able to use their Facebook login for your blog!

1. Download and install the Facebook Connect Plug-in.

2. Create a new Facebook developer API key.

You don’t have to be a developer to get an API key. It just registers the usage of Facebook Connect so they can track where the API calls are coming from.

3. Edit your theme’s comments.php file.

You will want to dig through your comments.php file and add the following code just before or after your comment form:

<?php do_action('fbc_display_login_button') ?>

Then, you need to make sure your comments.php contains:

<?php if ( $user_ID ) : ?>

This will hide the name and email fields when a user is logged into Facebook Connect.

4. Activate the Facebook Connect plug-in and enter your API key and secret key.

Next, you need to go to your Plugins section in the WordPress admin and enable Facebook Connect. Then enter the API key and secret key that was generated in the second step.

5. Customize your CSS to make Facebook Connect look good.

Once you’ve installed Facebook Connect, it may look not so great. Customize the CSS to make it look like you and Facebook are best buds.

Here’s what I added to my CSS file to override some of the default styles that the Facebook Connect plugin adds to your page:

/* Facebook Connect Styles */

.facebook-connect{ /* I added this div wrapper myself, was not part of the plugin */
  position: relative;
  float: right;
  width: 300px;
  margin-top: -65px;
  text-align: right
}

.facebook-connect a,  /* you probably won't need this css */
.facebook-connect a:hover,
.facebook-connect a img,
.facebook-connect a:hover img{
  border: 0
}

.facebook-connect .fbc_connect_button_area { /* This is the button container for your comment form */
  border: 0;
  float:none;
  margin:0;
  padding:0
}

body .fbc_profile_header { /* I added body to override the CSS from Facebook Connect's default CSS */
  background:#000000 url("images/quote-bg-repeat5.jpg") repeat-x;
  border:1px solid #3d3e3d;
  border-right: 0;
  padding:10px 5px 5px 10px;
  position:fixed; top: 45%; right:0;
  text-align:left;
  width:220px
}

body .fbc_profile_header a.logout{ /* this is a custom class I added to the HTML in fbconnect.php */
  font-size: .9em;
  color: #999
}

That’s It, you should be up and running! However, if you are having issues with IE not displaying your button, WP SuperCache, or anything else, make sure to read the Frequently Asked Questions.

There are a number of other more detailed tutorials out there for you if you need a little more detail on the various steps.

Posted by Chris

Posted in Tips & Tutorials

11:06 am

facebook connect

72 notes

64 comments 0 people listening

Comment help
Get Livefyre

Comments have been disabled for this post.

Sort: Newest | Oldest

Praz

Hi,
I implemented this on my website. I am able to connect to facebook, but after the page reloads and the login default comment form still appears with Name,Website,email-id. I guess once logged into facebook, it should not display the login form. Moreover can this login thing be ajaxified without reloading the page? What am I missing?