Displaying Banner Ads

SkyBlueCanvas Lightweight CMS comes with the ability to easily display banner ads on your site. This is achieved via the Plugin API and the ads plugin that comes with the SkyBlueCanvas source code.
Defining Ad zones

Ad zones are defined using a special kind of commment in the HTML Skin of your site. Ad replacement tokens are a specially-formatted token that appears in your site Skin. An example from my own site is:

Defining Banner Ad Zones

<!--#ads:main-top-->

When the ads plugin loads, SkyBlueCanvas passes the page HTML to the plugin call which looks like this:

The Ads Plugin

plgLoadAds($html);

The ads plugin parses all comments that are formatted as above and determines the zone. In this case ‘main-top’. As the plugin encounters each token, it then looks in /skyblue/data/ads/ for any files whose names match the zone specified in the token. You can have an unlimited number of ads for each zone and the ads plugin will display them randomly.
Saving Your Ads

NOTE: In order to upload ads to your site, you will need FTP access.

Ads are saved as text files in /skyblue/data/ads/. It doesn’t matter if your ad is a JavaScript? or HTML block. SkyBlueCanvas sends whatever is stored in the ad file to the browser and lets the browser determine how it should be displayed. Since the ads are saved as text, there is no code execution that takes place on the server, so you do not need to worry about malicious code - at least on the server side.
Naming Your Ad Files

SkyBlueCanvas matches the file to the zone in which it is to be displayed based on the file name. You can name your zones anything you like, as long as your ad file names match the zone names you defined.

For example, if I have defined a zone ‘main-top’, then I would include the following token in my HTML skin:

<!--#ads:main-top-->

Then, I would save my add files with names like this:

• main-top.skypead.txt
• main-top.yahoo.txt
• main-top.googleads.txt

Styling Your Ad Blocks

Each ad block is wrapped in a div with a unique ID to allow you to create CSS rules corresponding to each ad block.

Using the example above, the ad block wrapper would look like this:

<div id="ads-main-top">
    <!-- the ad code here -->
</div>