Facebook Connect Commenters

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

Facebook Connect Commenter

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.

Facebook Connect

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.

mtAttachEvent("load", mtEntryOnLoad);
mtAttachEvent("unload", mtEntryOnUnload);

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.

  24 comments for “Facebook Connect Commenters

  1. Toni
    April 30, 2009 at 9:23 pm

    Hi Dylan,
    I absolutely love what you have done here with the mid-centure template set. It’s great. It’s also one of the few sites I’ve found that the Facebook Connect login actually works properly. I’ve been quite slack with my site this year (Babble On) but I think you’ve inspired me to have a fresh look. As for the problem you have with the image gallery, I can’t help you. My javascript code is very basic conpared to yours, perhaps that’s why I have no problems with it. Your gallery works fine when you click through it slowly.

  2. Dylan Wagstaff
    Dylan Wagstaff
    May 1, 2009 at 9:28 am

    Hi Toni,
    Thank you and thanks for the reply. I enjoy playing around with movable type as well. I have bumped into your blog Babble On a few times while searching for various things and have always enjoyed it.

  3. Frédéric
    May 3, 2009 at 4:26 am

    Great howto that finally allowed me to implement facebook connect to my blog. I only have 1 issue left: the FB userpic shows up as a question mark… any idea what may cause this error?
    (you can find my blog at http://druppels.be/ )

  4. Dylan Wagstaff
    May 3, 2009 at 6:59 am

    Hi Frédéric,
    The question mark facebook picture is caused by a javascript conflict that’s happening somewhere along the line. In my case it was the body onload tag.
    Oh snap …Facebook Connect Commenter Plugin requires jquery. The plugin does include it but has it commented out for some reason. I did not think of this earlier as I already had jquery included.
    Possible Solution: First move your Google Analytic code to the bottom of your page just above the ending body tag as suggested by Google to ensure no conflict.
    Next include jquery in your html head above all the other scripts but below your css. I suggest using google ajax api which serves jquery up fast and gziped.
    If that doesn’t solve the problem I would temporarily remove additional scripts from the page until you find the culprit as it is most defiantly a java script onload conflict which are normally solved my moving scripts that don’t need to be in the html head into the body of the page.

  5. Frédéric
    May 3, 2009 at 7:47 am

    Hi Dylan,
    thx! It works — only had to fool around with what script to call first.
    So the picture shows up now.
    But now I notice that it doesn’t publicize the comment itself as a newsitem on FB. Any suggestions on that?

  6. Dylan Wagstaff
    May 3, 2009 at 8:53 am

    Hi, Good to hear you got that sorted.
    That particualr function is still a bit of a mystery to me and I plan to update my post once I get it thoroughly figured out. I can however tell you what I did to get it to work.
    “Community members can advertise their participation on your site using the Facebook News Feed, driving traffic and new visitors to your site.” According to facebook and movable type this means that users manually input their comments feed into their Blog/Rss news feed under your facebook wall settings just like youtube and such, this in turn shows up under notes. That means you need to provide a user comment feed. you can see I have done that right under your comment by your user-name. This whole process seems unclear and cumbersome no?
    It seems there is already a built in auto submit back for facebook users that pops up after submitting a comment. I first noticed the pop up to submit your comment back to facebook as a recent action when playing around with MT Motion. Unfortunately after many failed attempts and broken installs I never did get it to work with Mid century’s current javascript. But it worked with Motions.
    I took a look and noticed the javascript was very similar, so I simply removed mid centurys javascript copied all 3 of motions javascript files into one file made a small adjustment (moved onload calls into body), included it in my template and prayed. Voila the facebook pop-up to submit comment started to work. You can view the slightly adjusted motion java script template I am using instead of the standard one here (note: not for the faint of heart backup current files!) 🙂
    I am not sure if this part is necessary to make it work but I also added my same MT Blog Url as before to the Account Preview URL in the facebook app connect tab. I also added my same mt blog url to the Post-Authorize Callback URL, Post-Remove Callback URL under the authentication tab, and Information Update Callback URL in the profiles tab as well as the Profile Publisher info just below which includes Publish Text(app name), Publish Callback URL, and Self-Publish Text(app name), Self-Publish Callback URL.

  7. Michael
    May 3, 2009 at 10:46 am

    Thanks for the How To.
    I seem to have gotten it somewhat working (commenter names now link to Facebook profiles), but pictures are still not showing up. I think it may be related to this error that I receive when saving the Individual Comment template:
    “One or more errors were found in included template module (Userpic).
    MTCommunityScrip at line 3 is unrecognized.
    MTCommunityScript at line 9 is unrecognized.
    MTCommunityScript at line 58 is unrecognized.”
    I also am getting a JS error that mtEntryOnUnload is not defined.
    Any ideas?
    Thanks!
    [mikey]
    http://thehighhat.org/

  8. Dylan Wagstaff
    May 3, 2009 at 11:18 am

    Hi yes you are probably using a different version of mt javascript or do not have the community addon pack installed. You can find and change the MTCommunityScript call in the userpic module to MTCommentScript. You can also remove the tag mtEntryOnUnload. However this may not solve everything though.
    I would 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. This will include all the latest files and javascript along with a host of new community features. MT Motion! 🙂

  9. Michael
    May 3, 2009 at 12:38 pm

    Thanks. The upgrade did resolve most of the errors I was seeing. However, user pics are still not displaying. I’ll continue to troubleshoot and hopefully find the culprit.
    Again, thank you for posting such a helpful article!
    [mikey]

  10. Michael
    May 3, 2009 at 8:22 pm

    Well, that worked with a little more additional tweaking. Turns out that the mid-century screen.css was holding me back. Once I switched this:
    .comment .user-pic {
    border:1px solid #DDDDD9;
    display:none;
    float:left;
    padding:2px;
    }
    To this:
    .comment .user-pic {
    padding: 2px;
    display: block;
    }
    Everything worked out fine.
    Now, if only the comments would actually post to the mini-feed. 8)
    Thanks again for all of your help!

  11. Justin
    July 2, 2009 at 3:04 pm

    Hi.
    One problem I’m having is that facebook user pics and names are only pulled in if I’ve logged in through Facebook Connect through my blog. If I log out, or log in through another method, I get either the question mark pic or the default pic. It also replaces the comment author’s name with “Facebook User.”
    I have though, managed to get it to post online stories to my Facebook profiles.
    I included jQuery in my HTML head. Any ideas what could be wrong?

  12. Michelle
    July 3, 2009 at 7:58 am

    Hi, I am having the same problem. It seems to be a bug is within facebook commenters API which could be related to individual user privacy settings. I took a look over at the facebook developer forum
    ( http://wiki.developers.facebook.com/index.php/Talk:Fb:profile-pic )
    where there were not a whole lot of answers but it seems we are not alone.

  13. Justin
    July 3, 2009 at 3:05 pm

    It’s weird, because even on this site — all the profile photos show up — except my own. When I look in Firebug, the query being sent to Facebook returns all the users, but returns NULL for me.
    Then when I log in, it works. My picture is there.
    On my own site, it’s hit or miss. The pictures never show unless I’m logged in. Then, often, mine doesn’t show up. Or half will show and half don’t. Then I reload the page and the pictures are there. It just seems that Facebook randomly returns null values for different profiles. I just don’t know enough about how MT’s plugin works to figure out what’s going on.

  14. Dylan Wagstaff
    July 4, 2009 at 7:25 am

    This is very strange. I would agree that it is one of the many bugs within facebook connect. It most likely has to do with the user’s privacy settings (if their profile stuff is marked as “friends only” and you’re not a friend, for example than access is not given.) This seems to make sense for weather I am logged in or not I cannot see your user pic.

  15. Steve
    July 7, 2009 at 4:21 pm

    I finally got this working on my pop culture blog – yesbutnobutyes.com – with the great help you provide here, but with one extra fix. I too was getting the problem of images not showing up. Then I read the hint elsewhere that even if you have followed all the MT instructions exactly, you still have to add the standard FB Connect script line AFTER all the comments, the one that defines your app key and the location of the xd_receiver. Once I put that in, everything worked.
    (Take a look at one of my interior pages and you’ll see what I mean – it’s just above the div I name ‘bothsidebars”)
    So now, people can log in on my site via Facebook, it brings in their profile name and image. But no luck on getting it to post back to their own FB profile as a one line story, so any help anyone can give on that would be greatly appreciated.
    To the user who doesn’t see their own picture (above) Dylan’s right, that’s a function of your Facebook privacy settings being too tight. Only YOU can see you, and that means when you are logged in. Relax your FB privacy settings and see if that fixes it..

  16. Dylan Wagstaff
    Dylan Wagstaff
    July 8, 2009 at 7:32 am

    Hi Steve, thanks for sharing.
    This Is what I did to auto post stories back to facebook. First make sure there are no javascript conflicts going on especially within the comment cgi post function of the MT blog. Usually avoided by moving unnecessary script calls from the head into the page body.
    This is where it gets a bit fuzzy but I believe to have comments posted back to facebook we need to register a template bundle ID. Take a look at the Feed Template Console (if you already have some registerd templates just use those).
    This will build a bundle of Feed story templates, containing a single one line template. It also registers them on Facebook and responds with a template bundle ID that identifies your template bundle which you place at the bottom of your facebook application connect page area for approval.

  17. Jay
    July 29, 2009 at 8:09 pm

    Hi Dylan,
    I’m wondering how you managed to find v1.1 of the Facebook Commenters plug-in? (Your screenshots show 1.1)
    Whenever I download the plug-in from
    http://plugins.movabletype.org/facebook-connect-commenters/
    I get v1.0.
    Thanks!
    Jay

  18. Dylan
    July 30, 2009 at 6:47 am

    Hi Jay,
    Grab the latest release of MT at http://www.movabletype.com/download/ and Facebook Connect version 1.1 is included within. If you haven’t already go for the community version which is now available.

  19. Benjamin
    September 2, 2009 at 10:19 am

    Anyone know if it’s possible to put the fb-connect button directly on the article? basically, I don’t want to send people to the login page and return authtenticated… thanks.

  20. Nicolas
    September 18, 2009 at 8:18 am

    I’d like to know how to do this too!

  21. Roy
    September 30, 2009 at 7:57 am

    This is really helpful – thanks!

  22. Roy
    September 30, 2009 at 7:59 am

    This is really helpful – thanks!

  23. Dai
    January 6, 2010 at 11:42 pm

    Great, it’s helpful

  24. November 15, 2012 at 4:36 pm

    good

Comments are closed.