« Going to NYC | Main | Custom Head Module Reference Page »

John T. Unger

Edit This Post Buttons for the Footer of TypePad Blogs

John T. Unger September 24, 2007

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:

    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.

More Like This: Advanced Templates

Comments

Darla says:

Where exactly does the Edit Link code get placed?

Mike says:

John,

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

Mike

Debra Hamel says:

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.

Mike says:

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

Melissa says:

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

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00e54ee823048833

Listed below are links to weblogs that reference Edit This Post Buttons for the Footer of TypePad Blogs:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License