TypePad Hacks

AHA Award for Thom Meredith's latimesmagazine.com design

2009-09-16T11:17:49-04:00

I got an brief email from Thom Meredith Monday that read:

Hi, just wanted you to check out my site that I built using Typepad and using your site as a great guide (no other site had as many great tips)

The link was to www.latimesmagazine.com. Go check it out, it's amazing.

I can almost always tell at a glance when I'm looking at a site built on TypePad, but Thom really built something that stands alone… and I was so blown away that I felt I had to come out of semi-retirement to give it a proper shout out. I called Thom and chatted with him a bit about the project. He doesn't usually work with TypePad which just makes the custom templates, CSS and clever use of JavaScript all that much more impressive.

The entire site is built on TypePad, but each section is customized to present its content differently. Category archives such as 50 and Turn it Up use image icons to spice up the list, while the individual entries are customized to display the feature material at it's best. Throughout the site, slideshows, mouseovers, and dynamic content all come together to present engaging content cleanly, quickly and without feeling cluttered or overdone. Rather than showing you screenshots, I'd urge you to go visit the site and explore all the sections to see them in action.

It's nice to know that after a year away from TypePad Hacks and a ton of changes to the platform, people are still finding value in the tutorials here.

Demo of Iphone App for TypePad at WWDC

2008-06-09T17:11:02-04:00

Michael Sippey gave a quick demo of TypePad's new IPhone app at the Apple WWDC today. I have to admit, this is the first time ever that I've been interested in the idea of blogging from a phone. I bought an IPhone this year for SXSW and love it, but I can't see writing very long posts on the phone's keyboard. Michael's demo has me thinking, yup, I'll be phoneblogging soon.

TypePad's app will be available as a free download at http://www.apple.com/iphone/appstore/ as soon as the store fully launches and IPhone3G goes on sale.

Emoticons for TypePad Blogs

2008-05-29T13:46:48-04:00

Have you ever wanted to display your mood on individual blog posts in TypePad? Now you can!

I recently launched Emoodicon, a new site that sells mood rings which hold swappable emoticons (sort of like a secret decoder ring for how you're really feeling). I wanted to be able to use the emoticons on the blog itself, but more importantly, I wanted other people to be able to use them as well… so I've developed two ways for people to add the Emoodicon images to their blogs. There are two sets of images at present, one with kitties and one with robots. We'll be adding two more sets in the future based on the monkey and mime in the Emoodicon animation. I'm hosting the images, so there's no need to upload them to your own account.

Here's a sample of what the images look like:

Kitteh Emoodicons (Emoticon Key Here)

Bleep Emoodicons (Emoticon Key Here)

For Basic Templates: The first option will work for basic templates (or pretty much any site on the web) and uses a little bit of JavaScript that you can just cut and paste into a Notes Style TypeList. There's also some CSS that allows you to customize the wording and appearance if you choose. Full instructions for this method can be found here on the Emoodicon Blog. The advantages of this options are:

It's easy and works anywhere
You can insert a mood icon anywhere in your post
You can customize it quite a bit if you desire

The one important warning about the script is that it must be the very last bit of code to load on your page. So if you want to add it to abasic template blog, put the Notes Style TypeList at the very bottom of your right-most column.

For Advanced Templates: The second option uses a wee snip of template code and CSS to function and is quite easy to install. It loads more quickly than the JavaScript version. This is the option I chose to use on the Emoodicon blog and it was inspired in part by Michigosh's recent comment on David's recent post, A Creative TypePad SEO Hack. Once you've added the code, you'll be able to use the Keywords field on your compose page to tell the world how you're feeling.

Click through to the extended entry for instructions on how to add Emoticons (or other images) to your blog using Advanced Templates.

The advanced template code version of this hack has several advantages over the JavaScript version: it loads faster and using the keywords field to log your mood is somewhat easier and neater than typing it into the middle of a post. The only potential disadvantage is that your mood will always display in the same place depending on where you insert the code in your template… with the JavaScript version, you can insert multiple moods anywhere you like in a post.

You will need to edit your entry-individual, entry-list and entry-list-sticky template modules to add the code below. If you don't see these template modules, you can create them and add them following the instructions in this Tutorial.

How to add the code:

In the Design tab, select your entry-list-sticky template module.
Paste the following code into the template in the place where you want the emoticon to appear. To place it at the top of an entry, put it right under the line that reads <div class="entry" id="entry-<$MTEntryID$>">. To place it at the bottom of an entry, it can go just above line reading <MTEntryIfExtended>. The entry-list-sticky module has two parts, one for stick posts and one for regular posts. Be sure to add the code in both sections if you want to display the icons on sticky posts. If not, just edit the second section of the module.

<MTIfNonEmpty tag="MTEntryKeywords"> <div class="mood"><span class="feeling">I'm Feeling: </span><img src="http://emoodicon.com/typepad-emoticons/<$MTEntryKeywords$>.png" alt="<$MTEntryKeywords$>" /></div> <MTElse> </MTElse> </MTIfNonEmpty>
In the code above, you can change the words "I'm Feeling:" to anything you want ("current mood" or whatever). The default size of the Emoodicons is 50 x50 pixels. You can also change that, by adding height and width tags to the image, although they get hard to read when they're smaller.
If you wanted to use a different set of images, you would change the image path in the code above to a sub-folder of your own using the File Manager to upload the images.
When finished, click Save.
Repeat the above steps for your entry-individual and entry-list template modules. Click save for each module.
Now, it's time to add the CSS. Open your Stylesheet and paste the following CSS at the end.

.mood { float: right; padding-bottom: 8px; } .feeling { display: inline-block; color: #CC0099; font: bold 18px/normal Verdana, Arial, sans-serif; vertical-align: 70%; padding-right: 8px; }
There are a number of settings you can edit in the CSS:
.mood can be edited to float the icon and text left or right, and you can edit the padding to make the image play nice with other elements on your page.
.feeling controls the display of the text. You can change the color and font to match your blog. If you changed the image size in the previous steps, you'll want to edit the settings for vertical-align.
Once you're happy with the CSS, Click Save and Republish your blog.

How to set your mood:

To add any of our Emoodicons to a post, you just type the name of the feeling prefixed with r- for the robot set or k- for the kitty set into the Keywords field of your compose page. So, if you're happy you would type "k-happy" or "r-happy" depending on whether you want the robot image or the kitty. If you don't add anything to the Keywords field, nothing displays and the post will look the same as it did before you added the custom code. You can go back and add moods to older posts if you want, but it isn't necessary.

If you don't see the Keywords field on your compose page, click the link in the lower right corner that says "Customize the display of this page." In the pop-up window, under the heading Screen Configuration click the radio button for Custom (show the following fields). Select the checkbox for Keywords and click Save. More info on customizing the display of the compose page can be found in the TypePad Knowledge Base here.

New TypePad Compose Window

2008-05-21T14:20:28-04:00

One of my most frequently requested features has just been added to the Compose screen for TypePad: Text and picture justification tools. Even though it's a really simple thing, it excites me a lot because I generally like to center photos in a post and I hate doing it manually in the HTML tab when it's been available in every other text editor I use for as long as I remember. Anyway, we've got it! Yay!

There's a lot more updates for the compose screen that will also make posting to your blog easier and more productive. Read the post at Everything TypePad for the basic overview with screen shots of the new compose screen. For a more in-depth look at features, check out the new article in the Knowledge Base.

Some of the new features that I am most excited to see include:

Header Menu: The old compose window made it possible to select a text size from a drop down menu, but it didn't use header tags to accomplish this. So if you wanted to define the size and color of subheads in your stylesheet, you could, but you had to edit the HTML to use them. This is a significant improvement.
Remove Formatting Button: This is a nice shortcut too… especially since when you copy and paste text from other websites, the compose window usually preserves the formatting. I've often found that feature, the preserved formatting, to be incredibly useful actually… I often use it to more quickly add formatted text to a post by copying and pasting text that was formatted and then editing the text, rather than having to edit the HTML. But being able to strip out formatting quickly, without diving into the HTML makes it even more useful.
Link Controls: The new link buttons offers two features that make life much easier: the ability to specify on an individual basis whether the link opens in a new window (or tab) and the ability to strip out a link. There have been a number of easy ways to set all links to open in a new window, but I prefer deciding that on a link by link basis… I don't think it makes sense to open links to your own blog in a new window for example. And again, you could always do this in the HTML but it's much nicer to have it automated.
Image Controls: The new Insert Image popup provides more control over the size of the image than before, including allowing you to set the size as a percentage of the column. I'd still like to choose whether to scale the image by height or width (for a row of thumbnailed images, I find consistent height to be more important that consistent width, for instance). Perhaps the new ability to edit an insert image will make that a bit easier.
Alt Tag Field: This is a bigger deal than some of you might be aware of… I've always used alt tags for my photos, and in the past they had to be hand-coded into the HTML of a post, which was a real pain (I generally use Dreamweaver or Ecto if there are very many images in the post). Over the last couple years, I've found that alt tags were one of the better SEO elements on my blogs… I get a great deal of traffic from Google image search that would not find me if I didn't use alt tags for images. I'm really glad to see this implemented into an easier format in the Compose window.

Overall, it looks like the new Compose design solves a lot of problems and brings the posting interface much more up to date. I have not yet had a chance to play with the beta, but I'm quite looking forward to it.

There's just one thing that I'm not wild about: the "extended entry line" concept that replaces the Extended Post field. There were some useful aspects to having a separate window for extended posts. For one thing, every field on the compose page can be repurposed somewhat with a little clever hacking to the templates, so losing a field is a bit of a drag. But more importantly, I've found that for clients who needed to be able to paste HTML into a post but don't actually understand HTML, the separate windows made it easier for them to separate their writing and the code.

An example of what I'm talking about is a recent eCommerce project I built for my friend and client Debra Condren. Debra doesn't understand code at all… but she wanted to be able to easily post CDs and MP3s for sale. So we created a separate blog and edited the text that links to the extended entry to say Click here to purchase "title" ». Now all she has to do is title each post the same as the product, write a description in the Post Introduction field and then paste the shopping cart code into the HTML tab for the Extended Post. It separates the words and code so that it is harder for her to make a mistake when pasting in the button code. Plus, I felt that it was a nice, understated but obvious way to do a store… you read through the descriptions and if you want to buy, you just click through. If not, you don't have to look at all the buy now buttons or wait for the Javascript that loads them to run.

So, I kind wish we still had both fields for composing a post. But other than that, this is a great update.

Fresh new design for TypePad Hacks and more!

2008-04-26T19:28:45-04:00

The new design I've been working on this week just went live, and I'm way, way happy about it! What's changed? Quite a bit:

The TypePad a la Carte Code Store is now it's own blog, which means you can search it by category. This should make it a lot easier to use. I updated the list of hacks too, so that each has a description of what it does as well as a list of what's required from clients in terms of files, etc. Please take a look and leave a comment if you have any suggestions for improving it. I'll be adding a bunch of new hacks to the store soon, as well as some package deals.
The view shopping cart button is now in the menu at far right (unless you're using IE, in which case it's above the menu. If you are using IE, may I suggest a better browser such as Firefox, Flock or Camino?)
I also updated the page for ordering custom hacks (actually, I created one. It used to go straight to the contact form.) The new page explains everything you need to know about hiring us for Custom templates or CSS, personalized blog consulting and training. The new order form is much improved as well, saving time by making sure we have all the info we need to prepare an accurate bid.
Finally, a new and prettier banner and a new logo. I took the official TypePad logo and changed the lilly pad into a paint palette… and changed the tag line from "building a better platform through user powered design" to "The art of fine code."
Swapped the three column right template to a two column right, with a wider sidebar.
Updated the widgets etc. and made new graphics for most of the sidebar items.
Color changes throughout the templates.

I'm probably forgetting a few of the new features or changes, but those are the big ones.

I'd love to hear what you think of the new design… Please do leave a comment and let me know what else you would like to see, or see change, or what you like about the new design.

About TypePad Hacks

2008-04-06T01:37:05-04:00

This blog has been around long enough for its focus to shift a few times… The core mission of making TypePad rock hasn't really changed, but the methods have shifted a bit. The original manifesto can be found here, but it seemed like time for an update.

Stage One: Consumer Advocacy, Guerrilla Criticism

I founded typepadhacks.org in 2006 to suggest features and changes I felt would significantly improve the TypePad platform. The initial focus of the site was:

User Design: Collecting useful hacks for extending the capabilities of TypePad blogs.
User Forum: Providing a forum for issues, news and user concerns about SixApart products and service.
User Power: Organizing users into a unified voice to lobby SixApart for the features, fixes and changes to TypePad most important to us.

As it turned out, Michael Sippey (then GM at TypePad) got in touch almost immediately to let me know that a lot of what I had suggested was useful to the development team and that they would be implementing many of my suggestions. The general response from the company is exemplified by the following quote from the TypePad Featured Blog article about TypePad Hacks:

You might think that Six Apart, as a company, would be embarrassed by Unger's focus on explaining tricks to extend TypePad's functionality, or chagrined that he polls his readers about what features we should implement next, but the truth is: We're thrilled. Not only is TypePad Hacks a tremendous benefit to all TypePad customers, especially those who want to ask unique questions or try to "push the envelope," but it's also incredibly useful for us to look over Unger's shoulder and absorb the feedback his readers are giving. And we can assure you, we are most certainly looking. Finally, we think it's an amazing testament to blogging and to TypePad that Unger thought the best solution for his effort was to start a blog and to use TypePad. We couldn't agree more. While no formal relationship exists between TypePad Hacks and TypePad, we have talked with Unger and consider him a wonderful asset to the community.

That was awesome, and they've been rolling out great new features, improvements and fixes at a breakneck pace ever since. I put a lot of effort into those first posts to make sure that the tone was uniformly positive and I think that has paid off so many ways… I've almost never had a negative comment directed at TypePad since the blog began (though plenty of constructive criticism) and often the readers will answer each other's questions in the comments. There's a community here that I truly value, and I think that by providing a space for that here, both TypePad and the user base have gotten a chance to interact and learn from each other. A great deal of growth and understanding came out of that.

Stage two: Developing new Hacks and Writing Tutorials

But, I'm impatient (massively ADHD, actually) and so I started writing hacks for some of the features that could be added without having to change the back-end application code. It turned out I was pretty good at it. It turned out that I have a special knack for looking at what things are and what they do, not what they're supposed to be or intended to do… In other words, every time I see a new snip of code, my brain immediately starts thinking about what else it could be used for beyond the intended purpose. This is the perfect mindset for finding new ways to use things, and for finding solutions to difficult problems. Coming up with hacks and writing tutorials was the second stage of TypePad Hacks, although it followed pretty quickly on the heels of the activism stage. I also did a ton of free tech support for other bloggers during this period… I still like to help out when I can, but unless it's a quick answer, I often don't get to it as soon as I would like. In some cases, if it's a very long answer, I'll suggest that the person hire us.

Stage three: Hacks for Hire

It turns out that not everyone wants to do their own hacks… Some are too busy, some are uncomfortable messing with templates, some just would rather job it out. About a year into writing the blog, I started getting a lot of inquiries about whether I was for hire. I kept saying "no, actually, I already have a full time gig as an artist and this site is my recreational outlet." I was kid of proud of being maybe the only guy out there who did art for a day job and tech support as a hobby. And the art still pays better, believe it or not.

Finally someone came up with a really interesting project that caught my imagination and I said okay. And in the process I realized the following: Hacks for hire is a service in the same way as free tutorials are a service… it's a way to help people out, which I like to do. The reason I charge for it isn't that I need the money but because that's how I schedule. There are only so many hours in the day and I need about 48 of them to accomplish what I want to do. So, yes, I do blog work for people and I charge for it to justify taking time away from the other things I also want to do… like writing my blogs ;-).

As the business side grows, I've taken on some help with coding and will also be seeking guest authors for posts. There will still be new tutorials and reviews as often as possible. I prefer to post less frequently in order to research deeply, test hacks thoroughly and polish the tutorials to maximum clarity and simplicity… so the posts here will never be overwhelmingly frequent.

About John T Unger

2008-04-06T01:23:14-04:00

Who am I? If you're looking for a world class expert on TypePad, ask just about anyone and they'll send you to me. I make my primary living as an artist and designer, but because blogging is what made that possible, I've spent years honing my chops at making TypePad jump through hoops to give me (or you) exactly what we need.

Why TypePad? Well, there are two answers to this: 1. although there are lots of great blog platforms out there, I think TypePad offers the best combination of ease-of-use with raw power… the design wizard and posting tools make it really easy to get started, but the custom coding options make it possible to do almost anything once you get under the hood. 2. When I get into something, well, I get into it. Once I started hacking at the templates, I was hooked on pushing the limits as far beyond where they seemed to be as I could. It's fun for me.

Credentials: I'm a member of the TypePad Customer Advisory Board and have written several guest posts for Six Apart's Everything TypePad blog. TypePad Hacks was selected as a TypePad Featured Blog on June 7, 2006. I'm pals with a lot of the people at Six Apart who work on TypePad because they're great people and we enjoy each other's work. I've got lots of happy clients and there are lots of very kind posts about me on other blogs where you can get a feel for what people think of the work I've done. You can also check out the comments below posts to see what people have to say about the tutorials or tech support I've provided. I pretty much taught myself everything I know… I try to pass along as much of it as I can, in a format that I hope will be easy for both newbies and seasoned pros to follow.

As a result of the work I've done with TypePad, I've also been asked for feedback by companies like AdaptiveBlue, AddThis, Authorati, Cocomment, FeedBurner, Wondermill and others (most of it on a fairly informal basis) and I've done consulting for companies including PayPal and Etsy. For the most part, my goal in consulting has been to get better software and services and to enjoy speaking with some of the smartest people on the planet (or the web, anyway).

If you're curious about me as a person, the best way to get a sense of who I am is probably to look at what I've done with my time. You can do that by visiting the following blogs and websites. Oh, and if you wanna read the older, less formal about page you can still check it out here.

My Other Sites:
John T. Unger on Twitter: Twitter is probably the most personal outlet for me on the web right now. It's a much less edited feed from my brain, so if you want the raw goods, start there. A direct message or reply on Twitter is much more likely to get my attention quickly than an email will these days.

John T. Unger Studio: This is my personal blog. Posts about art, design and creativity, studio news, business and marketing strategies, etc. Some of everything.

ArtBuzz: Art for Sale: A blog where I post all the work that is currently available for purchase or commission. Artbuzz began as an experiment in using blogs to build online storefronts. Artbuzz only updates when I have new work for sale.

Commission Portfolio: Want to see more of my work? This is where I keep photos and descriptions of most of my major projects. There's a lot to see. I've been busy.

I Got No Zen: I spent about 15 years working as a poet and writer before I switched to art and design. Most of the work from that period is archived here. I'm still updating as time permits.

Net Neutrality video from savethe internet.com

2008-04-05T18:06:07-04:00

If you have a blog, you need an internet to get there. I've posed before about Net Neutrality, but if you haven't felt the call yet, check the video below. It explains the basic concepts in a fun way.

Updates to the PayPal Storefront Widget

2008-04-04T23:30:58-04:00

I just wrote a guest post for Everything TypePad about new features for the PayPal Storefront Widget. I've archived a copy of the post in the extended entry below, or you can cick through to read it on Everything TypePad here.

When I first wrote about the Paypal Storefront Widget, I called it "the fastest, easiest eCommerce solution for blogs." If you're looking for a quick and easy way to add fully functional eCommerce to your blog (whether selling goods or services) you should definitely give the Storefront Widget a look. The widget works equally well for TypePad blogs using basic or advanced templates. You can add a storefront with a single click by visiting TypePad's Widget Gallery. Or, you can embed as many stores as you like, anywhere you want, by cutting and pasting a snippet of code provided by PayPal at the end of the set-up process. For a list of features and an overview of what the Storefront Widget can do for your blog, please check out my previous articles on Everything TypePad and my own blog TypePad Hacks.

I'm writing about the Storefront Widget again today to tell you about some new features and to congratulate Judy Chang and the PayPal Distributed Payments team on the fantastic effort they've put in to supporting widget users and continuing to improve the widget for everyone.

Here's a list of what's new for the widget:

Multiple Currencies: One of the most-requested features that was missing from the initial release was the ability to sell in currencies other than US Dollars. This has been addressed and you can now configure your store to sell using any of the 17 currencies that PayPal supports.

Product Options: Just like the original PayPal buttons, you can now customize up to two options for a product. For items that might come in different sizes, colors or materials this is certainly handy. Even better, you can now also include a surcharge for certain options if you want to. For instance, if you're selling jewelry, you could set different prices for the same ring done in gold or silver. Or you could use the surcharge to offer upgrades to services.

Inventory Control: For items that have limited quantities, you can now specify the available inventory. This can be broken down further to allow you to set inventory numbers for each item by options or combinations of options (ie: I have 9 red shirts, size xxl and 15 blue shirts, size xxl).

Store Reputation: We all know that favorable feedback from buyers is one of the best ways to increase trust online. Now, customers who buy from your Storefront Widget can provide written feedback and rate your store from 1-5 stars. Only one rating per transaction is allowed and buyers must provide the invoice ID that PayPal generates in order to leave feedback.

Shipping Options: Originally, shipping had to be included in the sale price. The obvious drawback to this approach is that it makes items look more expensive. Although the widget does not yet include a way to automatically generate shipping costs, the PayPal team has called attention to a clever hack developed by sellers using the widget: You can add shipping fees to your storefront and have buyers select the proper shipping rate as an item based on the order subtotal. This is still an imperfect solution for some situations, but should prove useful for many sellers.

For a more comprehensive overview of features and benefits, visit my PayPal Storefront review at TypePad Hacks. If you'd like to compare the widget to several dozen other eCommerce options that can be integrated with TypePad please check out my article: Blogs as Stores: A Comprehensive Overview of eCommerce Solutions for Bloggers.

Drag Links from firefox sidebar to your TypePad compose window

2008-04-02T12:42:04-04:00

Just on a hunch, it occurred to me that I might be able to create links in a TypePad post by dragging a bookmark from the sidebar in Firefox to the compose window… you know what? It works!

Oh man, is this ever gonna save me some time!

So from now on, when I'm writing a link heavy post, I think I'll do it this way:

Open a new window in Firefox.
Load all the pages I plan to write about.
Select "Bookmark All Tabs" from the Bookmarks Menu.
Create a folder in my bookmarks with all the links.
Open the folder in the sidebar and drag each link into my post as needed.

The link created is a text link with whatever text is shown as the name of your bookmark, so to further save time, you might want to edit the bookmarks so the name for the bookmark matches the anchor text you want for the link.

I just tested to see if it also works in Blogger (it does). Can anyone test it on other blog platforms and report in the comments if it works for those as well?