« Multiple Authors | Main | Text Wrap »

Blogger Audioblogging with Movable Type

This tutorial is written by LMT contributor Lance McCord of lancemccord.com and Perpwalk

Including audio content on a blog is easiest when you can phone it in. Authors who use Blogger to manage their sites have free access to Audioblogger, a service that lets users dial a phone number and leave their audioblog content like a voicemail message. This content shows up on the user's blog as an image linked to an mp3 hosted on audioblogger.com.

this is an audio post - click to play

Similar services (like audblog) are available for a fee, but with a little effort (and a very little bit of PHP) you can have the free benefit of this Blogger service on your Movable Type sidebar. For this to work, you must publish your Movable Type files with a .php extension; consider converting to PHP if you're not using the .php extension already.

1. Sign up for free Blogger and Audioblogger accounts.
A Blogger account is free, with a three-step signup process. Step one: username, password, and email. In step two, you'll decide where to keep your new Blogger files (screenshot). If you have FTP or SFTP access to a web server, you can save a step down the road by clicking "Advanced Blog Setup" and providing your server information (screenshot). Otherwise, you can take advantage of Blogger's free BlogSpot hosting. In the third step you'll be asked to choose a tempate, but you'll soon be stripping away most of whatever template you choose, so don't get too attached.

Now to sign up with Audioblogger. You'll need to supply the username and password you used when setting up your Blogger account, then identify your new Blogger blog, then provide your primary phone number and a four-digit PIN. You'll get a phone number to use when calling in your posts.

Now you've got a new blog with audioblogging capabilities! The next step is to turn this into something you can add to your own blog.

2. Strip the Blogger template to the bare bones.
Take a look at the template for you new blog by logging into Blogger, selecting your blog, and selecting the "Template" tab at the top of the screen (screenshot). (If you're publishing via FTP, be sure that "Change the Blogger NavBar" is set to "off.") Blogger, like Movable Type, uses a template tag structure. Though the tags themselves are different, a few minutes skimming your Blogger template should give you a basic idea about how these tags work. For our purposes, a basic understanding is plenty. Note that Blogger's tags must be between <Blogger> and </Blogger>.

Since you'll be including Blogger's output in a page generated by Movable Type, most of what you'll find in the Blogger template is unnecessary and can be eliminated. For example, if all you want to add to your MT page are links to the audio posts, your entire template might be:

<Blogger>
<$BlogItemBody$>
</Blogger>

This screenshot shows an example of Blogger audioblogging incorporated in the sidebar of an MT blog. The Blogger template that produced it uses CSS to style the text and image:

<Blogger>
<li><span style="color: #fff">Last Audio Post: <$BlogItemDateTime$></span>
<div style="margin-top: 3px; padding: 2px; background: #fff; border: 1px solid #666; width: 146px">
<$BlogItemBody$>
</div>
</li>
</Blogger>

If you're feeling creative, you can learn more about Blogger template tags here.

While you're logged in to Blogger, go to the "Formatting" section under the "Settings" tab and set your time zone and choose a date format (screenshot).

3. Shoot your mouth off.
Now it's time to audioblog! Dial the Audioblogger number and follow the instructions to create your first audio post. [I experienced a delay of about 24 hours before my first audio posted on my Blogger site, but every audio entry since then has shown up in minutes. --Lance] When you visit your Blogger site, you should see the simple page generated by your stripped-down template containing a link to your mp3.

4. Include the Blogger output in your MT blog.
Consider where in your MT sidebar you'd like to see your audio posts. When you've identified the right spot, insert the following line of PHP into the corresponding section of your MT template:

<?php include("http://[path to your Blogger site]/index.html"); ?>

This simply tells your server's PHP parser to go get the index file from your Blogger site and include it in the current page. If you're publishing the Blogger site via FTP, the path in this line will depend on how you set up your Blogger account. If you're using free BlogSpot hosting, the path will be something like "yourblogname.blogspot.com".

4(a). Hacking the Blogger NavBar (for BlogSpot users).
If you're publishing your Blogger site via FTP and you've turned the NavBar off (see step 2), go on to step 5. Otherwise, you may have noticed that your Blogger page has a narrow header across the top -- the NavBar -- that isn't represented in your template. This is inserted automatically by Blogger, so you can't eliminate it. You can, however, hide it.

Feel free to skip this paragraph and get to the practical stuff. The <noembed> HTML tag is usually used in conjunction with the <embed> tag. What an author puts between the <noembed> and </noembed> tags is shown by a browser only if that browser isn't capable of using the <embed> tag. Since all common browsers can understand the <embed> tag, code bracketed by the <noembed> tag is essentially hidden. You'll be enclosing Blogger's NavBar using the <noembed> tag. Be aware that if you let a stray <noembed> without a closing tag get into your template, everything after it could disappear!

In your Blogger template, insert </noembed> as your very first line and rebuild that template. In your Movable Type template, insert <noembed> as a new line above the php include statement, like this:

<noembed>
<?php include("http://lancemccord.com/audio/index.html"); ?>

Now rebuild your Movable Type template. Blogger is still inserting the NavBar, but it should now be hidden.

5. Tweak and Enjoy!
Now you can audioblog your heart out. Here are a couple of options you can change to customize your sidebar Audioblog.

Change the number of posts displayed. By changing your Blogger "Formatting" options under the "Settings" tab (screenshot), you can control the number of days or posts that will be displayed.

Offer your listeners an XML feed. Under the "Site Feed" section of Bogger's "Settings" tab (screenshot), set "Publish Site Feed" to "Yes" and rebuild your Blogger site. By offering a link to this file (called "atom.xml" by default), you can let visitors to your site subscribe to your sidebar audioblog.

Happy audioblogging!

Lance usually blogs at lancemccord.com or at Perpwalk; he would be honored if you'd leave him a link to your new audioblog.

Comments (4)

Greg:

If you install MT-Enclosures and add the appropriate syntax to your RSS 2.0 feed, audioblogging can be taken to the next level by becoming a podcast.

Greg,

I was thinking along the same lines last night, but the snag I keep hitting is that the audioblog I've described is outside your Movable Type entries, and thus not showing up in feeds generated by MT. The Blogger feed doesn't employ the enclosure tag (why the heck not, Blogger?).

An alternate solution would be to use a little more advanced PHP and a new MT template to hack the Blogger output into valid RSS with an enclosure tag. My PHP skills have rusted to a standstill, but it's something worth working on, so I may pull out some books and take a crack at it.

Lance, I would encourage you to follow that line of thinking. I'd love to add audio entries into the MT posts stream from our site.

Great info.

Audioblogging invites a whole new group of people to the web and brings the sound of storytelling to a world of text and images. Dial the number and then hand the phone to your grandmother so she can tell us what's up. Read a poem a day into your audioblog and tell your lazy friends to subscribe to your blog.

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)