Blogdata

At the bottom (or top) of each post on this site (and almost all of my MovableType blogs) I present a set of icons which I consider the entry’s “blogdata”. I thought I would share with everyone exactly how I do that. MovableType is excellent for this sort of thing, and Ben and Mena deserve bundles of good karma (and cash, if you have extra).

[Please don’t link directly to my set of icons! You can download your own from Michael Angeles. He created the ones I use and several other ones which are perfect for blogs. I found Michael’s site through WebGraphics, an awesome page with a ton of great developer links.]

It is ridiculously simple to create your own blogdata footer. The trick is to utilize MovableType’s Template Modules. From your blog editing screen, go to the Templates section. Scroll down the page a bit and you’ll see a section titled “Template Modules”. Click on “Create new template module” and you’ll open a new module for editing. I named mine “Blogdata”. You can name yours that or “entryfooter” or “entry item data” or whatever you want. (For the rest of this entry, when I refer to “Blogdata” I’m talking about the little set of icons that I use as a footer for each post.)

The module I’m going to show you how to create is blog-independent. That means that if you have more than one MovableType blog running on your server, you can use this module with any or all of them without changing any of the information in it. If you want to do that, you’ll have to enter a value in the “Link this template to a file” text box. This can be kind of tricky if your blogs span multiple directories (as mine do) so I recommend creating a directory in your root. (That’s just my $.02, though. You can put it anywhere you like, of course.) The file doesn’t have to exist yet, by the way. It will be created just by entering a value in the text box (after you save). The benefit of doing this is that in the future if you decide to change part of your blogdata, you only have to edit one file and then rebuild and it will update all your blogs. Trés groovy, no?

Now I’ll explain what you’re going to add to your “Module Body”. I’ll give you the details of each part, and then you can just cut and paste as you desire. My blogdata has seven sections.

1. a “read more” link if it’s an extended entry
2. similar entries
3. the “hidden” entry-editing link
4. a permalink
5. comments
6. a link to eMail the entry
7. and, finally, a Google search link

Extended Entry Link
This link only appears if the entry is an “extended” one. That means that I’ve entered something in the “Additional Entry Text” box in the editing window of that post. MovableType lets me do this by specifying whether it is an extended entry with a special tag for that. There is a line break after this part of my blogdata simply because I didn’t want the blogdata of a post with an extended entry to be of a different width than the blogdata of a post without an extended entry. I’m a bit neurotic like that. I didn’t use an icon for this link because if the entry is extended I want readers to cilck “read more” and see what else I had to say on the topic, so I wanted it to be more obvious.

Here is the HTML:

<MTEntryIfExtended><a title="read more about <$MTEntryTitle$>" href="<$MTEntryLink$>#<$MTEntryID pad="1"$>">read more ...</a><br /></MTEntryIfExtended>

Similar Entries
Here begins the blogdata that appears on every post. I included this link first so readers can go directly to the archives section of all entries from the same MovableType category as the current entry. I call this my “serendipity link” because it allows readers who are interested in one type of post to read others that are on the same topic. I thought it was a good idea because whenever I go to a library or a bookstore I inevitably find several books all on the same shelf that I want to read. The link is an image of a little filing cabinet.

Here’s the HTML:

<a title="more from the category: <$MTEntryCategory$>" href="<$MTEntryLink archive_type="Category"$>"><img src="/images/ico_cat.gif" alt="Serendipity: <$MTEntryCategory$>" /></a>

“Hidden” Entry-Editing Link
I described how to add a link like this to your entries in a previous post, but for newbies I’ll explain again now. This snippet lets you link directly to the editing window for the post. If you are using a computer that has your MovableType cookie and you are the owner of the blog, it will save you some time when you catch typos or faulty HTML after you’ve already published your post. It’s not really “hidden”, but most readers won’t notice that it’s there because it is inside the separator “·” I chose · as my separator because it’s small and fits my design. You can choose anything you like as a separator, or don’t use one at all. (If you don’t use a separator, though, I don’t know how you’re going to hide the edit entry link.) This link looks a bit funky because it’s XHTML-compliant. That means I had to hide the ampersands with HTML entities.

Here is the HTML:

<a target="_blank" title="this link is for admin use only" href="<$MTCGIPath$>mt.cgi?__mode=view&amp;_type=entry&amp;id=
<$MTEntryID$>&amp;blog_id=<$MTBlogID$>">·</a>

(Note the line break towards the end is only for formatting; do not include that!)

Permalink
A permalink is a link directly to a specific entry in your archives. You probably know that, but I figured I’d say it just to be on the safe side. That’s easy enough. My permalinks show you a timestamp for the entry in military (24hr) format in the status bar of the browser and the title of the entry in the anchor title. You can title and status yours however you want.

Here is the HTML:

<a title="Permanent link to: <$MTEntryTitle$>" href="<$MTEntryLink$>"><img src="/images/ico_link.gif" alt="PermaLink to: <$MTEntryTitle$>" /></a>

Comments Link
This one is a bit fancier than the others because it is only displayed if you allow comments on the post. To make it appear correctly for posts which do not allow comments, the separator is inside the MovableType <MTEntryIfAllowComments> tags. This link has the icon and a count of the comments on the entry in parentheses next to it. My example is for blogs which do not use “pop-up” comment boxes; the comments for an entry are set to appear in the entry’s individual archive page. I do have a page which uses my blogdata module and uses pop-up comments, but it doesn’t really follow the design of the site and it really throws the whole “object-oriented programming” thing out the window, since if you have distinct modules for each blog you aren’t really gaining anything by linking the template to a file. Such is the life of a programmer. For what it’s worth, I don’t recommend having pop-up comments and inline comments in the same blog. I just hate pop-up boxes. That’s just me, though. You might love ’em. (As soon as I finish writing this tutorial I’m going to change my other blog anyway, because, like I said, I’m a bit neurotic. Also, I just realized how much easier my life would be if I only had to manage the one template module. It would be much easier if someone would pay me to do this sort of thing, but that’s really another story.) So what the hell. I’ll show you how to do it either way.

If you use inline comments (the comments only appear on the individual archive page) use this code:

<MTEntryIfAllowComments>&middot; <a title="post a comment" href="<$MTEntryLink$>#comments"><img src="/images/ico_comment.gif" alt="Comment" /> (<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments>

If you’re using pop-up box comments, and you’re using MovableType’s default “OpenComments” JavaScript function, use this code:

<MTEntryIfAllowComments>&middot; <a title="post a comment" onclick="OpenComments(<$MTEntryID$>);return false;" href="<$MTCGIPath$>mt-comments.cgi?entry_id=<$MTEntryID$>"><img src="/images/ico_comment.gif" alt="Comment" /> (<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments>

Send Entry
This link lets the user open a pop-up window to easily eMail a link to the entry to a friend, just like on Yahoo!. (Yes, I know I said I hate pop-up boxes. Life is not easy.) I’m not going to go into detail here on how to add this sort of functionality to your blog. If you are interested, read the tutorial I wrote. If you don’t want to bother, just skip this part.

Here is the HTML:

<a title="eMail this entry to a friend!" onclick="SendEntry('<$MTCGIPath$>mt-sendentry.cgi?entry_id=<$MTEntryID$>');return false;" href="<$MTCGIPath$>mt-sendentry.cgi?entry_id=<$MTEntryID$>"><img src="/images/ico_mail.gif" alt="eMail this entry" /></a>

Google Search
Just for the hell of it I added a link to Google. (I got the idea from Scott Andrew.) If you name your posts creatively, you can use the title of the entry as a search query for Google. So if you write a post on homeopathic monkey embolism virus cures, a reader can just click the Google link to search for more information on the topic. I actually have absolutely no idea if any of my readers ever use this feature, but I use it sometimes so it’s worth it to me. This link doesn’t have anything to do with all the hoopla about the Google API you’ve probably been reading, and it’s not related to the new MovableType Google tag, either. It’s simply an href to a Google query based on your post’s title. Note that it sets target=”_blank” so that the Google search opens in a new window. (The target=”_blank” attribute will validate in XHMTL Transitional, but not XHTML Strict.)

Here is the HTML:

<a title="Search Google for similar information!" target="_blank" href="//www.google.com/search?q=<$MTEntryTitle$>"><img src="/images/ico_search.gif" alt="Google" /></a>

Putting It All Together
Obviously (or not) you will have to change the src value of the images so that it points to your own copy of the icons. The example below is what your blogdata Template Module should look like if you are using inline comments. Remember that you’ll have to modify the href and onclick values if you want to use pop-up comments instead. Also note that I’ve included my entire blogdata in a <div> so that I can format it easily with CSS, and that I’ve used &middot; as my separator. If you haven’t added the SendEntry functionality you’ll want to strip that part, too.

Here is the whole thing all at once:

<div class="blogdata"><MTEntryIfExtended><a title="read more about <$MTEntryTitle$>" href="<$MTEntryLink$>#<$MTEntryID pad="1"$>">read more ...</a><br /></MTEntryIfExtended><a title="more from the category: <$MTEntryCategory$>" href="<$MTEntryLink archive_type="Category"$>"><img src="/images/ico_cat.gif" alt="Serendipity: <$MTEntryCategory$>" /></a> <a target="_blank" title="this link is for admin use only" href="<$MTCGIPath$>mt.cgi?__mode=view&amp;_type=entry&amp;id=
<$MTEntryID$>&amp;blog_id;=<$MTBlogID$>"> &middot; </a> <a title="Category: <$MTEntryCategory$>" href="<$MTEntryLink$>"><img src="/images/ico_link.gif" alt="PermaLink" /></a> <MTEntryIfAllowComments>&middot; <a title="post a comment" onmouseover="window.status='add your thoughts to the mix'; return true;" onmouseout="window.status=' '; return true;" href="<$MTEntryLink$>#comments"><img src="/images/ico_comment.gif" alt="Comment" /> (<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments> &middot; <a title="eMail this entry to a friend!" onclick="SendEntry('<$MTCGIPath$>mt-sendentry.cgi?entry_id=<$MTEntryID$>');return false;" href="<$MTCGIPath$>mt-sendentry.cgi?entry_id=<$MTEntryID$>"><img src="/images/ico_mail.gif" alt="eMail this entry" /></a> &middot; <a title="Search Google for similar information!" target="_blank" href="//www.google.com/search?q=<$MTEntryTitle$>"><img src="/images/ico_search.gif" alt="Google" /></a></div>

(Note the line break in the middle is only for formatting; do not include that!)

Save and Rebuild
Now click the Save button to save your new module. Now you just have to place this module in your Main Index template. You can place it in all your templates if you want. That’s the great part about this module – you can use it anywhere on any blog. All you have to remember is to make sure that it is inside an <MTEntries> container and not inside the <MTDateHeader> container and it will work. Mine is at the end of each post on the main index, and at the top of each post in the individual archives. (When / If you add it to an individual archive template it doesn’t have to be in an <MTEntries> container, of course, because you generally won’t have an <MTEntries> container in the individual archive template.) In the editing screen for your Main Index template, just add the following line to where you want it to be. Don’t forget to change “Blogdata” to whatever it was that you decided to name your new Template Module!

<$MTInclude module="BlogData"$>

Lather, rinse, repeat.

Save, rebuild, enjoy.

Now that you’ve read this little tutorial, I invite you to please link to it from your home page (use the permalink!), read more of my MovableType entries (use the serendipity link!), leave a comment, eMail it to a friend (use the eMail link!), and search on Google for more about the topic “Blogdata”.

Additional Notes

• I changed the pop-up box calls in the SendEntry and the Comments links based on information I recently read at ScottAndrew.com. The whole shebang still is valid XHTML1.0 Transitional and now it’s also friendly to browsers with Javascript disabled.