Gerren Design
Gerren Design
. This is the personal website of yours truly,Gerren Rabideau
. Im anIllustrator
,Coder
, and all arounduber-geek
. This is my little corner of the internet; I use it to showcase myillustration artwork
and myweb design
portfolio. By day I work full time as aweb designer
making the internet look better one page at a time, but by night I like topaint
.What do I paint you ask?
Mostly,
watercolor fantasy and sci-fi illustrations
, but I also dabble in editorial and digital work as well. Plus, I also keep a blog of whatever else I decide to write about;comic books, traveling, color theory, how much IE sucks
, etc...Powered by: Movable Type 4.34-en
Friends
- Jarring Thoughts
Neat Links
-
Make your own background patterns
-
FINALLY, REVENGE ON IE6!
-
Sea Monsters
-
neat T-shirt maker
-
Showbox Freelance
-
Sliding boxes
-
Blog Design Guide
-
William Turner
-
Type!
More Thoughts
- How to make custom Select Boxes
- Sherlock Holmes Movie
- The Sultan of Gamers
- Heffer-Weizen
- Breaking Bad
Previous Thoughts
- March 2010
- July 2009
- June 2009
- May 2009
- April 2009
- March 2009
- February 2009
- January 2009
- December 2008
- September 2008
- August 2008
- May 2008
- April 2008
- March 2008
- February 2008
- December 2007
- November 2007
- October 2007
- September 2007
March 2010 Archives
« July 2009 | Main
Getting connected like never before
With Movable Type, Xomment, and Facebook Connect
Long ago, in a website far, far away I downloaded and installed the Facebook Connect Commenters Plugin for Movable Type. I have to say, I was not impressed by it. Besides letting users log in and comment using their Facebook account it really doesn't leverage any of the other features of Facebook Connect. In particular, the Facebook Connect Commenters Plugin has a JavaScript file called signface.js, in which it looks like there is a half written script to post back to a user's wall. What's the point of that? Did someone just give up?
So, I set out to finish the Facebook Connect Commenters Plugin. I wanted FB users to be able to come to my site and comment without having Log in. I wanted comments to feel faster and closer mimic the comment system that Facebook uses. Lastly, and most importantly I wanted FB users to be able to quickly easily post their comments back to their Facebook wall like I did in the image below. If you want these things too, then today is your lucky day...
Download Xomment,
Facebook Connect Commenters,
and my MTXFB sample templates
Step #1 - Install the Xomment Plugin
The first thing we need to do is install a MT Plugin called Xomment. It's a really clean, stable Plugin written by Reed A. Cartwright . Xomment uses Jquery to ajaxify the MT commenting system. With Xomment installed your users won't have to refresh the page when they submit a comment. This is critical so that we can guarantee that user can post their comment to their Facebook wall without the page refreshing before they are finished.
I use Movable Type version 4.34-en with the Community Pack 1.62 and Professional Pack 1.3. When I installed Xomment 2.02 I didn't notice any version conflicts, so go ahead and install it:
Download the original Xomment Plugin
Unpack the files in MT. Refresh the Xomment templates. Add the following to your HTML Head template;
<mt:If name="feedback_template"><mt:IfCommentsActive>
<mt:SetVar name="do_xomment_head" value="1"/>
</mt:IfCommentsActive></mt:If>
<mt:If name="do_xomment_head">
<mt:Include module="Xomment Head" />
<mt:SetVar name="panel_size" value="10"/>
<mt:SetVar name="panel_static_list" value="1,-1"/>
<mt:Ignore>
<!-- Remove the ignore tags if you use jQuery elsewhere in your site. -->
<mt:Else>
<link rel="stylesheet" class="<$mt:StaticWebPath$>plugins/Xomment/smoothness/jquery-ui-1.7.min.css" type="text/css" media="screen" title="Smoothness" />
<script type="text/javascript" src="/img/spacer.gif">
<script type="text/javascript" src="/img/spacer.gif">
</mt:Ignore>
</mt:If>
Now open your Comments template and replace it with the following code. It is almost exactly the same as what is provided by Mr. Cartwright, except I've changed the form's onSubmit to this:>
<mt:ignore>
<!-- Display comments for the entry/page or commenting form if entry/page is accepting comments -->
</mt:ignore>
<MTIfCommentsActive>
<div id="comments">
<mt:ignore>
<!-- Display comments -->
</mt:ignore>
<mt:Include module="Xomment Panels"/>
<mt:ignore>
<!-- Display commenting form if entry/page is accepting comments -->
</mt:ignore>
<MTIfCommentsAccepted>
<div id="comments-open">
<h2>Leave a comment</h2>
<div>
<mt:ignore>
<!-- Display greeting for users if blog allows users to register locally -->
</mt:ignore>
<div id="comment-greeting"></div>
<form method="post" action="<$MTCGIPath$><$MTCommentScript$>" name="comments_form" id="comments-form"> <input type="hidden" name="static" value="1" />
<input type="hidden" name="entry_id" value="<$MTEntryID$>" />
<input type="hidden" name="__lang" value="<$MTBlogLanguage$>" />
<input type="hidden" name="parent_id" value="<$MTCommentParentID$>" id="comment-parent-id" />
<input type="hidden" name="armor" value="1" />
<input type="hidden" name="preview" value="" />
<input type="hidden" name="sid" value="" />
<div id="comments-open-data">
<div id="comment-form-name">
<label for="comment-author">Name</label>
<input id="comment-author" name="author" size="30" value="">
</div>
<div id="comment-form-email">
<label for="comment-email">Email Address</label>
<input id="comment-email" name="email" size="30" value="">
</div>
<div id="comment-form-url">
<label for="comment-url">URL</label>
<input id="comment-url" name="url" size="30" value="">
</div>
<div id="comment-form-remember-me">
<input type="checkbox" id="comment-bake-cookie" name="bakecookie">
<label for="comment-bake-cookie">Remember personal info?</label>
</div>
</div>
<div id="comment-form-reply" style="display:none">
<input type="checkbox" id="comment-reply" name="comment_reply" value="">
<label for="comment-reply" id="comment-reply-label"></label>
</div>
<div id="comments-open-text">
<label for="comment-text">Comments
<MTIfAllowCommentHTML>(You may use HTML tags for style)</MTIfAllowCommentHTML></label>
<textarea id="comment-text" name="text" rows="15" cols="50">
</div>
<div id="comments-open-captcha"></div>
<div id="comments-open-footer">
<input type="submit" accesskey="v" name="preview_button" id="comment-preview" value="Preview">
<input type="submit" accesskey="s" name="post" id="comment-submit" value="Submit" />
</div>
</form>
</div>
</div>
</MTIfCommentsAccepted>
</div>
</MTIfCommentsActive>
Replace the Comment Preview Template with this;
<div>
<mt:Include module="Comment Detail"/>
</div>
Replace your Comment Response template with this;
<mt:If name="comment_confirmation">
<div >
<mt:XommentPanels new_comments="1">
<mt:XommentPanelComments>
<$mt:Include module="Comment Detail"$>
</mt:XommentPanelComments>
</mt:XommentPanels>
</div>
<mt:Else name="comment_pending">
<div><div><p>
<span></span>
Your comment has been received and held for approval by the blog owner.
</p></div></div>
<mt:Else name="comment_error">
<div><div><p>
<span></span>
<strong>Your comment submission failed for the following reasons:</strong><br />
<$MT:ErrorMessage$>
</p></div></div>
</mt:If>
So far, we haven't done anything too diffrent from a normal Xomment installation, but now you'll have to update your Comment Detail template. If you don't have a Comment Detail template you can just create a new module template with that name (Xomment automatically looks for it). These updates are so that when a FB user comments it leaves behind his FB user pic instead of the normal default user pic. You can learn more about Publishing Comments with Userpics here. So replace your Comment Detail template with what I have below, or use what I have below to update any custom styling you may already have.
<div id="comment-<$mt:CommentID$>">
<div>
<div>
<divCommenterAuthType" eq="Facebook">comment-fb-<$MTCommenterUsername></mt:if>">
<mt:if tag="CommenterAuthType" eq="Facebook">
<a class="www.facebook.com/profile.php?id=<$MTCommenterUsername>"><img src="/img/spacer.gif">
<fb:profile-pic uid="<$MTCommenterUsername>" size="square" linked="true"><img src="/img/spacer.gif">
<mt:else>
<mt:if tag="CommenterAuthIconURL">
<a class="<$MTCommenterURL>"><img src="/img/spacer.gif">
</mt:if>
<img src="/img/spacer.gif">
</mt:if>
</div>
<div> <span>
<mt:if tag="CommenterAuthType" eq="Facebook">
By <span>
<fb:name uid="<$MTCommenterUsername>" linked="true" useyou="false"><a class="www.facebook.com/profile.php?id=<$MTCommenterUsername>" style="background: transparent;">
<$MTCommenterName>
</a></fb:name>
</span> on <a class="#comment-<$MTCommentID$>"><abbr title="<$MTCommentDate format_name="iso8601"$>">
<$MTCommentDate$>
</abbr></a></span>
<mt:else>
By <span>
<mt:if tag="CommenterURL"><a class="<mt:CommenterURL>">
<$MTCommentAuthor default_name="Anonymous" $>
</a>
<mt:else>
<mt:CommentAuthorLink default_name="Anonymous" show_email="0">
</mt:if>
</span> on <a class="#comment-<$MTCommentID$>"><abbr title="<$MTCommentDate format_name="iso8601"$>">
<$MTCommentDate$>
</abbr></a></span>
</mt:if>
</span> </div>
</div>
<div>
<$MTCommentBody$>
</div>
</div>
</div>
You should now have Xomment working on your site. On to step #2.
Hint #1
In Movable Type, under comment prefrences, make sure that your 'Commenting Policy' setting is set to 'Trusted commenters only'. Else, whenever you submit a comment it will return in an like 'limit/offset clause... blah, blah, blah'.
Hint #2
I obviously re-styled my comments, you can do the same, with Jquery UI Themes. Not everyone's CSS is going to be exactly the same, and if you can't tell I use a high customized CSS on my site so I really can't help anyone out and provide premade CSS for this.
Step #2 - Install the Facebook Connect Commenters Plugin
Facebook Connect Commenters Plugin
First off, don't bother clicking on the 'more info' link on this page... it just links to its self. Just download it and then unpack it into your MT directory. Now you can go to this Github page and follow the normal install instructions, but this didn't really work all that well for me. I'll walk you through what I have on my Entry template in step 4.
Step #3 - Create a FaceBook Connect Application
This is a little confusing, so I'm going to walk you through it with a few pictures. First, go to the Facebook app developers page.
Click on Set up a New Application. Give it a name; it will be visible to users, so make it a good one. Click on agree, and then on continue.
On the Basic tab, fill out the following fields; Application Name, Description, upload an Icon, Developer Contact Email, and User support address.
I've noticed that Facebook doesn't always remember changes if you just skip from tab to tab. So, click save changes, and then click on edit setting again. Now go to the Connect tab on the left.
Fill out your Connect URL and add a Facebook Connect Logo. Hit Save Changes again. That is it, that is all you need to do for a connect application. All of the other stuff is for more complex apps that run on Facebook itself. So, copy your API Key, you are going to need that again in a minute
Step #4 - Add my script to tie it all together
first open up mt.js, and go down to line 210. Rplace the current mtEscapeJS and mtUnescapeJS fuctions with the ones I have below. This is just to ensure that anything that runs through this script is treated as a string.
function mtEscapeJS(s) {
var str = s+'';
var ns = str.replace(/'/g, "'");
return ns;
}
function mtUnescapeJS(s) {
var str = s+'';
var ns = str.replace(/'/g, "'");
return ns;
}
Create a new module template called 'FBcomment', this is simply going to hold the content we are going to insert into the DOM when the user is logged in with FB. Because it is going to be injected with Javascript make sure it doesn't have any " characters in it. This is injected into the #comment-greeting div.
<div style='position: static; float: left; clear: right; %; margin-bottom: 20px; margin-top: 10px;'>"
+ "<div style='position: static; float: left; px; px;'>"
+ "<fb:profile-pic uid=loggedinuser facebook-logo=true size=square></fb:profile-pic></div>"
+ "<span style='display: block;'>Welcome, <fb:name uid=loggedinuser useyou=false></fb:name>."
+ " You are signed in with your Facebook account."
//this is the link for logging out of FB and MT at the same time
+ " <a class='#'>
+ "</span><span style='display: block; margin-top: 10px;'>"
+ "<input type='checkbox' name='publish_feed' id='publish_feed' value='1' checked='true' />publish this comment on facebook"
+ "</span></div>
Create a new template module called 'MTXFB' with the following code, making sure to update the varibles at the top. Most of them it doesn't matter what info you use, but the first one, apID, is very important. make sure you set apID to your FB connect app's API Key
<script type="text/javascript">
<!--
var apID="yourAppIdNumber";
var xdR="<$mt:StaticWebPath$>plugins/FacebookCommenters/xd_receiver.html";
var BlogName="<$mt:BlogName$>";
var EntryTitle="<$mt:EntryTitle escape='js'$>";
var EntryPermalink="<$mt:EntryPermalink escape='js'$>";
var Description="I use a special custom tag for this";
var PostText="Read the Article"
var PromptText = "Spread the word"
var bID="<$mt:blogID$>";
var eID="<$mt:EntryID$>";
function FBcallback(y) {
//this is only needed because I couldn't ge the return to work inside the FB.Connect.streamPublish
return mtCommentOnSubmit(y);
}
function postToWall(x) {
FB.Bootstrap.requireFeatures(["Connect", "XFBML"], function() {
if (document.getElementById('publish_feed') !== null) {
if (document.getElementById('publish_feed').checked == true) {
var commentText = document.getElementById('comment-text').value;
var attachment = {
"name" : BlogName +": " + EntryTitle,
"href" : EntryPermalink,
"description" : Description};
var actionLinks = [ {
"text" : PostText,
"href" : EntryPermalink}
];
var umPrompt = PromptText;
//streamPublish(String user_message, Object attachment, Object action_links, String target_id, String user_message_prompt, Function callback, Boolean auto_publish, String actor_id)
FB.Facebook.init(apID, xdR); FB.Connect.streamPublish( commentText, attachment, actionLinks, null, umPrompt, FBcallback(x) ); }
}
else {
//this submits the comment to MT normally
return mtCommentOnSubmit(x); }
}
);}
function dualLogOut() {
FB.Connect.logout(function() { //this signs the user out of FB
mtSignOut( eID ); } //this signs the user out of MT
);
mtShow('comments-open-data'); //this opens the name/email comments
};
function facebook_onload() {
var viewerId = FB.Connect.get_loggedInUser();
var u = mtGetUser();
var loggedinMT = u && u.is_authenticated ? true : false;
//this is the content to replace on page load, and what to replace it with.
var user_box = document.getElementById("comment-greeting");
user_box.innerHTML = "<$mt:Include module = 'FBcomment' $>";
//this hides the name/email fields
mtHide('comments-open-data');
function autoLogin() {
if (loggedinMT == true) {
//if user is logged into MT already then do nothing
return false;
} else {
function createbr (brName, width, height) {
var br;
if (document.createElement && (br =
document.createElement('br'))) {
br.name = br.id = brName;
br.width = width;
br.height = height;
br.style.border = 0+"px";
br.src = 'about:blank';
br.scrolling = 'no';
document.body.appendChild(br);
}
return br;
}
function createFbFrame () {
//this is needed for auto login- it creates an br with the users FB info and then submits it
var brCon = "<html><body>"
+ "<form id='facebook-signin-form' method='post' action='<$mt:CGIPath$><$mt:CommentScript$>'>"
+ "<input type='hidden' name='__mode' value='login_external'>"
+ "<input type='hidden' name='blog_id' value='"+ bID +"'>"
+ "<input type='hidden' name='entry_id' value='"+ eID +"' >"
+ "<input type='hidden' name='key' value='Facebook'>"
+ "<input type='hidden' name='facebook_id' id='facebook-signin-id-input'>"
+ "<input type='hidden' name='facebook_nick' id='facebook-signin-nick-input'>"
+ "<input type='hidden' name='facebook_url' id='facebook-signin-url-input'><\/form>"
+ "<\/body><\/html>";
var br = createbr ('fbFrame', 1, 1);
if (br) {
var brDoc;
if (br.contentDocument) {
brDoc = br.contentDocument;
}
else if (br.contentWindow) {
brDoc = br.contentWindow.document;
}
else if (window.frames[br.name]) {
brDoc = window.frames[br.name].document;
}
if (brDoc) {
brDoc.open();
brDoc.write(brCon);
var viewerId = FB.Connect.get_loggedInUser();
brDoc.getElementById('facebook-signin-id-input').setAttribute('value', viewerId);
brDoc.getElementById('facebook-signin-url-input').setAttribute('value', 'www.facebook.com/profile.php?id=' + viewerId);
FB.Facebook.apiClient.users_getInfo(viewerId, ['first_name,pic_square'], function (x) {
if (x[0] && x[0]['first_name']) {
var nickname = x[0]['first_name'];
brDoc.getElementById('facebook-signin-nick-input').setAttribute('value', nickname);
}
});
brDoc.getElementById('facebook-signin-form').submit();
brDoc.close();
}
}
}
createFbFrame();
}
}
autoLogin();
//this parses out the FB tags, it's a must have.
FB.XFBML.Host.parseDomTree();
};
//<!--
</script>
<script type="text/javascript" src="/img/spacer.gif">
Now open your Entry Template make the following changes:
change your HTML tag to <html xmlns="www.w3.org/1999/xhtml" xmlns:fb="www.facebook.com/2008/fbml">
replace <mt:GreetFacebookCommenters> with <$mt:Include module="MTXFB"$>
Add the following to the bottom of the page;
<script type="text/javascript">
<!--
FB.init(apID,xdR, {"ifUserConnected" : facebook_onload });
//-->
</script>
That should be it. MTXFB should now be working. When you commment on your site it should now bring up an FB popup like the one above. If you've liked this post, and you enjoy this script, then please pass it on. Sign into Facebook and then comeback here and leave a comment using MTXFB!
Download Xomment,
Facebook Connect Commenters,
and my MTXFB sample templates
Hint #3
You can override any of Facebook's CSS by adding inline CSS at the very bottom of your page.
Sample:
<style type="text/css">
.FB_Link {color: #990000 !important;}
</style>