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

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

fconnectwp

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:

Create your Facebook Application and get the API and secret keys
Download and Install the officially listed WP-FaceBook connect plugin
Configure the plugin and add your API and secret keys and save the options
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

Here is the code inside my comments.php near to the comments form

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<form action="<?php echo get_settings('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>

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 »</a>

<?php else : ?>
<?php do_action('fbc_display_login_button'); ?>

<?php
echo "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 ";
echo "Already a Member? ";
echo '<a href="'.get_option('siteurl').'/wp-login.php'.'">Login..</a> or ';
?>

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 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:

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

1
2
3
4
5
6
7
8
9

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

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

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
38

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

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

Richard Foreman
Great plugin but I have tried everything to move the profile window from the top corner. It is behind my twitter and facebook buttons on the site. Anything to help out. http://www.theweatherobserver.com
Guest
how..
0time
How to do this?
Anirban
Hello Ruhani,

I tried implementing this plugin. After some stumbling and all I finally got the plugin activated. But, in the code I see that the API key needs to be entered into a form. I'm not getting any form or setting option at the admin panel. What to do or where the API keys need to be entered? Please advise.

Regards,

Anirban.
Mark
Any ideas on how to set the default user role?

As it ignored what I've set as deafult user role.

:-(

Thanks
World Cup Fever
Thanks for this one. I'm sure it will make someone happy. If you don't mind, can you share on how to create a facebook apps if we know nothing about it?
Facebook Connet Site
Thanks for the tips on clearing the FB cookies, that was giving me some issues and I was looking for the right things to call. Thanks again.
Ed ONeill
Wanted to see this working on a real site. Having problems with my implementation.
Ruhani Rabin
The demo site already real as much it could be
Ashrith Josephite
really wanted dis...tnx