I created a affiliate banner program for a client this week, and sent the final page over for review. Everything went well, except, my client asked "What is all that junk in the boxes? Our customers won't know what to do with that.".
I respectfully thought to myself, "If they don't know what the code is, they probably won't know what to do with it." But then again, sometimes the details can scare people off. If a non-webmaster sees a very large piece of code that they need to insert into one of their pages, they might get a little nervous, thinking it's more complex than it really is.
So, I decided to dumb it down a bit, by hiding the textarea which contained the code, and leveraging clippy. So, now the user initially sees the following:
The process is unbelievably simple, just drop your HTML inside the <param> and <embed> tags. Don't forget to change double quotes to single quotes so you don't freak out your browser's HTML parser.
Then, offer a "See Code" link for webmasters, which reveals the textarea.
<a class="see-code">See code</a> |
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="110" height="14">
<param name="movie" value="clippy.swf"/>
<param name="allowScriptAccess" value="always" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param NAME="FlashVars" value="text=MY (single quote) CODE HERE">
<param name="bgcolor" value="#ffffff">
<embed src="clippy.swf" width="110" height="14"
quality="high" allowScriptAccess="always" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="text=MY (single quote) CODE HERE" bgcolor="#ffffff" />
</object>
<br />
<textarea style="display: none;" onclick="this.select();">MY CODE HERE</textarea>
Just be sure to upload clippy.swf to your server somewhere, then drop in a little jQuery to reveal the textarea.
<script type="text/javascript">
$('.see-code').click(function() { $(this).next().next().next().slideToggle(); });
</script>