Five Easy Steps to Integrate Facebook Connect with your WordPress Blog ∞
Posted at 11:06 AM on January 7th, 2009
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.
72 comments so far
Oops. I dribbbled.
-
I designed this for a big announcement on the UpThemes blog.
-
Working on revisions to a logo we were commissioned to design.
-
-
Client requested some color changes.
Steal this design. See if I care.
Hand-crafted in the year of the tiger.
Hey Chris,
This is great! I was wondering if you can set an already existing page – in this case my blog (Seizure Chicken) as the page to link fbook connect, rather than my actual profile or having to create a new page?
any help would be awesome! thanks
*that might have been confusing. I already have a page with a large amount of fans and would like to connect that existing page.. not having to create a new one page and re-invite people.
=)
test
Awesome! Thank you for dropping your knowledge on us all!
I stopped reading the documentation for that plugin as soon as it said “creates a new WordPress user”. Instant fail.
I want to have FB users have a button to easily put in their name/email information, but I don’t want them to become some sort of permanent member of my site. My site has one user: me. It doesn’t need to create users to let people leave comments.
Is there any plugin that doesn’t do that? Or is this some kind of massive failing of Facebook Connect or what?
Man, I’m sooo close. But for some reason, avatar’s aren’t resizing properly. And the comments aren’t getting fed to Facebook at all.
Any thoughts?
http://www.jamesbull.ca/projects/snow/feature/monday-mix-8-tracks-with-jesse-burtner/comment-page-1
Thanks! I’m editing the theme of my blog, and sorry for english errors, i’m a brazilian
Hi Chris,
Thanks for your informative post, I tried installing the plugin, but failed- got the below mentioned error.
Also- I added the code you mentioned in coments.php- but it doesn’t work:
Warning: require_once(facebook-client/facebook.php) [function.require-once]: failed to open stream: No such file or directory in /home/www/atomthought.com/wp-content/plugins/wp-fbconnect/common.php on line 18
Fatal error: require_once() [function.require]: Failed opening required ‘facebook-client/facebook.php’ (include_path=’.:/usr/local/php5/lib/php’) in /home/www/atomthought.com/wp-content/plugins/wp-fbconnect/common.php on line 18
thanks for your help
[...] Shared Five Easy Steps to Integrate Facebook Connect with your WordPress Blog // Chris Wallace [...]
[...] Five Easy Steps to Integrate Facebook Connect with your WordPress Blog // Chris Wallace [...]
Hey Chris, this is good, I couldn’t get it working until I read this, BUT, when I click through, I get an error to do with the Connect URL, which I have no idea what to configure it as (Google is not helping, nor is the FBC Wiki) – though I imagine it kicks back to the page? Any help, and perhaps an addendum to this post, much appreciated.
Tim M
tdftips.com
[...] resolves to the location of your xd_receiver.html file. If you’re not using Thesis, go read this link which describes how to make the magic happen. This link also details some handy tricks for [...]
Еhanks for your help.
This is a great plugin lad!
Facebook connect is really slowing down my page load time though!
It is dishonest to hide behind Facebook, refuse to talk with the media and to have someone else write for you because you are inarticulate. ,
Hey I’m a total newb to WordPress… Could you possibly help in total newb language? Where is the comment.php file? What EXACLTY do I have to add and where?
I love this idea just not much of a WordPress guru.
Hey why does this line appear in my front page : dir=”ltr” lang=”en-US” xmlns:fb=”http://www.facebook.com/2008/fbml”>
Hey chris why does this line appear in my front page : dir=”ltr” lang=”en-US” xmlns:fb=”http://www.facebook.com/2008/fbml”>
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?