First, as an example go check out a post of mine demonstrating my Facebook profile picture automatically being inserted into the comments:
Related Entries with Images & Recent Assets Linked to Entries
Feel free to post a comment using the Sign In link. But you have to be signed into Facebook first to see the Sign In link. (more on that bug later)
Bug #1: Firefox works, but Internet Explorer doesn't work. The Facebook blue sign in button is missing under Sign In link & IE doesn't pull in Facebook profile pictures.
Screenshot:
Solution: Internet Explorer (IE) is very finicky when it comes to parsing XFBML tags requiring you to explicitly add the proper namespace into your <html> tag.
Per the Facebook FAQ: http://wiki.developers.facebook.com/index.php/Facebook_Connect_FAQ
Q: My browser isn't parsing any XFBML tags. Why?
A: You need to declare Facebook's XML namespace. For each of your Connect HTML pages, use the following as in your <html> tag:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
So basically I needed the MT logon mt-comments.cgi script to have xmlns:fb="http://www.facebook.com/2008/fbml" added to the <html> tag.Of course the mt-comments.cgi script doesn't have this code directly in the script since it's a dynamic Perl script. So I had to go searching for how mt-comments.cgi dynamically generates the <html> tag and add the Facebook namespace.
I used 'grep' from a Linux shell to search for where MT generates the <html namespace> code for the logon page. Searching simply for "<html" resulted in way too many possible files.
Fortunately, I noticed some fairly unique text within the generated mt-comments.cgi script. Namely, " <meta http-equiv=". While other MT files have "<meta http-equiv=" in them, nearly all of them didn't have the 4 padded spaces in front.
So I ran this from the command shell:
/var/www/cgi-bin/mt>grep " <meta http-equiv=" * -rl
and only a few files were returned. Using the 'vi' editor I edited each one and finally discovered the file I needed to change, namely this one:
[your MT directory]/tmpl/cms/include/chromeless_header.tmpl file
Simply change it from:
<html>
To:
<html xmlns:fb="http://www.facebook.com/2008/fbml">
Now Internet Explorer will work! Problem solved. No need to rebuild blog since the login is creating via a dynamic .cgi script.
Make sure to also add this namespace tag to your Entry/Individual Archives template. Otherwise, IE won't parse the Facebook tags to pull Facebook profile pictures when viewing the web page.
Bug #2: jquery Javascript errors causing Facebook Connect plugin to not work properly. (Note: /mt-static/plugins/FacebookCommenters/signface.js requires the jquery.js file!)
For some reason MT forgot to include jquery.js in the plugin.
Solution:
I had to add this:
<script type="text/javascript" src="http://blog.tmcnet.com/inc/jquery.js"></script> to:
/var/www/cgi-bin/mt/plugins/FacebookCommenters/tmpl/greets.tmpl
and rebuilt my blog. Also need to put the jquery file on your Movable Type server. You can google for jquery.js or just grab my copy.
Bug #3: The Disappearing Sign In link for Movable Type just above the Comment Form
Symptom: When not signed into Facebook, any MT blog using the Facebook Connect plugin will NOT display the Sign In link above the Comment Form. When Signed into Facebook, the Sign In link appears/works.
I'm not the only MT blogger encountering this issue. I've had several email interactions with Ken Edwards about this bug.
His MT blog also has the disappearing Sign In link. Let me show you...Choose either of these video files which are screen captures of my PC's Firefox browser in action showing this Sign In bug:.
movable-type-facebook.mov
movabletype-fb-bug.avi
Video Explanation:
1) I'm not Signed into Facebook
2) I loaded his blog page - http://blogs.bgviews.com/master/community/2009/01/i_think_fbc_works/ and the Sign In button is NOT there
3) I switch tabs to Facebook and sign into Facebook
4) I switch tabs back to his blog page, click on the URL address bar and hit enter to refresh the page
5) Now the Sign In link is magically there.
Certainly requiring a commenter to be logged onto Facebook in order to "see" the Sign In link is obviously a serious bug.
I did a little bit more digging and discovered in my Firefox Error Console that I was getting an error on line 8 of signface.js as seen below. I get this same error on my blog as well as Ken Edwards' blog:
So what's in line 8 of signface?
Line 7: // Get the current logged in user
Line 8: var viewerId = FB.Facebook.apiClient.get_session().uid;
Obviously, it says 'get_session() is null' because I'm not signed into Facebook. I'm guessing assigning a 'null' value to a variable is not allowed in Javascript. Thus, you MUST be signed into Facebook or else you get this Javascript 'null' error, which apparently causes the Sign In link to fail to load on MovableType entry web pages. There needs to be some sort of 'null' condition testing so the Javascript doesn't 'bomb' and cause the Sign In link to fail.
Both Ken and I are in discussions with one of Sixapart's developers to see if we can resolve this bug. Stay tuned... In the meantime, let me know if any of these tips helped you out by posting a comment.
