« Putting MT:MultiBlog to Work | Main | Alternating Comment Styles with Movable Type 4 »

Rotating Banner Ads in MT Using PHP

(This article is cross posted at MovableTweak.)

A client recently asked me if they could have an easy-to-manage banner ad setup, with the ability to add advertisements and specify links and alternate text, while at the same time being able to manage them easily. Sounds like a job for… Movable Type!

This tip can be used for any ads, or any images for that matter. There are four basic steps: upload the ad, create an entry for it, create the php file and include it in your template.

1. Create an Ad Blog

Create a brand new blog called “Banner Ads”; you can call it something else, but you’ll need to remember it for later, so whatever it is, write it down.

To keep things organized, set your publishing directory to /ads/. Once you decide on a directory, you’ll need to make note of it and upload all of the images in your rotation to the same directory. This isn’t required, but as we go on you’ll understand how it can make your job easier.

Go to Design » Templates and delete all the templates. Be sure to get the archive templates and template modules; no sense in having them sitting around taking up space. We’ll return to the templates in a moment to create a new template, but first let’s create and upload our ad.

2. Upload Image

You’ll need to decide what size ads or images you’ll be using here. For sake of example, I’m going to create a banner in Photoshop using a standard banner ad size of 468x60 pixels:

Click Create » Upload File to upload the first image. Movable Type’s asset manager will walk you through the upload process. Once the file is uploaded, make note of its location. You will create an entry for each image you upload.

3. Create an Entry for Each Image

In the title field, give your ad a name. This is going to be the TITLE text for your banner ad link. Next we’re going to use the Body field for your path and file name of your image. (To do it right, get the Custom Fields plugin and set up an actual Image field. This saves will save you from headaches down the road.) This filename can be relative to your site (i.e. /cardonate.gif) or a full URI (http://www.plasticmind.com/images/header.jpg) The Keywords field will be the hyperlink (destination) that visitors will be taken to when they click your ad. This can be relative to your site (i.e. /support/donateyour_car.html) or a full URL (i.e. http://www.plasticmind.com/).

Save the entry. Repeat process for all images you want to appear in the rotation.

4. The PHP File

Go to Templates and create a new index template called “Banner Ads” This will be the PHP file that will generate the rotation and we will call to it from our other templates. Set the output file to “banner.php”. Now let’s drop the following code into the template, save and rebuild it:

<?php
    <mt:Entries lastn="999">
        $ad[<mt:EntryId />]['pic']='<mt:EntryBody strip_linefeeds='1' encode_php='1' />';    
        $ad[<mt:EntryId />]['link']='<mt:EntryKeywords strip_linefeeds='1' encode_php='1' />';    
        $ad[<mt:EntryId />]['title']='<mt:EntryTitle encode_php='1' />';
    </MTEntries>    
    $rn = array_rand($ad);    
    echo '<a href="' . $ad[$rn]['link'] . '" title="' . $ad[$rn]['title'] . '">';
    echo '<img src="'.$ad[$rn]['pic'] . '" alt="' . $ad[$rn]['title'] . '"></a>';
?>

It looks complicated but isn’t. Basically, the <mt:Entries> container will loop through as many banner ad entries you have. (The lastn attribute is so it looks for the last 999 entries, not the default days.) For each one it will create a variable ($ad) with an array based on the entry id. In this array, we’re storing the ‘pic’ (file path), the ‘link’ (destination url) and the ‘title’ (ad title). We’re using the strip_linefeeds=’1’ attribute when building this to ensure that no stray <p> or <br /> tags get into your image path or your hyperlink. That causes weird things to happen.

Then we pull a random ad from the array and echo (or print) two lines of code. The first line is your hyperlink, with the href set to the ad’s ‘link’ (made up of <mt:EntryKeywords />) and the title set to the ad’s ‘title’ (made up of <mt:EntryTitle />). The next line is the image, with the src set to the ad’s ‘pic’ (the file path stored in <mt:EntryBody />) and for good measure we’ve set the alt to <mt:EntryTitle />.

Save and rebuild the template. You’re ready to test it. Type in your domain and the file name you gave it (i.e. http://www.rideforlife.com/banner.php) to see it in action. You should get a random hyperlinked image. Almost done.

5. Including It In Your Templates

Wherever you want your rotating banner ad to appear, simply include the banner.php file you created. The following code is an example:

<div id="bannerad">
    <?php include '/home/USERNAME/www/banner.php' ?>    
</div>

You can pull a full URL in the include, but it’s much slower and causes considerably more work for the server. Best to include the full site path to your file.

Rebuild and test it out.

Troubleshooting

Something wrong?

If you ran your banner.php on its own and didn’t work, you probably aren’t running php. Sorry, this solution isn’t for you. Probably best to type ‘server side includes’ in Google and try your luck there.

If you ran banner.php on its own and it did work, but it’s not working in your template, you may have called to it incorrectly. If the php code itself is being displayed instead of the image, your server isn’t executing the php, and you need to read about my solution for that on this post.

Not sure what your site path is? Well, MT has a tag for that. <mt:BlogSitePath /> or you can just look in your Publishing settings… it’s listed there as well.

Comments (3)

Thanks Jesse!

I got this working on Simply Recipes, a set of internal ads in the sidebar to promote different sections of the website - pumpkin recipes, apple recipes, etc. So it doesn't necessarily have to be an ad that you want to have rotated in, but any linked image.

My include path was more like ' /home/elise/public_html/recipes/ads/name-of-file.php'

Meelis:

Was this intended for MT4?
Does not seem to work for me.

Did everything right but whenever i try to load the banner.php

i get 500 error Internal Server Error
---------------------------------------------------------
The server encountered an internal error or misconfiguration and was unable to complete your request.

Please contact the server administrator, webmaster@vuron.pri.ee and inform them of the time the error occurred, and anything you might have done that may have caused the error.

More information about this error may be available in the server error log.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache/1.3.37 Server at vuron.pri.ee Port 80

----------------------------------

@Meelis -

Some of the MT tags in the code (and I stress some, because some are not) are specific to MT4. For instance, the opening mt:Entries will work in MT4, but probably will not work in anything else. However, the closing MTEntries will be fine in other versions.

What I would suggest is opening the file locally (or transferring to your local PC with FTP and viewing there). Because it is processed by the server, you aren't going to be able to view it through a web browser.

What you're looking for is something like this:

<?php
        $ad[1]['pic']='/path/to/image.jpg';    
        $ad[1]['link']='http://url/to/image.jpg';    
        $ad[1]['title']='This is the entry title...';
    $rn = array_rand($ad);    
    echo '<a href="' . $ad[$rn]['link'] . '" title="' . $ad[$rn]['title'] . '">';
    echo '<img src="'.$ad[$rn]['pic'] . '" alt="' . $ad[$rn]['title'] . '"></a>';
?>

You may have a lot more in there (and should), but it will give you an idea of what you should see. If you actually see MT template tags, then that's a part of the problem, and gives you an idea of what to look for next.

Post a comment

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