TypePad Hacks

Edit This Post Buttons for the Footer of TypePad Blogs

One of the most useful hacks I've ever installed on my blogs is the "edit this post" button in the footer of each post. It's a great help when I want to make quick edits to older entries, which is something I do with a fair bit of frequency… whether for typos, updates to tutorials, or to change pricing or availability of items on my art blogs. The best thing about it is that it allows me to use whatever search engine I want to find the page in question, or sort the entries by category, etc. I find that I don't always remember the title of a post, but I can use the Google search field in the sidebar to look for a key phrase and usually find the post I want to edit much more quickly than I would in TypePad's "list posts" interface.

In order to use the edit button, you must be logged in to your TypePad account… No one who doesn't have your login info will be able to use the button.

The hack was originally sent in to me from Debra Hamel, who has documented it on her own blog here. I use a couple slight variations of her method. First, I changed the link format to open the post in a new tab or window, I also decided to use a graphic button rather than a text link, because I figured it would cause fewer people the frustration of clicking a link that only works for me. Last, I created a CSS class for the edit button so that I could align it with the text in the footer.

On my blogs, I added the button to the templates in three places: Once in the footer area of the entry-individual module and twice in the entry-list-sticky module (So that I can edit both featured posts and the regular posts on the index page). If you have not yet created customized modules for your entry-individual and entry-list-sticky, refer to this tutorial for instructions: 3 Custom Template Modules You'll Use Again and Again. Once you have the modules set up, follow these instructions to create your edit link.

NOTE: The code in the original tutorial needs to be changed a bit if your blog is running on TypePad's new dynamic platform. Debra left a comment below with instructions on what needs to be changed.

1. Click to edit the entry-individual module.
2. Find the line that reads <$MTEntryPostFooter$> and replace it with this:

   Posted by <$MTEntryAuthorNickname$> on <$MTEntryDate format="%B %e, %Y"$> <MTEntryIfCategories>in <MTEntryCategories glue=", "><MTBlogIfArchives archive_type="Category"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> <MTElse><$MTCategoryLabel$></MTElse> </MTBlogIfArchives></MTEntryCategories></MTEntryIfCategories> | <a href="<$MTEntryPermalink$>">Permalink</a>

   This default footer code will display the author's name, the date in Month, Day, Year format, and the post's categories. You can change the order and content selection by editing the post footer tags as documented in this knowledge base article.

3. Once you have the proper selection of tags applied, you're ready to add the edit link. The code I use looks like this:
   
   <a href="http://www.typepad.com/t/app/weblog/post?__mode=edit_entry&amp;id=<$MTEntryID$>&amp;blog_id=XXXXXX" target="_blank"><img src="http://[your path here]/edit.png" width="24" height="15" class="bt" alt="edit post button" border="0" /></a>
   
   
4. You'll need to change the blog ID number to match the blog you'll be editing. It's easy to find your blog ID number, as it shows up in the URL/address field of your browser when you have a compose window open in Typepad. So just replace the XXXXXX with that number (which is different for each of your blogs, of course).
5. Now there are a few options:
6. If you just want a text link, replace the image code in the example with whatever text your want to use. If you do want to use a button, you'll need to upload the image to your files and correct the file path in the code above. If you don't want the edit to open in a new tab or window, remove  target="blank". Once you have everything configured the way you want it, click Save.
7. For those of you using images, there's just one more step. Without a little CSS hacking, you'll find that the image aligns with the center of your footer text, which I find a little annoying. In the code above, I've applied a class to the image (class="bt") to correct the vertical alignment so that the bottom of the image is aligned with the bottom of the text.
8. Open your Stylesheet and paste the following line at the end:
   img.button {vertical-align: bottom; }
9. Click Save.
10. Repeat process if desired with your entry-list-sticky module and / or entry-list module.

Going to NYC

I'm heading out tomorrow for my first vacation in years… A week and a half road trip to NYC.

Should be lots of fun. I'm meeting up with a bunch of people I've know for a long time through the web but haven't met in person before… Clive Thompson, B.L. Ochman, Debra Condren, and David Parmet (who I did get a chance to meet at SXSW). I'm also hoping to pay a visit to Etsy Labs, and there's a few other people on the list who I'd like to catch up with. Maybe after a little R+R I'll get more tutorials written?

If you're in NY and want to have lunch, dinner, coffee or a beer, drop me a line or call and we'll see if we can make it work. Mobile is 231.584.2710.

The Easy way to get audio, video, podcasts and photos posted to your blog

Jeff Meade at the Irish Philly Blog is my favorite kind of client— he's funny, personable, and once I've done a few basic things he digs in and learns how to go further on his own. Then he emails me about what's he's learned and I get to pass it on to you! Jeff totally deserves an AHA award for setting up some of the coolest video, audio and photo pages I've seen on TypePad.

I got acquainted with Jeff when he hired me to do a couple quick hacks like putting an ad space over the banner and setting up the code for a BlogAds strip in the sidebar. But the real fun began when he asked me to incorporate an Amazon aStore into the blog. He'd already designed the store to match the colors of the blog but was frustrated because the store was too wide to fit between the sidebars. He asked me to go in and create a page that hold the aStore without clipping off part of the display. There's at least two ways to do that… You can edit the template that generates TypePad Pages to drop the sidebars and display as a one column layout, or you can create a copy of the index template with a single column layout and paste the new content into the template where the posts would normally display. I favor the second option because that way if you have Pages that you want to display your sidebars on, you can, while the custom index page gives you a one column layout for the pages where that's not appropriate. Of course, to make that work, you need to edit the CSS so that "layout-one-column" is the proper width of your existing blog (the default width for one column blogs is 500px).

So I fixed up the aStore index template so that it looked just the way Jeff wanted it. The next day, I got an email with the subject line "You've created a monster" and this link. Jeff had looked at the template and figured out how to do a really nice videos page using Youtube's Custom Player widget. Moments later, another email arrived with a link to a page he'd created to showcase photos from his Flickr account using a customizable embedded player from Flickr Anywhere. Very nice. Then another email this morning showing off (quite rightly) the Irish Philly Audio Podcast Page. Jeff used HipCast to archive the audio clips and embedded a feed player from Big Contact.

The only thing he needs now to really make these pages shine is a menu at the top of the blog that makes them easy to find… or perhaps some good navigation graphics in the sidebar. I'm sure either he or I will be adding that soon. In the mean time, I'm glad he pointed out the embedded players to me because they're perfect for another job I'm working on right now. Thanks, Jeff! You rock, (in a very Céilí sort of way)!

AHA award for David Smith's ToyTalk blog

It's been ages since I handed out an AHA award, but David Smith's ToyTalk blog is definitely deserving! David hired me recently to do a couple hours consulting on how he might increase the stickiness of his blog and build his reader base. Although much of the advice was about social interaction, I also suggested some design ideas and features he could add that might make his blog a better resource.

David did all the coding himself, mostly using tutorials from here as well as articles from the Knowledge Base. But there were also a few things he had to figure out on his own, and he's done quite well with that. My favorite thing he's done is the implementation of my suggestion for his category list in the sidebar.

I almost always suggest using a drop down menu for categories to save space, but in his case I thought it would be fun to add little toy icons to the category list. Since toys are so visually appealing, the icons turn the category list into an exciting menu that should drive a lot more clicks to his archive pages. It looks even better than I expected, so I think this is something that I'll suggest more often in the future. The next step would be to create slightly larger icons that can be used in the title of posts to display the category… With a little CSS and template modification it wouldn't be too hard (take a look at the tutorial on styling author comments to get an idea of how this might be implemented). You could also take a look at the CSS for Michael Sippey's recent redesign of his blog for some ideas.

David emailed me to say that he's got a bunch more new features that he's working on adding. I'll definitely be checking back to look at his progress. Nice work, David!

Blogs as Stores: A Comprehensive Overview of Ecommerce Solutions for Bloggers

When I started TypePad Hacks, one of the things I most wanted was a simple way to integrate e-commerce into TypePad blogs… at the time, probably 30% of my income came from blogging.

This year, that number is more like 80% and I've grossed more in the first six months of 2007 than I made in all of 2006. So, I think it's safe to say that selling services and products with TypePad is worth talking about. Some of my income has come from custom template design and some of it has come from selling artwork. Both businesses have been quite successful, and both have reached a point where I no longer need to actively seek work in any way other than trying to post new content on my blogs whenever I have a little down time. Compared to the income I've received from advertising (perhaps $100 total in all the years I've been blogging), the money I make selling goods and services seems a much better way to monetize a blog.

I'd like to revisit the idea of blog stores today and collect together all of the research I've done on the subject into one post. I'll organize it as best I can into several different approaches. There's still nothing quite like the tools I'd like to see for TypePad, but I've had some new ideas recently that should make it much easier to build the ideal service for integrating easily customized stores into TypePad blogs. Read on in the extended post.

The Ultimate Guide to Blog Commerce Coming Soon

I had a revelation not too long ago which has sparked some interesting conversation with the folks at TypePad about integrating ecommerce into blogs. This has been one of my long-running areas of interest here since I make most of my income over the web these days. My original ideas about how to do this revolved around two basic concepts:

1. Building catalogs and product pages by hand in HTML and incorporating them into the blog to take advantage of the content-management tools, categories and natural SEO of blogs. This works, but it's a lot of work.
2. Trying to get TypePad to create and implement a blogstore set of templates, with a compose page that had fields to create all the files needed for both catalog pages and individual product pages. This would make creating a store easy for us, but it's a lot of work for the design team at TypePad.

Then I had a better idea. Why not talk with existing ecommerce providers about building a JavaScript solution to bring a hosted store into the blog the same way that Amazon's aStore  or PrestoGifto's embedded CafePress stores work. Yeah, that seems doable. In fact, today I'm playing with E-junkie, which appears to do just that! I wish I'd found them before I spent the entire week testing, taking notes and building examples of exactly two dozen current ecommerce-related products, services and hacks! On the other hand, I've definitely learned a great deal in the process and will be sharing all of it here in the near future.

Here's a list of the services covered in the upcoming post: PayPal, Google Checkout, RightCart, E-Junkie, TypePad Tip Jar, Etsy, PrestoGifto, eSnips, aStore, PopShops, Bravisa, Zlio, Shoplinc, ThisNext, Wists, StyleHive plus five custom hacks. There's also a brief look at: eBay blogs, Shopify and terapad.

Because it's probably the longest and most detailed post I've ever attempted for this blog, I'll probably end up breaking it into sections and posting it over a week's time as a series… but I want to wait until I've finished the entire thing before I start so I can be sure that the structure of the study is as clear as possible.

That said, here's a teaser for you that I want to show off just because I'm so pleased with it: I built a really cool new template module that I'm using on all my art blogs to display best-sellers on every page. On the index page it displays between the featured post and the rest of the entries. On archives it displays at the top of the page. On individual entries it displays at the bottom of the page, below the footer and FeedFlare but above Technorati Tags and comments.

Here's what it looks like:

Great Bowl O' Fire 41" $998 ($749 plus S+H) Great Bowl O' Fire 37" $874 ($649 plus S+H) Beach Burner Bonfire 30" $748 ($549 plus S+H) Isosceles Modern $395 ($300 plus S+H)

Pot-de-Feu Grill $80 (free S+H) Waves O' Fire 37" $874 ($649 plus S+H)                     Beach Burner Bonfire 24" $548 ($449 plus S+H) Font O' Fire $510 ($400 plus S+H)

Welcome to John T Unger Studio, home of The Fire Line: World-famous fire pits & fire bowls hand-crafted from 100% recycled steel Click titles for more info. Click images to purchase securely using RightCart right here on the blog, or use PayPal's secure shopping cart. Looking for something a little different? I can create a custom Fire Bowl to meet your needs! Get in touch to discuss your ideas. Most of my firebowls can be converted to clean-burning natural gas or propane. Follow the text link below the image for more info.

I think I have a little bit more to do to make this truly functional… The problem I foresee is that currently the thumbnails load an item into the RightCart shopping cart, which is great, but possibly confusing. People probably expect them to link to the extended description instead (despite the instructions in the box, which I bet no one will read).

Anyway, I hope to start running the ecommerce feature within the next week or sooner. Just thought I'd give all y'all a head's up since it's been so quiet here lately.

   

New features and a redesign for Authorati

Murali has launched a newly redesigned Authorati.com that's so beautiful, it really makes me want to drop everything and do a new design for the hacks blog! Sadly, my own redesign will have to wait till things slow down here at hacks central, which probably won't happen till winter.

Here's a quick list of new Authorati features, cribbed shamelessly from the Authorati blog:

1. Timeline control: You can now view the rated blog posts on the Simile timeline control. Think of the timeline as a sort of "google maps" for your blog. You can pan across months and click on a blog post to reveal more details.
2. Postoons: Postoons are humorous, satirical titles for imaginary blog posts based on current events and personalities associated with them. Use your creativity to capture the essence of a current event in 10 words or less.
3. Featured blogs: This new section will be a rotating highlight of some of our most interesting authors. (Thanks for including me in in the list, Murali!)
4. Authorati badge: We have made some changes to the Authorati badge HTML. If you are currently displaying the badge on your blog, please update the HTML with the new version. You can also use the richer Authorati widget instead of the badge.

I'm not sure when the Authorati widget was released, but I like that too.

Building a Better Contact Page with Embedded Google Maps and More…

Lately I've been getting a lot of emails asking me where I'm located (because when I'm not writing custom code, I'm shipping heavy art by freight) or wondering how to call me (because I foolishly put the phone number way down at the bottom of the page below the contact form). So I decided it was time to overhaul the contact page for my art blogs. I'll be redesigning the TypePadHacks contact page too, but not just yet. For now, the Hacks contact page looks a lot like the older page I replaced on the other blogs.

This post will be more of an overview than a tutorial… I used a number of services to build the new contact page as well as some tutorials on other sites. Because a contact page is such a personal and customized page, I think it makes more sense to write a broader piece and provide links to the sources I found most useful.

Read on in the extended post for an overview of using Google Maps in TypePad, contact forms from Response-O-Matic, and an amazing resource for CSS styled tables.

3 Columns Right Layout added to Standard Templates

One of the trickier hacks I've spent time on was getting the layout you see here at TypePad Hacks… A three column blog with both sidebars on the right. It's been one of the more popular hacks tutorials, and it's also been one that has generated the most email and comments when it didn't quite come together for people.

Well, it's just been added as a standard layout that you can set up in the design wizard for Basic TypePad blogs! Yay! I'm actually going to rebuild this blog when I get a chance, using the new layout in basic and then porting over my other custom code after converting to advanced. That shouuld solve some of the other problems I had when I built the layout from scratch (mainly the issue of having the comment post and preview show up in the wrong column).

Thanks to Shawn at the Metropolitan Museum of Art who called to let me know it had been added!

Lots of New Feature Rollouts for TypePad

Checked your stats in the last day or two? Much nicer. I especially like the new ability to download stats as a CSV file… Between that, the stats RSS feed at Clicky and the email summaries of stats I get from SiteMeter, it's a lot easier to build up a coherent picture of what's happening with my blogs over a period of time.

There's been plenty of talk about the new TypePad Pages feature already… I didn't jump on that story as quickly as I'd have liked thanks to the drive in my laptop dying (Out for data recovery. If you emailed between February and Memorial day, you might want to try again. Everything is gone. I'm hoping to get the files back, but we'll see.)

Pages are a great addition for TypePad bloggers using basic templates, but will save some time for advanced template users also. They make a lot of hacks much quicker to implement… You can use them to set up a forum, an Amazon aStore, a contact form, a CafePress store, a Landing Page or a customized About page. Basically, they're an easy way to integrate any content that you'd prefer not to post as an actual blog entry. One of the cooler things you can do with them is set a Page to be the entry point for your blog, although personally, I prefer to use the standard index page with a permanent intro post at the top.

I'd like to congratulate the TypePad team on all the hard work they've been putting in. There have been a lot of new additions to the Knowledge Base (subscribe to updates here), lots of great posts at Everything TypePad and quite a lot of additions and improvements to the application itself.

I'm beginning to almost have this feeling of "My work here is done" now that TypePad has engaged so much more with the user community… They've added many of the features I originally requested, documented much more of the things that can be done with TypePad and rolled out some cool new things I never expected. I kind of feel like they've really taken on the work that I began here at this blog and made it their own (which was, actually, my original goal). Rock on, guys.

But don't worry. I'm not going to stop posting hacks and tutorials here… I enjoy it and I know from the comments and email that this site has been a useful resource for a lot of people. Posts are likely to slow down during the summer since the art has been keeping me crazy busy, but they will continue (especially if I recover all the tutorials I started in Ecto but lost when the drive broke). Today I'm just feeling good about the fact that while things are slow here, you have other really useful resources from TypePad themselves.