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
}