Easier way to add facebook connect to your blog using WP-FacebookConnect plugin

Previously I’ve written about how to add facebook connect to your wordpress blog but that plugin requires heavy modification on the comments.php file, which is in a way pretty tough for most people to do. So I’ve taken consideration to use the WP-FacebookConnect plugin which is featured in facebook developers wiki. It requires much more simpler method to add facebook authorization connectivity to your blog. I’ve seen Chris Wallace already had a helpful and simple explanation on this. So I will just compliment his article and add some extras to you don’t need to go to so many other websites to accomplish the integration with facebook.

Basically you need these steps to complete:

1. Create your Facebook Application and get the API and secret keys
2. Download and Install the officially listed WP-FaceBook connect plugin
3. Configure the plugin and add your API and secret keys and save the options
4. Now your WP theme folder, open the comments.php file in you favorite editor and look for the comment form element and add this piece of code where you want the Facebook Connect button to appear. Here is the piece of code
   ^?View Code PHP

   <?php do_action('fbc_display_login_button') ?>

5. Here is the code inside my comments.php near to the comments form
   
   ^?View Code PHP

   <form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( $user_ID ) : ?>     <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a>   <?php else : ?> <?php do_action('fbc_display_login_button'); ?> <p> <?php echo "<small>Note: <acronym title="Facebook is a Social Networking Engine">Facebook</acronym> users doesn't require to fill up name, e-mail, website or captcha code</small><br>"; echo "Already a Member? <br>"; echo '<a href="'.get_option('siteurl').'/wp-login.php'.'"><b>Login..</b></a> or<br/>'; ?>

6. Yes it’s as simple as that, but in-case it doesn’t work on IE or any CSS problems you can check this official faq

WP-SuperCache Fix for Wp-FacebookConnect

Now those who are using WP-SuperCache, here is the solution for you guys. Basically you need to do some .htaccess mod re-write and a small plugin for WP-SuperCache.

There are two places that WP Super Cache looks at for filtering user cookies (taken from AllFaceBook). The first (which I assume is the case for most users) is in the .htaccess file in your document root. If this is how your site is configured, you’ll need to find the following code in your .htaccess file:

# BEGIN WPSuperCache
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
AddDefaultCharset UTF-8
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html.gz [L]
 
RewriteCond %{REQUEST_URI} !^.*[^/]$
RewriteCond %{REQUEST_URI} !^.*//.*$
RewriteCond %{REQUEST_METHOD} !=POST
RewriteCond %{QUERY_STRING} !.*=.*
RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_).*$
RewriteCond %{DOCUMENT_ROOT}/wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html -f
RewriteRule ^(.*) /wp-content/cache/supercache/%{HTTP_HOST}/$1/index.html [L]
</IfModule>
# END WPSuperCache

All you need to do at that point is replace the two RewriteCond %{HTTP:Cookie} lines with the following:

RewriteCond %{HTTP:Cookie} !^.*(comment_author_|wordpress|wp-postpass_|YOURAPIKEY_user).*$

Now create a file fbconnect.php (It can be any name with an extension .php). Copy paste the following code inside the file and save it.

<?php
// provided by Nick ONeil 
function fbc_supercache($cachestr){
   if(isset($_COOKIE["YOURAPIKEY_user"]) )
      $cachestr .= $_COOKIE["YOURAPIKEY_user"];
   return $cachestr;
}
add_cacheaction(’wp_cache_get_cookies_values’, ‘fbc_supercache’);
?>

Replace "YOURAPIKEY" with your actual API key and save it in the folder /wp-content/wp-plugins/wp-super-cache/plugins/. Upload that to your server and you should be good to go!

Thank you very much Nick ONeil from AllFacebook.com & Chris Wallace. There are actually few other tutorials about integrating the facebook connect, feel free to browse them too.

• InsideFacebook
• Dentedreality

CSS Customization

The css that comes with WP-FacebookConnect is of really NO use, Chris Wallace already written a nice CSS override to the article so I am taking it from him for sharing purpose. The CSS file you need to modify is inside the plugin folder (fbconnect.css).

/* Facebook Connect Styles by Chris Wallace */
 
.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;
  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
}

Also let me know whether this helped you out or not or are you facing any specific problems?