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.
very nice buddy, but what does this do? I’m logged in now and do not see how to do facebook stuff?
wait… it shows that this comment came from facebook, but i am on your site?? what? huh? i’m lost now
Did you take your medicine today Todd?
Nice trick ! It’s like Google Friend
[...] Five Easy Steps to Integrate Facebook Connect with your WordPress Blog [...]
Great idea! I’m definitely gonna apply this on my new blog
I think we’re moving into a new web era again (Web 2.5?) with all this. With the openID, this, Google friends. Everything in one area or interconnected.
[...] 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 [...]
lovely.. this is lovely
heeeyy, why is that my previous comment does not show my name. Instead it says,
Facebook User says:
what gives?
Wow! Nice plugin!
is this compatible with 2.7?
It’s installed on my blog, which is 2.7. It works quite well for me.
Just try it, but after login with fbconnect button on my site it shown my profile appears on the middle of my web or not in the comment area like this site…I need support plz
Useful resource. Love social web.
It works ok, but still lots of bugs.
This is a great plugin
Does the plugin post stories to the news feed for you?
Wow.. this is an incredible addtion!!
Cool, i will use it.
Clarification please:
***
Then, you need to make sure your comments.php contains:
***
Does this mean that that string probably already exists in the comments file?
Yes, it’s highly possible your theme will already have that in the comments.php file. However, you do need to check and make sure.
I like this, very helpful thanks!
Follow-up question… did you have to modify the comments.php so that the facebook avatar (profile pic) would show up?
yeah, I have the same query as wang…will it post news feed? if so …its a great way to market your blog!
No it does not, any idea on how to make it do that?
tugbj
Thanks a lot, I followed up this great tutorial and I have it now running on my site, Los Santos del Indie. Greetings from Argentina!
Parse error: syntax error, unexpected T_OBJECT_OPERATOR in /home/gadgetst/public_html/nokiaweblog/wp-content/plugins/wp-facebookconnect/fbconnect.php on line 38
what to do? thanks.
it is helpful, thanks
[...] http://www.chris-wallace.com/2009/01/07/five-easy-steps-to-integrate-facebook-connect-with-your-blog… (워프 플러긴 설치하는곳 [...]
Thanks dude
I did have the same error on my site. I ran php5 on my server then it solved the problem (PHP5 is required).
Are you still using Facebook Connect with your comment system? Can’t seem to locate the Facebook Connect button anywhere. Just commenting to test out whether it’ll link up with my FB account.
Awesome tutorial though.
I was using it but turned it off due to a Javascript error. I have turned it back on if you’d like to see it in action.
Hmmm why do I become “Facebook User” and not my real name?
Nice tutorial. it worked great…just have to figure out how to move my welcome box and integrate facebook avatars.
Hey, this is a great, very clear tutorial. Thank-you!
I have one problem though, I’m being stupid because when I get to: “Then enter the API key and secret key that was generated in the second step” I don’t know where to enter these. Am I being really thick?
Hi again Chris – sorry, please ignore my last post. I was being thick. It all works now so thank-you! The only issue I have is with the “Facebook User” too…
Not bad
Wonderful post sir, thanks for taking the time to put this together. I was able to add this to my blog in no time. But I do think having a little more detail on setting up the Facebook app, might save a little time digging. Thanks again!
When I install it and click Facebook Connect it comes up with an Under Contrustion page. Someone help me pelase! http://www.thedevil.me.uk
Cool!
How do you delete/edit comments made on your blog via facebook connect? I’m sure we will get some that violate our terms.
test comment
Hello Chris – Thanks for the helpful outline of steps for FB Connect!
I am using your awesome theme Absynthe and followed your directions above to a t. This is the error message I get where the comments are:
Parse error: syntax error, unexpected $end in /home/catherinescholz/blog.catherinesmusic.com/wordpress/wp-content/themes/absynthe/comments.php on line 102
Any ideas?
Thanks,
Catherine
[...] Direct link to article » » [...]
Well… I tried implementing Facebook Connect on my site… unfortunately the button refuses to show up! Do you think you could help with some support?
I have a contol question..
If you hold and moderate comments on a WP blog, does FB connect override that moderation or are they held in the same way? If they are held, then do they stay off a FB feed until approved?
but it doesn’t show a person’s picture … hmmmph ..need to look into it
After driving myself crazy thank goodness I figured this out!
The last step where it says “Then enter the API key and secret key that was generated in the second step.” you need to add “… under SETTINGS”. I kept going to the code under Plugins trying to figure out where to plug in the API and secret code. It was the instructions that I linked to from your FAQ that I figured this out.
http://wiki.developers.facebook.com/index.php/WP-FBConnect
Thanks for these instructions though.
* going back to continue figuring this out *