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.

Comments

[Posted: Sep 26, 2007 8:57:32 AM]

Where exactly does the Edit Link code get placed?

[Posted: Oct 6, 2007 1:13:07 PM]

John,

This works great. It really makes editing and correcting typos much easier. Thanks,

Mike

[Posted: Oct 30, 2008 9:32:25 AM]

Hi, John. With their recent changes TypePad also changed the link you use to access your edit page. You may already have noticed that your edit link isn't working anymore.

I wrote into TypePad to find out the tags that will output the new postid. Here's the new URL that you need:

http://www.typepad.com/site/blogs/XXXXXX/post/<$MTEntryXID$>/edit

Put that in where before you had:

http://www.typepad.com/t/app/weblog/post?__mode= edit_entry&id=<$MTEntryID$>&blog_id=YOURNUMBERHERE

Now, where the XXXXXX is, TypePad supplied this tag -- <$MTBlogXID$> -- so that the full address would be:

http://www.typepad.com/site/blogs/<$MTBlogXID$>/post/<$MTEntryXID$>/edit

But that tag didn't call anything up for me. So instead I replaced it manually with my blog's ID. It's longer than the old ID, and you can find it by editing a post on your blog. The number you need will be between /blog/ and /post/ in the address bar.

[Posted: Dec 25, 2008 11:35:42 PM]

Debra,

Thank you for posting the update. Typepad just upgraded my account recently and I was surprised (and dismayed) to find this hack no longer worked.

It's a great hack - I appreciate your determining the adustment.

Mike

[Posted: Apr 13, 2010 4:25:05 PM]

Any idea why my "Edit This Post" link is taking me to a "Compose New Entry" page rather than the edit page?