How To Create a Conference Badge Page

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

Let's quickly break that down into understandable bites:

<a href="http://www.YourEvent.com" title="Please attend our Great Event">

• 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 src="http://www.YourEvent.com/images/yourevent/yourevent-125x125.jpg" alt="Click Here to learn about our Great Event" 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.

</a>

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

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

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

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:

<img src="http://podcamphawaii.com/images/badges/2008/podcamp-hi-125.png" /><br /> <em>(125 x 125)</em><br />
<form><textarea rows="5" cols="70" readonly="readonly" onfocus="this.select();"><a href="http://2008.podcamphawaii.com" title="PodCamp Hawaii - Honolulu Convention Center - October 24-25, 2008"><img border="0" src="http://podcamphawaii.com/images/badges/2008/podcamp-hi-125.png" alt="PodCamp Hawaii - Honolulu Convention Center - October 24-25, 2008" /></a></textarea></form>

Which results in the following:

(125 x 125)

<a href="http://2008.podcamphawaii.com" title="PodCamp Hawaii - Honolulu Convention Center - October 24-25, 2008"><img border="0" src="http://podcamphawaii.com/images/badges/2008/podcamp-hi-125.png" alt="PodCamp Hawaii - Honolulu Convention Center - October 24-25, 2008" /></a>

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.

PRSA: 10-Minute Tour of the Social Web

What a challenge! How do I give an overview of all that is the social web in 10 minutes? Fortunately, we have several other great speakers to follow and plenty of time for Q&A. (Dan Zelikman of "StarrTech Interactive":http://www.starrtech.com/; Nadine Kam of "Honolulu Star-Bulletin":http://blogs.starbulletin.com; and Mary Fasteneau of StarrTech Interactive)

Twitter

• negative incentive: U-haul and Exxon Mobile
• positive examples: I connected Robyn Levin to Guy Kawasaki then she referred me to eTourism Summit.
• Neenz is now chief evangelist for Alltop. I recommended a client while Neenz gets good content and my client gets good promotion. "It's good that your client sees the value of blogging." - Neenz

Podcasting Brand Recall and Affinity

• Edison Research: "Podcast consumers are extremely attractive advertising targets, though difficult to reach via traditional interruption models."
• Podtrac: "Studies Reveal Advertising in Podcasts and Online Shows are Three Times as Effective as Other Online Video Ads"
• Beach Walks with Rox: 100% of viewers have same or more desire to visit Hawaii.

Jargon that Matters

• Interoperability
• Personal Branding
• Time more valuable than Money
• You gain influence by joining the conversation.
• Crossing the Chasm that is the Pacific Ocean
• Live Streaming

QIK Live Stream

UPDATE: Our friend from the UK, Christian (@documentally on Twitter and QIK) just this morning, from his kitchen, discussed the current state of streaming from mobile phones and the frustrations with bandwidth. Shane, in Hawaii, and several others were able to watch and comment live from halfway around the world.

Using just a mobile phone (Nokia N95) we are now able to stream live to the Web, anywhere in the world we have a stable cell phone connection. Even while driving through the high desert of Northern New Mexico between Albuquerque and Santa Fe. Not only that, people watching the stream live can leave comments that show up right on the phone which allows us to reply directly to them in real time.

Know How Cafe

Please join us at the Know How Cafe, the members-only coaching and tutorial community where you can experiment with and learn how to the Social Web and New Media tools to work for you and your client's businesses.

Enter your email address and the Promo Code Roxanne mentioned during the panel discussion ("PRSA") and you will be among the first in the world to be notified when the Know How Cafe opens its doors in a few weeks. If you use the Promo Code Roxanne mentioned, you will also receive a 30% discount on your membership as well as additional discounts and free services.

PRSA Hawaii Next Steps?

Question: Want to know my recommendations for the PRSA Hawaii Chapter?

Answer: Check back in a few hours and I'll update this post after I first share that information with those attending the PRSA Hawaii August 2008 Program.

And Finally...

Mahalo to Nathan Kam for inviting me to share all the exciting things that are happening on the Social Web today and for becoming such a great Twitter friend. We've known each other since 2005, but Twitter gets the credit for converting us into friends and power colleagues.

Photo Credit: Ryan Ozawa via Flickr

New Media Expo 2008 Wrap up & Ideas

We are waiting for our plane back home to Hawaii and I've been wanting to capture some of my thoughts from the recent New Media Expo in Las Vegas, where Shane and I spoke.

I've got three main points, some of which were also mentioned by Mike McCallen. I also discussed this in the pool at the Hilton with Jim Kirks of The Clip Show. With the temp at 105, my brain wanted AC or water to function!

I'd like to get your thoughts on this - pros and cons of the NME. Can we claim it as our podcaster event? If so, why were so many of the key podcasters and the podcast companies missing? How can they make it better? What would you want? Not want?

I think we are at a pivot point and it's time to discuss this out in the open.

FWIW, Viddler was there in full force and for those of us who were at the show, the connections and business deals were awesome! I loved being interviewed on TWIT, Web Pro World, and Tech Zulu, along with Sunny's live uStream. Tom Webster's podcast stats are amazing, and I hope they get increasingly more attention.

Video recorded by user's WebCam on Sat Aug 23 11:48:18 MST 2008

Using Social Media to Promote Your Event: Step 2

We are planning a Podcamp Hawaii here. We are also using it as a demonstration project for how to plan a conference using the fabulous (and mostly free) tools of social media. You can read the Step 1 post here.

Set up a Logo Shop to Sell T-Shirts

1. Since our event is free, we decided to let people purchase their own t-shirts. This saves us from guessing how many and what sizes. It also lets anyone anywhere buy a t-shirt and help us promote the Podcamp Hawaii brand.
2. We used Spreadshirt, because it is a social web application. We can add our logo to many different designs, and users can even create their own items using the logos we have uploaded to the site.
3. We can click a button to also have our products and our logos listed in the public marketplace. Most likely, we will get a few more registrations from people who find us there.
4. Each product allows buyers to upload pics of them wearing the t-shirt they have bought too!
5. Spreadshirt allows us to create a customized shop featuring out own masthead and choice of products. There is even a t-shirt for the dogs.

Prepare Your Sponsorship Packages

1. Use the technique of "crowd-sourcing" to speed up the process. All past and upcoming podcamp events are listed on the official Podcamp Wiki. Visit several of them and look at both how they established their rates and who are the committed sponsors. If a company was successful at one podcamp, they will be very likely to want to sponsor the next event in the series.
2. Post the plans as a web page (good for search results and readability) and also as a PDF for a nice, printable version for download. Be sure to indicate on the link it is a PDF! (Web courtesy 101.)
3. Begin announcing them on Twitter and tap into your network to do the same. We are actually getting calls from companies who want to sponsor - without having approached them first!
4. Post the sponsor information on the host web site as soon as you have confirmation. We want to give instant gratification to those who are stepping up to support our event.

Use a Social Web Service to Collect Registrations

1. Online registration sites have been available for many years. Now though, you can find ones with social web features that extend your event beyond the confines of your own network.
2. We chose Eventbrite, because it allows us all the great traditional features of tracking registration counts but it also features our event (if we choose, and we do!) in their community.
3. It allows us to tag our event to help other people and search engines discover us.
4. It allows us to customize our page and add a custom header graphic.
5. It has one-click "share" options to other sites such as Digg and del.icio.us.
6. It generates and RSS feed of all events we create. This is really useful if you put on a new event each month, as people who like and use RSS can be notified in this way.

Create Badges for Others to Post on Their Sites

1. Many bloggers love badges as it's a way of strengthening their personal brand. They get to associate themselves with other high profile events, as well as products and services.
2. Badges make it easy for those who love you to easily tell their connections about our event.
3. By making them ourselves, we control the brand of our event as it gets distributed out on the web.
4. Of course all of these inbound links from other high-ranking sites boost our search results very nicely too!

The important takeaway of this blog series is that you can use these tools for any type of conference. Even if you choose to just use one or two, you are already ahead of the game when it comes to traditional event planning. So please tell me, out of the many tools mentioned in these first two steps, which one)s) do you think you'll incorporate into planning your next event? And if you're still holding out, don't worry, There's more to come!

UPDATE: I changed the title of this post and the previous one to better reflect the content. Used to be "Planning a Web 2.0 Conference."

New Media Expo: Making a Daily Video Show

Please follow along with us as Shane and I present our session here in Las Vegas. We were chosen as one of 50 out of over 900 applications, and we are thrilled! Alas, we realize not everyone can come to the expo.

You can see our slides full size here.

We will be doing a dual track presentation! Two presenters, one handling right brain one handling left brain, one showing a live production demo while one talks strategy. Here's the video we hot that morning, edited in the session, and then uploaded. Delays due to poor availability of wifi - a chronic problem when traveling and at tech conferences especially!

Many thanks to our colleagues in this video:

Nikol Hasler	Midwest Teen Sex Show
Jason Van Orden	Internet Business Mastery
Tom Webster	Edison Media Research
Rob Sandie	Viddler
Leesa Barnes	Leesa Barnes