101 TypePad Hacks

TypePad Beta Team?

We got an email from TypePad, telling us that we're some of their "favorite people" (us and probably a thousand other people) - the TypePad Beta team, and that there was some big news coming soon for a new version of TypePad.

It seems a little strange, since we've never gotten an email about any Beta testing previously, and we didn't even know there was a new version coming down the pike.  As one of the sites that really gets into the nitty gritty of TypePad customization and shoing people how to make the most of the features available, we mistakenly thought we might actually have some real role to play in the direction of future features and testing.

Fail.

The TypePad Scratch Pad - A Features "Wish List"

Over the course of 4+ years using TypePad, We've come across a lot of people who say, "I wish I could do 'X' in TypePad".

Instead of scattering all those thoughts and wishes across the vast blogosphere or leaving them in the vast emptiness between my ears, We're going to use this post and the comments for this post as our TypePad Scratch Pad - an ongoing thought trail of things we (and our readers) want to be able to do with the blogging platform.

We think it will be cool if someone had a functionality wish, and other readers either came up with solutions, or the folks at Six Apart took the ideas and put the best ones into the product.

Another New TypePad Feature - Long URLs for Individual Archives

We're really liking the new TypePad platform. 

New feature:

URLs that don't cut off the title of your post.  Sweet.

5 Things We Like About TypePad Connect Comments

TypePad came out with a new cross-platform commenting system for blogs.  We here at 101 TypePad Hacks like it A LOT.  It's such a great improvement over the standard comment system.  Not that the old system was or is bad - it was functional and performed well.

But the new TypePad Connect...  Very cool!

Here's our list of things we like about TypePad Connect:

1.  Threaded Comments - Yes, now you reply to other comment authors and generate a much better conversation in your posts' comments.  No more addressing authors from 12 comments ago by using a Twitter-like @Author salutation so that readers understand who the heck you're replying to.

2.  Cross Platform Availability! - TypePad Connect works on Movable Type, TypePad, Blogger, Tumblr, and WordPress.  One comment system can tie the majority of blogs together.  Think of the tons of meta-data that can be derived!  Plus, if you're on Blogger, and your sick of your comments system being screwed up for 2 weeks, you have an alternative.

3.  Centralized User Profiles - Make your profile once, use it everywhere TypePad Connect is installed! Upload a picture, create a bio, whatever.  It's all in one place, and you control it.  No multiple log-ins or passwords to remember, or feeling like you're providing personal information to a blog you don't really know that well.  You're in control, so no worries.  There's even the ability to have a cross-blog RSS feed of individual comment authors' comments.

4.  Open ID - The cross platform authentication scheme, brought to you by the folks at Six Apart, works with TypePad Connect.  If you have a blog on another blogging service like Blogger, all you need to do is provide your blog's URL to TypePad Connect in order to create a Connect account.  Connect, using Open ID, will have Blogger authenticate your password, and you're in! Again, no multiple passwords to remember.

5.  Styling Comments - Now, you can style your comments in a variety of ways.  Through CSS, you can have different styles for the first and last comment on a post, even numbered comments, comments made by the blog's owner, etc.  Note that if you can style even numbered comments differently, that implies you can have a default style for odd numbered comments.   

What are we missing?  Are there other cool things you can do with TypePad Connect?

Google AdSense Ads Between Posts in TypePad

The other day, we wrote about how to insert Google AdSense ad units between posts within the MTEntries loop in Movable Type 4.2.  You can do the same thing in TypePad, but the code is a little different.

Take a look at your Main Index template within the Advanced Template design of your TypePad blog.  For the content area of your blog, you'll see a template module called "entry-list-sticky" is pulled into the Main Index with this line of code:

<$MTWeblogIncliudeModule module="entry-list-sticky"$>

You're going to need to edit this module. The default code for this module looks like this:

<!-- entries --> <MTBlogIfHasSticky> <MTBlogStickyEntry> <div class="entry-featured entry" id="entry-<$MTEntryID$>"> <MTWeblogPostIfShow field="post_title"> <h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3> </MTWeblogPostIfShow> <div class="entry-content"> <div class="entry-body"> <$MTEntryBody$> </div> <MTEntryIfExtended> <p class="entry-more-link"> <a href="<$MTEntryPermalink$>#more"><$MTTrans phrase="Continue reading"$> "<$MTEntryTitle$>" »</a> </p> </MTEntryIfExtended> <MTFeedflareIfEnabled> <form class="at-scripttag" id="saved-script-0"></form> </MTFeedflareIfEnabled> </div> <div class="entry-footer"> <p class="entry-footer-info"> <$MTEntryPostFooter$> <MTEntryIfAllowComments> <MTIfNonEmpty tag="MTEntryPostFooter"><span class="separator">|</span></MTIfNonEmpty> <a href="<$MTEntryPermalink$>#comments"><$MTTrans phrase="Comments"$> (<$MTEntryCommentCount$>)</a> </MTEntryIfAllowComments> <MTEntryIfAllowPings> <MTIfNonEmpty tag="MTEntryPostFooter"><span class="separator">|</span><MTElse><MTEntryIfAllowComments><span class="separator">|</span></MTEntryIfAllowComments></MTElse></MTIfNonEmpty> <a href="<$MTEntryPermalink$>#trackback"><$MTTrans phrase="TrackBack"$> (<$MTEntryTrackbackCount$>)</a> </MTEntryIfAllowPings> </p> <$MTWeblogIncludeModule module="technorati-tags"$> <$MTWeblogIncludeModule module="entry-footer-links"$> </div> </div> </MTBlogStickyEntry> </MTBlogIfHasSticky> <MTEntries no_featured_post="1"> <MTWeblogPostIfShow field="date_header"> <MTDateHeader><h2 class="date-header"><$MTEntryDate format_weblog_date="1"$></h2></MTDateHeader> </MTWeblogPostIfShow> <div class="entry" id="entry-<$MTEntryID$>"> <MTWeblogPostIfShow field="post_title"> <h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3> </MTWeblogPostIfShow> <div class="entry-content"> <div class="entry-body"> <$MTEntryBody$> </div> <MTEntryIfExtended> <p class="entry-more-link"> <a href="<$MTEntryPermalink$>#more"><$MTTrans phrase="Continue reading"$> "<$MTEntryTitle$>" »</a> </p> </MTEntryIfExtended> <MTFeedflareIfEnabled> <form class="at-scripttag" id="saved-script-1"></form> </MTFeedflareIfEnabled> </div> <div class="entry-footer"> <p> <$MTEntryPostFooter$> <MTEntryIfAllowComments> <MTIfNonEmpty tag="MTEntryPostFooter"><span class="separator">|</span></MTIfNonEmpty> <a href="<$MTEntryPermalink$>#comments"><$MTTrans phrase="Comments"$> (<$MTEntryCommentCount$>)</a> </MTEntryIfAllowComments> <MTEntryIfAllowPings> <MTIfNonEmpty tag="MTEntryPostFooter"><span class="separator">|</span><MTElse><MTEntryIfAllowComments><span class="separator">|</span></MTEntryIfAllowComments></MTElse></MTIfNonEmpty> <a href="<$MTEntryPermalink$>#trackback"><$MTTrans phrase="TrackBack"$> (<$MTEntryTrackbackCount$>)</a> </MTEntryIfAllowPings> </p> <$MTWeblogIncludeModule module="technorati-tags"$> <$MTWeblogIncludeModule module="entry-footer-links"$> </div> </div> <MTEntriesFooter> <MTIfPages> <div class="pager-bottom pager-entries pager content-nav"> <div class="pager-inner"> <MTIfPreviousPage><span class="pager-left"> <a href="<$MTPreviousPageURL$>"><span class="chevron">«</span> <span class="pager-label"><$MTEntryPreviousPageLabel encode_html="1"$></span></a> </span></MTIfPreviousPage> <MTIfPreviousPage><MTIfNextPage><span class="separator">|</span></MTIfNextPage></MTIfPreviousPage> <MTIfNextPage><span class="pager-right"> <a href="<$MTNextPageURL$>"><span class="pager-label"><$MTEntryNextPageLabel encode_html="1"$></span> <span class="chevron">»</span></a> </span></MTIfNextPage> </div> </div> </MTIfPages> </MTEntriesFooter> </MTEntries>

Copy and paste this code into a new Template Module, call it "entry-list-sticky". The first half of the module deals with display posts marked as "sticky", or as TypePad calls them, "Featured Posts". We're going to ignore these for now. The second half of the module is the MTEntries loop. This is where we're going to add the bit of code to display ads between post #1 and post #2. Right after the opening MTEntries tag, test for the number of iterations within the MTEntries loop:

<MTEntryIfOrderNum num="1"> **Your-AdSense-Code-Goes-Here ** </MTEntryIfOrderNum>

In the above code, we're testing if we are going through the MTEntries loop for the second time - the first time through, "num" equals zero, so the second time through the loop, "num" equals 1. Save the module.

Finally, we have to pull in our modified "entry-list-sticky" module instead of TypePad using the default version of the module. Go back to your Main Index template, and use the MTInclude directive rather than MTWeblogIncludeModule for entry-list-sticky:

<$MTInclude module="entry-list-sticky"$>

.

Save the template and check the results. You may not see ad placements right away. Refresh the page or wait 20 minutes or so, then verify your work.

My TypePad Account Finally Migrated to New Platform

Overall, we think the move to the new platform will be great.  There are a ton of great features coming down the pike that we look forward to playing with and writing about.

Our only issue so far is not being able to convert a standard template blog to Advanced Templates.  Basically, if you want to convert a standard template blog to Advanced Templates, you'll have to create a new design, copy over the cascading style sheet, then re-implement all your TypeLists on the sidebars.

ShareThis Widget and Encoding UTF-8 URLs and Post Titles

There are two ways to add a "ShareThis" widget to your TypePad templates.  The first way is to follow the basic steps ShareThis gives you for adding the widget.  Implementing the widget in this manner is simple and should not give anyone with basic TypePad skills any problems.  You just copy the code ShareThis gives you, and you paste it into your template at the point where you want the widget to appear.

The problem with this method of implementation is that it only works well for your Individual Archives posts or Page pages - those pages within your blog that only have one entry on them.  By default, the ShareThis widget grabs the URL of the page currently displayed in your browser, and uses that URL in all the various sharing opportunities.

This just won't cut it if you want to put the widget in the footer of every post featured on your Main Index page(s), where you might have links to multiple blog posts, or in a Category Index or Date Based Index Archive pages.  In this case, what you need is for the ShareThis code to dynamically pull in each post's title and URL, and optionally, the post's excerpt.

Robots.txt and Sitemap Autodiscovery in Your TypePad Blog

We just implemented a custom robots.txt file that references our sitemap file.  We did it through templates instead of coding up the files and uploading them via the File Manager.  It's actually very, very simple.  It's so simple, that it should be part of every Advanced Template set.

Actually, it should be supplied within every basic template set that comes with TypePad, too.

We saw a blog post about WordPress SEO that mentioned this as a wonderful feature.  Sure, it's nice to have, but it's not worth raving about.  In order to combat the silly "WordPress does sitemap autodiscovery" by default argument, TypePad should just throw these 2 simple templates in for you on every blog, or make a simple configuration option to say whether or not you want the features.

Internet Explorer 8 and Legacy JavaScript - Be Careful

More JavaScript nonsense from Microsoft's Internet Explorer 8.

If you've implemented the Chrome menu from Dynamic Drive, IE 8 (at least in Beta 2) will break it, unless you go grab a new copy of the Chrome.js script.

If you're like us, and you removed the <img> tag that the script appends to all menus that contain a drop down, remember to set the variable that contains the <img> tag to an empty string.  If you don't, you'll get a big "Image Not Found" placeholder on your site.

The Browser Wars are Heating Up, But Microsoft Has Already Lost

Our Internet Explorer/Microsoft vs Chrome/Google conspiracy theory lives on, and gains momentum.