« prev next »

Facebook Connect with MovableType

I did a quick survey about How Many of My Readers Use Facebook and the initial response was quite possitive. It seems I have a lot of readers who are on Facebook already, no matter it is just random, or rare use, or daily use.

Then I believe I need to integrate Facebook Connect with MovableType. I search in Google about the term "Facebook Connect MovableType" but didn't see any plugin. It should be a very popular plugin if someone create one.

So it seems I need to do a little bit JavaScript work to get the application working. It is very simple, and I have already created a working version in the first 30 minutes. I will take some time in the next few days (or weeks, just in case I don't have the time, and don't want to set the expection high), I will implement Facebook Connect on this blog, and share the exact steps here to help other MovableType bloggers out there. If possible, I would even want to create a plugin so you can easily put the code into a plugin - seems to far from where I want to archive, but I will give it a try.

So stay tuned about my implementation of Facebook Connect on my site.

Update December 9, 2008

Now, I have implemented Facebook Connect on MovableType. Although I don't have a plugin for you to use yet, you can follow these not-so-simple steps to enable it on your MovableType site.

  1. Follow the steps outlined in Trying Out Facebook Connect. More specifically, follow step 1 (which includes 8 smaller steps), and step 2 to get your API key, and set the call back folder. I set it to http://home.wangjianshuo.com/scripts/facebook folder. Don't need to do step 3 since we will do it together later.
  2. Login into MovableType console, point to Design menu, and click "Template".
  3. Click "Individual Entry Archive" to start to edit your Individual Enntry Archives. Since everyone, especially advanced MovableType users, like you, may have different individual archive files, and many include modules, there is no uniformed way to explain what to do the next. Let me just use mine as an example.
  4. Change the html root tag from
    <html xmlns="http://www.w3.org/1999/xhtml">
    to
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

  5. Locate the section where user input Name, Email, and URL, and enclose it with the code provided below. Please note: you may find it in other places. The red parts are added. They are mainly for format reason, since the only payload is the Facebook login button (I noted with bold and red)

    <table width="80%" cellpadding="0" cellspacing="0">
    <tr><td valign="top" id="authorInfo">

    Name: <br />
    <input name="author" /><br />
    Email Address: (will not show)<br />
    <input name="email" /><br />
    URL: (optional)<br />
    <input name="url" /><br />
    </td><td width="50%" align="right" valign="top" style="border-left:1px solid #336699">
    You can optionally sign in<br/> with your Facebook account.<br/>
    <fb:login-button autologoutlink="true" length="long"></fb:login-button>
    </td></tr></table>


  6. Paste the following script under the form section, ideally immediately before the MTIfCommentOpen closing tag. Before to replace the apiKey, and xdPath to your own.

    <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
    <script type="text/javascript">
          var apiKey = "655b6e2e042a5426d8f0b13dca4708fa";
    var xdPath = "/scripts/facebook/xd_receiver.htm";
          FB.init(apiKey, xdPath);
          FB_RequireFeatures(["Connect", "Api"], function() {
                      FB.Facebook.init("655b6e2e042a5426d8f0b13dca4708fa", xdPath);
                      FB.Facebook.get_sessionState().waitUntilReady(function(){
                                  FB.Facebook.apiClient.users_getInfo(new Array(FB.Facebook.apiClient.get_session().uid), ["name","proxied_email", "profile_url", "pic_small"], function(result, ex) {
                                              if(result.length > 0) {
                                                    document.comments_form.author.value = result[0].name;
                                                    document.comments_form.email.value = result[0].proxied_email;
                                                    document.comments_form.url.value = result[0].profile_url;
                                                    document.comments_form.author.readOnly = "readOnly";
                                                    document.comments_form.email.readOnly = "readOnly";
                                                    document.comments_form.url.readOnly = "readOnly";
                                                    var authorInfo = document.getElementById("authorInfo");
                                                    var img = document.createElement("img");
                                                    img.src = result[0].pic_small;
                                                    var td = document.createElement("td");
                                                    td.appendChild(img);
                                                    authorInfo.parentNode.insertBefore(td, authorInfo);
                                              }                                    
                                        }
                                  );
                            }
                      );
                }
          );
    </script>

  7. Save your template and rebuild your individual page.

You should get something very similiar to my implementation below.

If you meet any problems, please feel free to let me know by posting in the comment form below. I would appreciate you sign in and use Facebook Connect identity.

by Jian Shuo Wang on December 7, 2008 under Projects

Related Entries: Projects
  1. jQuery + Baixing.com December 21, 2008
  2. Temporarily Removed Facebook Connect December 14, 2008
  3. FBML Sandbox of Facebook December 12, 2008
  4. Wangjianshuo's Blog Supports Facebook Now December 9, 2008
  5. Facebook Connect with MovableType December 7, 2008
  6. I Love JSON November 30, 2008
  7. My Friend Blogroll November 28, 2008
Comments

^-^ +U

Posted by: Michelle on December 9, 2008 1:24 PM

This is my first comment on this blog using Facebook Connect.

Posted by: Jian Shuo Wang on December 9, 2008 9:36 PM

This is the second one and hopefully, I get my photo displayed along with my comment.

Posted by: Jian Shuo Wang on December 9, 2008 10:57 PM

It seems it didn't work. Let me try the third time. Hopefule, it works this time.

Posted by: Jian Shuo Wang on December 9, 2008 10:59 PM

Wow. This works. Did you see the small photo along each of the comment I made? That is how it was supposed to work. Congratulations! Good Job! Jian Shuo.

Posted by: Jian Shuo Wang on December 9, 2008 11:01 PM

Wow! Well done!

Posted by: Michelle on December 10, 2008 1:16 AM

trying out this facebook

looks cool!

Posted by: Ian Brown on December 11, 2008 4:50 AM

Cool ! man!

Posted by: Robert Mao on December 11, 2008 6:26 PM

Is this down now? I don't see any Facebook Connect option . . .

Posted by: John Eckman on December 15, 2008 4:33 AM

Questa è una prova

Posted by: Domenico on January 22, 2009 7:27 PM

wow thx!!

Posted by: juno on January 28, 2009 8:43 PM

test, test

Posted by: test on February 19, 2009 10:39 AM

Finally I removed Facebook connect since it added no value (well, not much value for the reader community of this blog), and it make the system too complicated.

Posted by: Jian Shuo Wang on May 6, 2009 3:19 PM
Post a comment
Name:

Email Address: (will not show)

URL: (optional)

Comments:


It may take up to 30 seconds before the server returns a result. IP address recorded.
Remember my information?
<-- Please click POST only once
© 2001 - 2009 Jian Shuo Wang. All right reserved.