TypePad Hacks

AHA Award for Thom Meredith's latimesmagazine.com design

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

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.

Picnik, A photo editor for the rest of us

I love Picnik. I can't put it any simpler than that. Picnik is a photo editing program that works in your browser— PC or Mac. The interface is ridiculously easy to use, the options are fun and plentiful, but most importantly, your picture will look good.

I have long hesitated to really use much photo editing. Photoshop is just too complicated for my ADD brain (I still have no idea what a layer is, exactly). I don't want to read a manual or a take a class just to tweak pictures I take as a hobby. Other programs, such as Picasa, seem too simple for my needs, and the results never quite satisfy me. Picnik is a nice middle ground. I currently use the free version, (although a paid account is available) and have discovered a few options I use faithfully.

Flock, better browsing for social media

I'm a Flockstar!

Flock, a browser aimed at social media users, has been my default browser going on two months now. I tried it on a whim after some frustrations with Firefox, and I've never looked back.  Flock is built on the Firefox platform, and many of the extensions are compatible.  Flock is attentive to it's users. I have posed a few questions to @Flocker via Twitter, and always get a quick response.

There are numerous features on Flock, and these are what I find myself using over and over:

The People sidebar: Twitter, Flickr, Facebook and YouTube are all built right into the browser's sidebar. You can follow recent content from the users you follow on these sites.

I would like to see a feature where I can manually refresh tweets from Twitter rather than wait for the automatic refresh, and I understand that this is something in the works. I would also like to see more Twitter features such as direct messaging enabled.

The web clipboard: The web clipboard sidebar allows you to highlight, drag, and drop text, links or images. It saves text and pictures in the sidebar, so you can either view, email or blog them later on. So much better than saving a whole page in bookmarks for one paragraph or picture to refer to later.

The share this link via email button: I knew it was there, but I just recently started using it. Click the button, it goes to the default email you choose, whether it's web based or desktop based, and adds the headline and the link. All you do is add the recipients.

Photo Uploader: One button opens a window. Drag and drop a picture from your computer, and post to the web. You can even do some minor touch ups, and add a title and description. There are several different services that you can currently upload to, including Flickr, Facebook, Picasa, and others. It seems you can only upload to one site at a time.

You also can search Flickr, Photobucket, Facebook, YouTube and other services from a slick scrolling Media Streams tool bar.

Extensions: I love that I can use my most of my favorite Firefox extensions. Some extensions have been added for downloading on the Flock site. Currently,  I use AdBlock Plus, Foxmarks, Google Toolbar, Blue Organizer and Long Titles (gotta be able to read xkcd properly!). Firefox themes aren't compatible but the Flock default is a clean silver theme that is easy on the eyes.  There is also an Eco-Edition in green.

My only real annoyance is that Flock will not auto-complete an URL. If I type in an URL without the .com, it takes me to a Yahoo search page. I would like to either see a choice of search pages or simply the ability to finish the URL.

Give this neat little powerhouse of a browser a try, kick the tires, slam the doors,  play with the features, and get more done with your browser. For more information on Flock, check out the Lifehacker Screenshot Tour of Flock 1.2.

Welcome Marcie Vargas

Marcie Vargas is the newest writer on staff at TypePad Hacks and will be handling reviews for the blog. She's done some writing for me on other projects and I'm excited to bring her on board here. If you'd like to reach her about a product or service you think we should review, you can contact her here.

I'd also like to recommend Marcie to anyone looking for a fast and efficient freelance writer for long or short term projects. She's easy to work with and turns out great copy.

Here's a brief bio that I've also added to the About menu:

Who am I? I'm an info junkie, a geek girl, a poet. I love the arts and science equally. Straight out of High School I worked professionally as a writer for newspapers and radio. As a single mother, I've worked in health care for the last fifteen years. Now, I'm a freelance writer specializing in blog content and writing for the web.

I'll be pitching in at TypePad Hacks with reviews of web apps, social media and all the other groovy web 2.0 stuff you can use to augment your blog. Some of us bloggers don't want to code… we just wanna get stuff done, right? And it doesn't always require hacking code to get new stuff done or old stuff done better. That's pretty much where I come in, making sense of what's new and cool without requiring you to get under the hood and tinker.

I'm also available for hire to write content for those of you who want to grow your audience and extend your online reach. You can read more about that on my own blog MarcieVargas.com, or check out my rates and package deals here.

Emoticons for TypePad Blogs

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:

1. It's easy and works anywhere
2. You can insert a mood icon anywhere in your post
3. 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.

Creating Custom TypePad Widgets

I've been trying out WidgetBox.com over the past day or so in an effort to help out one of our clients, WhiteTrashMom.com.  She has her "White Trash Mom Handbook" coming out this summer, so we thought we'd write a little widget for her readers to install in their blogs in order to promote it. WidgetBox is pretty neat.  You can do a lot with it out of the box using the standard widget code.  But one of things that is really neat is that you can write your own JavaScript to do things like AJAX-ify the widget. The widget I created goes out to the WhiteTrashMom Twitter feed, grabs the most recent Tweet, and populates it into the widget.  Basically, when it's all done, we'll have a "Whte Trash Mom Thought of the Day" widget. Another cool thing you can do with these widgets is add parameters to the widget setup.  For instance, I created an Amazon ID parameter.  When you go get the widget for install, it will provide you with a text box prompting for your ID.  The ID gets appended on to the Amazon.com link to the book. Pretty darn cool...

New TypePad Compose Window

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.

A Creative TypePad SEO Hack

John and I came up with this interesting hack the other day when we were talking about search engine optimization for TypePad blogs.

There's a field in the TypePad post editor called "Keywords".  If you don't see the field when you're in the post editor, click on the "Customize the display of this page" link at the bottom of the editor.  That will bring you to a pop up window where you can specifically choose to see the field, or you can choose the "Advanced" screen configuration, which also will enable the display of the Keyword field.

The purpose of the Keywords field isn't terribly obvious.  And if you're like me, you probably figured since the field was near the Technorati tags, it had something to do with internet search or was SEO related.

It doesn't have anything to do with either.

But if you re-purpose the field, it could.  What if you put comma separated key words in it, then took those key words and put them in the <HEAD> section of your individual archives ("permalink") pages with a  <META> key words entry?  That should be pretty straight forward since the key words are kept in the MTEntryKeywords variable. 

All you'd have to do is edit up the head-common module in your Advanced Template set, then use the MTInclude command to insert the module in the Individual Archives template.  This would be the only template where I think the customized Key Words would be appropriate.  Leave all the other templates alone.

That should give you a customized <META> key words entry per post!

I suppose you could use the same concept if you wanted to create custom, dynamic <META> description entries on a post-by-post basis instead of Key Word entries.

SixApart people (I know you're reading) - if you re-purpose this field in the standard templates, you can still use it for what it was meant for in the first place.  Then, give us another field in the editor and another MT variable to hold the <META> description text.  This would give a nice little SEO boost to individual posts.

Sidebar and Content Widths

When John redesigned the TypePad Hacks site over the weekend, readers wanted to know how to make bigger sidebars.

When using Basic custom templates, it's just a matter of choosing the widths in the appropriate area of the Design Builder.

But as you can see, your choices are limited to the widths provided in the dropdown lists, which doesn't give you a lot of flexibility.  This is one of the big reasons why Advanced Templates are so popular and are required for anyone who wants full control of their blog's design. 

So what do you do when you want wide sidebars and a wide content area?  Well, if you like how you've made everything else look in your blog using the Design Builder, you convert that design to a set of Advanced Templates, and you modify the Cascading Style Sheet to resize your columns.

But it gets a little confusing when you're doing it for the first time, as there are a ton of settings in the style sheet. To give you a glimpse of the "how to", I'll steer you in the right direction if you're using a three column layout with sidebars on the left and right, with content in the middle.  Here are the steps...

1. Convert your design to an Advanced Template, per the instruction above.
2. Choose the Current Design from your blog's Design tab.
3. In the top box in the design (it says "Index Templates"), you'll see "Stylesheet" - click on it to edit it.
4. Scroll nearly all the way down to the bottom, and you should see the following:
   
   /* three-column tweaks */ .layout-three-column #container { width: 902px; } .layout-three-column #alpha { width: 200px; } .layout-three-column #alpha-inner { border: 0; padding: 15px 15px 15px 15px; background: #FFFFFF; } .layout-three-column #beta { width: 500px; } .layout-three-column #beta-inner { border-left: 1px solid #000000; padding: 15px 15px 15px 14px; background: #FFFFFF; } .layout-three-column #gamma { width: 200px; } .layout-three-column #gamma-inner { border: 0; padding: 15px 15px 15px 15px; background: #FFFFFF; }
   
   
5. You'll need to edit the size of the container (the blog's total width), alpha, which is the first column in the layout, beta, which is the second column, and gamma, which is the third column.  Let's say you wanted a left and right sidebar of 250px and a content area of 600px.  You'd modify this section of the Stylesheet to look like this:
   
   /* three-column tweaks */ .layout-three-column #container { width: 1102px; } .layout-three-column #alpha { width: 250px; } .layout-three-column #alpha-inner { border: 0; padding: 15px 15px 15px 15px; background: #FFFFFF; } .layout-three-column #beta { width: 600px; } .layout-three-column #beta-inner { border-left: 1px solid #000000; padding: 15px 15px 15px 14px; background: #FFFFFF; } .layout-three-column #gamma { width: 250px; } .layout-three-column #gamma-inner { border: 0; padding: 15px 15px 15px 15px; background: #FFFFFF; }
   
   
6. Save the Stylesheet, then republish it.  Open up your blog in a new window and check the results.