« Converting to PHP | Main | Closing Comments »

TypeKey Authentication for Comments

This tutorial is out of date. ~Elise March 9, 2007

Originally posted 9-28-04.

The ability to leave comments on other people's weblogs and accept comments on your own is one of the features that make blogs so compelling. Accepting comments on your blog however, can be like having an open house party where ill-behaved uninvited guests show up. TypeKey, a free service from Six Apart, can help you control who gets to comment on your weblog.

If you are setting up a new weblog in MT3.x, adding Typekey authentication is easy. You'll need to get a TypeKey token from TypeKey.com and select various comment settings in your weblog config preferences. If you have upgraded to MT3 from an earlier version of Movable Type and want to use TypeKey authentication on an existing weblog, that is quite a bit trickier. In addition to the steps already mentioned, you'll need to make several adjustments to your templates. If you are using MT2.661 or an earlier version of Movable Type, you'll have to upgrade to MT3 first, before you can take advantage of TypeKey.


1. Getting set up with TypeKey.

When you downloaded MT3, you registered with TypeKey to get your download. Use the username and password you used to get your MT3 download to log into your account at TypeKey.com. If you forgot your name and password, you can use your email address to recover your account information.

On your TypeKey Account Preferences page, near the bottom of the page is your Weblog Preferences. Your TypeKey token is displayed there. Copy this token someplace where you can find it later when you go to turn on TypeKey on your weblog. On your TypeKey Account Preferences page, write in the domain URL of your website in your Weblog Preferences section. You'll need to use the domain name (not with the directory) where MT is installed, followed by a trailing slash. For example, if the URL the shows the location of your mt.cgi file is:

http://www.example.com/mt/mt.cgi

then in TypeKey Account Preferences you would type:

http://www.example.com/

Save the changes and exit TypeKey.


2. Selecting the level of comment authentication and moderation you want.

comment_config-thumb
(click to view)

In your Movable Type weblog's Weblog Config Preferences page, there is a section on Comment Configuration. The set-up shown in the pop-up window shows a typical default setting. These boxes checked as shown allow anyone to comment on your site as long as they give name and email information.

If you select Enable Unregistered Comment Moderation then all comments from people who have not registered with TypeKey will have to have their comments approved by you first, before the comments will post publicly. Requiring moderation is the highest degree of control you can have on your comments.

If you would like to moderate unregistered comments, but let those who have signed in with TypeKey have their comments post immediately, without your checking of the comments first, then check Accept Comments from Registered Visitors and the Automatically Approve Registered Commenters.

If you only want to accept comments from people who have logged in with TypeKey, and allow no unregistered comments, uncheck Accept Comments from Unregistered Visitors and select Accept Comments from Registered Visitors. If you want to approve of a comment the first time a registered user comments on your weblog, letting them make subsequent comments without moderation, make sure Automatically Approve Registered Commenters is unchecked.

I recommend checking the E-mail New Comments box in the comments section of your weblog config preferences. This way you'll know if someone posts a spam comment to your weblog that the Blacklist hasn't caught.

Save your configuration settings. If this is a new MT3 weblog, you can rebuild your site. If you have upgraded your weblog to MT3 from an earlier version of Movable Type, hold off on rebuilding the site; you have several more changes to make.

If you have a new MT3 weblog, skip ahead to step 4 to turn on TypeKey.


3. Setting up TypeKey if you have upgraded to MT3

If you have upgraded to MT3 from MT2.661, in addition to the steps listed above you need to make several adjustments to different templates.

a. Bring your comments inline.

In the default MT2.661 templates, the MT main index template links to a comment popup script with the Comments (n) link. Find the code in your Main Index template that invokes the comment popup:

<a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>

Replace that code with the following:

<a href="<$MTEntryPermalink$>#comments">Comments (<$MTEntryCommentCount$>)</a>

and link to the comments section of the individual entry. Make sure you have selected Individual Archive Type as a preferred archive type in you Weblog Configuration Archive Files section.

You can also remove the Javascript at the top of the Main Index template that invokes the comment popup.

function OpenComments (c) { window.open(c, 'comments', 'width=480,height=480,scrollbars=yes,status=yes'); }

Save and rebuild your Main Index Template.

b. Changes to the Individual Entry Archive Template

First, make a copy of your Individual Entry Archive template. That way, if something goes wrong you can easily replace your original code.

Start at the top. Replace the entire Javascript cookie section, including setCookie, getCookie, deleteCookie, fixDate, rememberMe, and forgetMe with the new Javascript section covering the same functions from the new MT3 Individual Entry Archive template listed on the Movable Type default templates page.

Next you need to replace all of the code between <MTComments> and </MTComments> and all of the code between <MTEntryIfCommentsOpen> and </MTEntryIfCommentsOpen> with new code from between those same tags from the new MT3 Individual Entry Archive template.

If you have upgraded to MT3 from MT2.661, and you have not changed your template code to reflect the new MT3 div and class tags, the new comment code in the MT3 templates is going to make your entry page look weird as your stylesheet doesn't recognize the new div and class tags. Donald over at Anzi Design has put together an extensive tutorial on migrating your MT2.x blog to MT3. Around two thirds down the tutorial page, there is a whole section of replacement code for both the <MTComments> and the <MTEntryIfCommentsOpen> sections. I have used this code to replace sections in my MT2.661 formatted blogs and they work fine. I suggest this course if your templates still reflect the MT2.661 id and class tags.

Save your template.

c. Adjust the Comment Pending, Comment Preview, and Comment Error templates.

The upgrade process from MT2.661 to MT3 should have created and populated a new template, the Comment Pending template. Check to make sure. If the Comment Pending template is empty, go to Movable Type default templates page to copy and paste the appropriate code into your template file.

The new Comment Pending, Comment Preview, and Comment Error templates that have the code in them that incorporate Typekey are all using MT3 default div and style tags.

If you are using a stylesheet that reflects MT3 div id and class tags, you can go ahead and copy and paste the Comment Preview and Comment Error templates from Movable Type default templates page into your templates, overriding what is already there.

If you upgraded your MT2.661 weblog without changing your template and stylesheet to reflect the new div IDs and classes, when you copy and paste the new comment templates, over-riding your existing templates, the resulting pages will not render with the correct style. What to do? You can either 1. copy and paste the new templates from Movable Type replacing your existing comment templates, then comb through the code and replace the MT3 ID and class tags with the MT2.661 ID and class tags or 2. figure out what are the additional elements in the new templates and add those to your existing comment templates. Because I have made no changes to my 2.661 weblog comment templates, it's a lot easier to just copy over the new templates and change the div and style tags. (The Anzi Design tutorial also has a section on the comment templates, which shows what to do if you are using MT2.661 tags.)

Save your templates.

d. Make adjustments to your stylesheet.

If you changed your MT2.661 weblog's stylesheet to reflect the new MT3 tags, you may still be missing a couple of elements to make your comments section look like it should. Check your stylesheet. If it does not have the following elements, add them.

#comment-data { float: left; width: 180px; padding-right: 15px; margin-right: 15px; text-align: left; border-right: 1px dotted #BBB; }

textarea[id="comment-text"] {
width: 80%;
}

.commenter-profile img {
vertical-align: middle;
border-width: 0;
}

Save your template.

4. Set up Remote Authentication.

On the Main Menu for MT, open your user profile and enter your TypeKey site token and the TypeKey username. Save your profile.


5. Turn on TypeKey.

To go live with TypeKey, take the TypeKey token you copied in Step 1 and paste it into your Weblog Config Preferences Comments section like so (using your own unique token, not the fake one shown):

typekey_token.gif

You may need to first select Accept Comments from Registered Visitors to see the Typekey Token window.

Save your preferences and rebuild your site.

Links:
Six Apart's Tutorial on Typekey
Anzi Design - Migrating your MT2.x blog to MT3
Examining the template changes - useful advice from the MT knowledge base. You must have a paid installation to access the knowledge base.
MT Manual section on Comment Configuration
MT Manual Section on Comment Moderation
Still want comment popups in MT3 with TypeKey? It's a bit complicated, but Tweezerman shows the way in this MT Forums thread.