How To Create a Conference Badge Page

PodCamp Hawaii - Honolulu Convention Center - October 24-25, 2008 Recently, after creating the “Badges” page for the PodCamp Hawaii site, we were contacted by several other Podcamp Organizers around the world. They wanted to know how we created the page and how to create the source code.

It’s easy enough if you’re a programmer or web developer. But it can be confusing and difficult if you don’t wade around in HTML all day long.

So let’s get to it.

Step 1. Create Your Graphics

Check the Interactive Advertising Bureau (IAB) Ad Unit Guidelines page for standard ad banner sizes. Obviously you can make any size banners you like but it’s generally best to stick to Unit Guidelines so your banners fit into ad spaces most sites are designed for.

If you don’t have the time or talent to create your own banners, you can use services like 99designs or Banners Mall. We recently used 99designs for our logo for Know How Cafe and were thrilled with the quality and number of designs submitted. We haven’t used Banners Mall but know people that have and have been very happy with the price and results.

Step 2. Upload Your Graphics to a Server

The logical place to stash your banners is the same server that serves your conference or event website although you can also place them on a Flickr account or other photo-sharing site. You can use FTP to create a custom directory for your badges or you can also use the image up-loader that comes with your blog site. Either way, you’ll want to get the exact file path to the graphic.

You’ll probably have an “images” directory at the root directory of your website. We like to keep directories clean and create another directory in your “images” directory with the name of your event. Then put your banners in that directory.

Let’s say your event URL is http://www.YourEvent.com. And let’s assume you created a “yourevent” directory in your images directory. And finally let’s say one of your banners is called “yourevent-125×125.jpg” which signifies this particular banner is 125 pixels wide by 125 pixels high. Based on this info, the URL to your banner would be: http://www.yourevent.com/images/yourevent/yourevent-125×125.jpg. (If you are using the uploader or Flickr, just insert the link code generated for you.)

Step 3. Create the Code for Your Banners

Now that you have your banners created, and you know the exact file path to each banner, it’s time to create the source code for your users to copy and paste into their websites.

Using the example graphic, the source would look like this:

<a title="Please attend our Great Event" href="http://www.YourEvent.com"><img alt="Click Here to learn about our Great Event" src="https://www.yourevent.com/images/yourevent/yourevent-125x125.jpg" border="0" /></a>

Let’s quickly break that down into understandable bites:

* This is the anchor tag that creates a link to your www.YourEvent.com site. Change “YourEvent.com” to be the URL of your website. The “title” parameter helps search engines know what this link is for and you should place a short description between the double quotes. NOTE: It’s very important to make sure you don’t forget the opening “<” and closing “>” or the double quotes. If you do the link will break and you’ll probably see weird code displayed on your web page.

<img alt="Click Here to learn about our Great Event" src="https://www.YourEvent.com/images/yourevent/yourevent-125x125.jpg" border="0" />
* This is the code that displays your image. You should recognize the value of the “src” parameter as the URL to your image created in Step 2. The “alt” parameter helps search engines know what this graphic is referring to, just like the “title” parameter in the anchor tag. And the “border” parameter of value “0” says not to put a border around this image since it is also a clickable link.

* This closes the first “anchor” tag that creates the link. If you forget this, all your text on the page following this code will be underlined as a link.

Step 4. Add the FORM code to make it easy to Copy the source code in Step 3

If you wrap your banner source code in an HTML TextArea Form tag, you can make it very easy for your users to copy the source code to paste it into their sites.

The following code will create a TextArea form element that is Readable Only. That means your site visitor won’t be able to edit the source code but will be able to select and copy the code easily:

<textarea cols="70" readonly="readonly" rows="5" onfocus="this.select();">Your Source Code Here</textarea>

You can adjust the Rows and Cols (columns) to create a TextArea size that displays all your source code. If we combine Steps 3 and 4, our finished source code looks like this. This is what you would place in your Event’s Badges page: (assuming you replace the appropriate URLs and file names as outlined above)

<form>
<textarea cols="70" readonly="readonly" rows="5" onfocus="this.select();">
<a title="Please attend our Great Event" href="http://www.YourEvent.com">
<img alt="Click Here to learn about our Great Event" src="https://www.yourevent.com/images/yourevent/yourevent-125x125.jpg" border="0" />
</a>
</textarea>
</form>

Step 5. Add Your Graphic

It’s nice if your users can see the graphic they are going to be adding to their site. Since you already have the code for your image, it’s a snap to add your graphic(s) to your badges page right above your TextArea source code. See the PodCamp Hawaii Badges page for examples. To display your banner above, use the following code:

<img alt="Click Here to learn about our Great Event" src="https://www.yourevent.com/images/yourevent/yourevent-125x125.jpg" border="0" />

If you want to provide even more info, you can add the following to the above code:

<em>(125 x 125)</em>

This adds the banner size below the banner graphic in italics.

Step 6. Add it All Together

Adding together all the steps above, and using as an example the Podcamp Hawaii 125 x125 banner, the code would look like this:

<form>
<textarea cols="70" readonly="readonly" rows="5" onfocus="this.select();">
<a title="Please attend our Great Event" href="http://www.YourEvent.com">
<img alt="Click Here to learn about our Great Event" src="https://www.yourevent.com/images/yourevent/yourevent-125x125.jpg" border="0" />
</a>
</textarea>
</form>
<img alt="" src="https://2008.podcamphawaii.com/images/badges/2008/podcamp-hi-125.png" />
<em>(125 x 125)</em>

Which results in the following:


(125 x 125)

Step 7. Now Just Duplicate

If you have more than one badge, just duplicate and modify the final code as needed for each badge.

Leave comments and questions here in order to help others that may trip across this tutorial. And don’t forget to add your Event’s URL in your comment.