How to Use Stack Exchange Area51 Advertisements

I was part of the Project Managers Stack Exchange Private Beta. We were brainstorming some ideas as to how to promote the site, and so far the ideas we came up with include a Facebook page and blog articles. The idea of placing banner ads on a blog or website is of course another creative way to help spread the word.

The problem is, the only banner ads available are within the Stack Exchange network itself. They're essentially inlined into the page using data:image URLs, which doesn't make it easy to just grab some code and place it on your website.

Armed with Chrome Debugger, I set out to see what would be involved in placing an Area51 banner on my blog.

On one of the Stack Exchange sites, I used the inspector to view the HTML for one of the banner ads. It consists of inline CSS, a DIV and TABLE element that contains a hyperlink to the Area51 proposal, and the commit percent. The hyperlink innerHTML contained the name of the proposal.

While It's possible to paste the CSS, HTML, and JavaScript in an HTML page, the only way Blogger would accept the inlined CSS was through an IFRAME. As you can see, I've embedded the Running Q&A Proposal in this article:



DISCLAIMER: Stack Exchange and Area51 images and content are property of the Stack Exchange Network and are subject to the Terms and Conditions. Use of this content in this article falls within the "fair use" section of the Terms and Conditions. You must obtain written permission from Stack Exchange prior to use of this content.

Feel free to view the source of the IFRAME to get the code. Just paste everything within the opening and closing BODY tag on your site, or copy the entire HTML page to your Web server and use an IFRAME to embed the advertisement in the desired location.

I made comments in the code to show the 3 items that represent the proposal link, proposal display name, and percent committed.

View Ad Source

Since the view source link doesn't work in the inferior Internet Explorer browsers, you can also download the code here by right-clicking and selecting "Save File As", or "Save Link", or whatever the most popular way to save files in Internet Explorer is these days.