Front-End Editing for Blogger

Seeing this prompted me to write up a little something I've been doing for a long time, as well.

The idea of "front-end editing" (a new term to me, but old idea), as described in the document above, instructing how (and why) to do it with MT, is to have links beside the content on a web page that is published via a CMS that link back to the CMS where you can edit that content. (That was a convoluted sentence, but it means: faster, easier editing of posts after they've been published.)

Long ago, we had a feature in Blogger called "remote editing" (noted here and here). This was the same thing (with a strange name because, if anything, it was more like "local editing." "Front-end editing" makes a bit more sense. Although, really, it's just "front-end edit links." Actual front-end editing—editing on page—is possible, but I don't know how worthwhile it is.) I thought it was imminently cool, but it ended up being kinda broken, because we were loading a JavaScript file from blogger.com in order to see if you had the cookie. And then when the scripts wouldn't load, because Blogger was not responding, it was bad. Also, the JavaScript was pretty fragile and would break when people edited their templates. (We were trying to do a bit more than necessary, too, in order to only show the link if you personally had permission to edit the post, if it was a team blog, not just checking to see if you were a member.)

So we stopped doing that.

And then last year we had the "Lofi" Blogger interface, which, for the first time, gave a URL for editing any post (as opposed to the framed interface). So suddenly there was an easy hack to do the same thing. And it still works (beings there's only one interface). In fact, there's now a (somewhat secret) tag for it.

So, here's what you do: Edit your template and put an edit link beside each post. (I like to put it by the timestamp with "[edit]" as the text.) Point that link to <$BlogItemDoOverUrl$>. Then, as the MT article illustrates, you can write some PHP or ASP or whathaveyou(SP) on the server side to hide that link for your visitors and show it for blog admins. Or, if you're on blog*spot, or just don't want to hassle with that, you can do what I do and hide it via JavaScript.

Here's what I put in my template, within each post:

<script>
if (location.href.indexOf("?edit")!=-1)
document.write("[<a href='<$BlogItemDoOverUrl$>'>edit</a>]");
</script>

Then, I bookmark my own site with a "?edit" at the end: http://evhead.com/?edit. If you follow that, you'll see the edit links by each post (but you'll need to log into Blogger as me to do anything with them).

Hacky, but handy.

Update!
The disadvantage of the above is that since you have to have the "?edit" parameter to see the links, when you follow the "view blog" link from Blogger, after publishing—the time you're most likely to see the error you just made that you want to fix—the edit links aren't there. So, I edited the script like so:

<script>
if (location.href.indexOf("?edit")!=-1 ||
document.referrer.indexOf("blogger.com/app/publish_status.pyra")!=-1)
document.write("[<a href='<$BlogItemDoOverUrl$>'>edit</a>]");
</script>

Adding the referrer check to the if statement solves the above problem and creates a very nice editing loop—create the post, publish, view blog, if you don't like what you see, click, and you're back editing.

JavaScript rawks.

Another update: Added the missing "<" before the "a href" in the snippets. <thanks, js>