Setup Facebook Connect Commenters on Movable type
Today we will explore how to install Facebook Connect Commenters with Movable Type 4.25 and the Mid Century Template Set, and actually get it to work. You can add Facebook Connect to any Movable Type blog, allowing Facebook users to sign in, comment, and share their actions. Facebook Connect, will automatically display a Facebook commenters name and photo next to their comment while allowing them to easily sign in to comment.
The first step is to get and install the latest version of the facebook connect commenters plug in. (note: if you haven't upgraded Movable type to 4.25 I highly suggest going ahead and upgrading MT as you normally would with the community version that is now availabe at http://www.movabletype.com/download/ and grab the blogger version.)
After the plug in has bee installed you need to navigate to your mt blogs preferences Registration page, check Facebook as a registration method and click setup. This will take you to your mt blogs plugin page where you need to select the facebook connect commenters plugin settings area and "edit facebook app". This will take you to Facebook where you can sign in and create your app to communicate with Facebook Connect.
Creating the app is very simple. First under the basic tab give your app a name and email click save and than click the connect menu tab on the left side of the page. Once in the connect area you will need to enter the website url of your blog in the Connect URL box. You can also include a logo if you like in this same area.
Once complete save your changes and take note of your Api key and Secret as they will be entered into the Movable Type Facebook Connect Commenters plugin area. The next step is to do just that by entering your Facebook Api key and secret number into the Facebook Connect Commenter settings area and click save. At this point your facebook app is all set up and ready to go.
Now we need to make some template changes. The MT Facebook Connect Commenters plugin comes with a template example that does work but it really depends on your current blogs setup. The templates I will be discussing are for the Mid-century template set but can be adapted for other styles as well. Just be sure to compare templates carefully and make frequent backups.
(note: If you haven't checked out the mid century template set your missing out on some really great movable type features.)
The first template change is to simply add <$MTGreetFacebookCommenters$> to your html head template so that is included in your pages. This will call all of the necessary code to allow facebook connect users to sign in, pull userpic photos and names.
The next template change is a 2 part step and is very important for enabling the facebook commenters userpic to be included. First go to your main entry template and remove
onload="mtEntryOnLoad();" from the body tag as it will conflict with the facebook connect onload tag that is being used. Save your changes and next navigate go to your Comments template module and add this code in script tags.
Without this step you will not be able to pull facebook userpic photos and will instead just get the facebook default user pic which look like a question mark.You can add the code just above your form or at the very bottom. As long as it is not included in the body tag itself but rather inside the body it will not conflict with facebook connects onload action. View my comments template
For our final step we will need to edit the mid century Individual Comments template to include the code for facebook connect commenter userpic photo, link and name. There are a few ways of doing this depending on your blogs setup but in this case we do not need to edit our Userpic module as all the necessary code will be included here. View my Individual Comments Template
Great job, all that's left to do is publish your blog to view your changes. To see the plug-in in action you can sign in with facebook connect and post a comment.
Movable type Facebook Connect Commenters templates.