Movable Type tutorial — How to add a “sidebar” to your blog

This is a tutorial for those who would like to include a “Moblog” sidebar or section within their main blog, as I have done here on Hmmn. I wrote this initially at the request of Kevin of MFOP, for other mobloggers who were asking him how to do it. However, it doesn’t have to be used for a “moblog” sidebar only. In fact, my “Of Momentary Interest” sidebar of web links was done using the same method. At heart, what we’re doing is pulling the content of one blog into another one.

I really can’t take credit for this — I figured out how to do this after cobbling together various posts made to Movable Type‘s Support Forum. In particular, without a .php script widget posted by Kadyellebee (Kristine), I couldn’t have been able to do this. Thanks also goes to Jeffrey for answering some questions about .php.

Both jeansnow.net and VuDeja? are, as far as I know, sucessfully running moblog sidebars using the method described herein, so it should work for you, though obviously I make no guarantees. By all means, if you find something amiss in my instructions, or a better alternative, please leave a comment and I’ll continue to keep this page updated. To read the tutorial, click on the link below:

Requirements

Aside from running Movable Type, you will need to make sure that the server your web site is hosted on can support PHP. If this is greek to you, then a simple email or support call opened up with your host should help you determine whether or not you can do the following. You might want to send them an email that reads something like this:

I would like to create some .php pages on my site. Is my server [or alternatively, is the server my site is hosted on] setup for .php?

In my case, my hosts support PHP, but it comes as an “extra” that I had to “install” myself by logging in to my account at my host and sumbitting a form saying I wanted PHP support. There was no charge. If you run Gallery or some other php-based software program on your site already, then you’ve got this part covered.

Step 1 — Setting up the “Moblog”

You need to “Create a New Weblog” in Movable Type. To do so, login to MT, and from the main menu, select “CREATE NEW WEBLOG”.

Fill out everything in the configuration as you did when you set up your main blog. Choose a name for the Moblog (you can change it later if you wish), and fill out the fields for local site path, website URL, archive path, etc. These fields probably already have some default information in them, but you will most likely need to change it. You will need to assign your moblog a directory name (I chose /moblog/), which you should set up in advance on your server.

Go through the various other “configuration” screens, setting options as you see fit. All of this you can change later, so don’t worry too much about it for the moment.

Step 2 — Setting up the Sidebar content “feed”

In the new blog you set up in Step 1, go to Templates, and click on “Create new index template”.

Give it a name like “Moblog Updates” (put that in “Template Name”), and in the “Output File” field, put up.html.

Leave the box that says “Rebuild this template automatically when rebuilding index templates” checked (it should already be by default).

In the “Template Body”, copy and paste the following:

Moblog
<MTEntries lastn="1">
<$MTEntryTitle$>
Posted: <$MTEntryDate$>
<$MTEntryBody$>
<a href="<$MTEntryPermalink$>" target=_blank
name="comments">Comments</a> | <a href="<$MTBlogURL$>" target=_blank>View all</a>
</MTEntries>

The lastn attribute for the <MTEntries> tag specifies how many posts you want to show up in your sidebar. Using the above “1”, only the most recent moblog post will show up in the sidebar. If you want the 2 most recent posts to show up, change the lastn figure to 2, and so on.

You basically can change the above code just as you would any of MT’s templates. For the moment, the above code doesn’t have any styles attached. We’ll come back to styles in a moment.

Save the template, and then Rebuild your site.

Step 3 — Including the Moblog in your main blog

[Note: I use “main blog” here throughout. However, if I were you, and because it is so easy to set up blogs in MT, I would set up a duplicate copy of my main blog (copying your index.html and styles-site.css files from your main blog), something called Test, and do all of the following steps on that blog. Once you have it working as you see fit, then you can make the changes to your actual main blog.]

Switch on over to your main blog, and go to Templates.

Open up your index.html file, and where you want your Moblog sidebar to appear, insert this line:

<? include('/home/www/domain/moblog/up.html'); ?>

Obviously you will need to change the URL path to reflect your setup. It should be whatever URL you entered into “Local Site Path” for your new Moblog, plus up.html at the end.

Before saving this file, in the “Output File” field, change the extension of this file to .php, so that the filename is index.php. Save, and rebuild. (Note: you don’t need to rebuild the entire site. If you click on the “Rebuild” button at the bottom of your template, and then click “Rebuild” from the popup box, it will only rebuild this particular template, and not your whole site, which is fine and saves a bit of time).

Step 4 — Testing your new Moblog sidebar

Okay, now we need to make some test posts and see if this baby is going to work. I recommend that you just use MT to create new entries, rather than trying to post from your phone.

In your Moblog, click on “New Entry” and create your “Hello World” test post. Save and publish as you would any post.

Now open up in a separate browser window your main blog (main test blog). [Important] Don’t forget to add index.php to your URL or else you’ll be loading the standard index.html page and your Moblog sidebar won’t be showing up. You should see your sidebar wherever on the page you put it. Pat yourself on the back, you’ve got a Moblog sidebar up and running.

Step 5 — Getting your sidebar to look how you want it.

In step 2, the up.html file we created was pretty bare bones, and as such your sidebar is probably looking fairly ugly, or at least plain. I’m not going to go into stylesheets and MT template tags. As you already have a blog, you should have some understanding of these and you can make your own decisions as to how you want it to look. However, there are a few items to consider, based on my own experience:

One thing I noticed is that the CSS doesn’t seem to know exactly what to do with this “included” blog. In other words, it takes the stylesheet of my Main Blog, but not 100%. For example, if I have specific “right margin” tags in my css (for example, #right h3), it doesn’t recognize those. For my main content, I have fairly wide line spacing (using the line-height property), but I didn’t want that for the sidebar. However, no matter what I tried, it would not take my declaration for the right-hand margin.

What was happening was that <p> tags were being inserted around my moblog text, and these were causing this section to take the “p” style I had set for my main content. To get around this, in your Moblog, you need to set up your “Default Text Formatting for new entries” to “None”. (To do this, go to Moblog –> Weblog Configuration –> Preferences, and change the “Default Text Formatting” setting from “Convert Line Breaks” to “None”.)

You might want to create a separate class for p, something like p.moblog, which you would use to control the moblog sidebar. [important] In your Main Blog’s CSS, add the p.moblog style. However, actually apply this style to the up.html file.

You will need to go through some trial and error before you get things working as you want. Fortunately, it’s fairly easy in MT to move back and forth between your blogs.

I should also mention that if you want your users to be able to see an archive of all your posts, or even to go to individual post pages (to comment on, for example), then they are going to see the “Moblog” blog you set up, which at this point still has all the default MT styles associated with it. Not necessarily a bad thing, but at some point you’re going to also want to spruce up that blog (and at the very least, add a link back to your main blog).

Step 6 — Serving .php pages to your users

If you simply rename your Main Blog’s index file index.php, your visitors are either going to get your old index.html page (in which case they won’t see your Moblog Sidebar), or a dreaded 404 error page. Of course, you could just tell everyone to redirect their browsers and links to your index.php page, but what a pain! Fortunately there is a simpler solution.

If you are on your own web server, you can simply edit your server configuration file (httpd.conf for servers running Apache), and add this line:

AddType application/x-httpd-php .php .html

(It may be that a line AddType application/x-httpd-php .php already exists, in which case you would add .html to the end of it).

If you’re on a shared server like me, chances are your host won’t want to make this change, as it would affect other customers on that server. In that case, you will need to create an .htaccess file with the above line, and put that file in every directory on your web server that will have a .php file in it.

Basically what either of these options does is say, if an .html page has .php code in it, please parse those sections with php in them.

See these sites for more information:
http://www.spiderpro.com/bu/buphph001.html
http://www.linux-mag.com/2002-01/lamp_01.html

Step 7 — Finishing Up

[Note: this last part was written with the original MFOP in mind (“MFOP classic”), which has since been superceded by MFOP2. I’ve just started using MFOP2 myself, however most of what’s written below should still hold true. The “Post Template” section of MFOP2 has changed, however.]

At this point, you should be ready to actually test from a phone. You will need to head on over to MFOP’s registration page and either login to a pre-existing account, or setup an account. There are instructions for how to set up an account over there, but a couple of things:

For “Blog ID”, make sure you enter the ID number of the new “Moblog” you set up in MT.

Set “Convert Breaks” to “No”

Fill out the “Post Template” section at the bottom of the MFOP registration page. At a minimum you will want to put [img] here, and it you’re going to want to send text over as well, then you should also add the [post_body] tag (preferably you should put a <br /> tag in between those two).

Also, remember that when you set up your special Moblog author in MT, be sure to associate that user with the new Moblog.

That should be it. Go ahead and send an email from your phone, using the password you set up at MFOP. Cross your fingers, count to 10 or so, and then refresh your Main Blog’s (test blog’s) index page, and see if your post showed up.

If it did, then at this point all there is left to do (if you followed my advice and up to now have been using a test blog for all this) is go to your actual blog, and insert

<? include('/home/www/domain/moblog/up.html'); ?>

where you want it (obviously with the correct path specified). Save, and rebuild that page, and your done. You should not have to make any changes to the Moblog blog itself.