Adding Facebook Connect
- March 23rd, 2010
- Write comment
So you might have noticed something new about my site today. Yes, that’s right I enabled Facebook Connect. So todays blog is going to be about:
HOW TO ENABLE FACEBOOK CONNECT!!!!!
It all starts with creating a Facebook application, then connecting that Facebook application to your WordPress site.
I will not be going into detail on how to add WordPress to your site. I’m taking for granted that you already have a blog up and running.
To create a Facebook application you’ll first have to have a Facebook account. If you’re one of the 10 people in the world who dosen’t have one you can click here to create one. Once you have your account set up go to the developers page and click on the “start building for your site” button. That will bring you to a new page were you will enter the title you want for your application and your URL. It good to chose something that corresponds to your blog. Then click “Submit”
From that point you’ll get a page that has some basic information about your site. On the right hand side you’ll have a list of links. From the “Edit Settings” link you’ll get to the “basic” information tab. In this field you’ll notice that most of the information is fairly straight forward. Due pay attention to the Developer Contact Email, this is going to be your email that you used for your facebook.
Click down to Authentication click both boxes and enter your URL of your site in to both fields. Without filling these fields your users won’t be able to connect to their accounts when they’re on your site.
Down in the Canvas tab enter your site name in the field labeled “Canvas Page URL.” This is the URL that Facebook uses to know were on their server your application is stored.
After that proceed to the connect tab. Now if you only want to create a Facebook application you can leave this field blank; however, we’re here to create Facebook commenting on your site. Therefore enter in your site URL into the “Connect URL” field. Click the big blue “Save Changes” button at the bottom and we’re done with Facebook. Remember to leave that page Open because we are going to need the API key and the Secret Key later on.
Now, pop over to your WordPress control panel, were we are going to be installing a Facebook Connect plugin created by sociable. If you feel ambitious you can try the beta. I don’t believe in being a hero so I just installed the latest stable version. Once you’ve downloaded the file onto your computer, don’t bother unzipping it. Just navigate to admin->plugins->add new, browse for the .zip file and WordPress automatically installs it into your plugin area.
Now here is the only tricky part. In your File Manager navigate to the folder that contains your currently applied theme. With in there, there will be a header.php file, open it to edit its content.
Comment out the HTML header, which will look like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
To comment out add <!– at the beginning and add –> at the end
and add this HTML header right after it on the next line:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
Now, navigate to admin->Settings->Facebook Connect in options insert your API and Secret key. Enable Comment Auto-Approval and Allow send user comments to Facebook. Now reap the rewards with having Facebook comments on your blog.
Good Job,
