Fixing the Twitpic Badge

A modified version of this trick to get badges to run after the page loads. A bit hacky, but it works wonders.

We need to specify a place for the code to be injected. This div is what twitpic’s java looks for, and will be where your badge is written.

<div id="twitpic_badge_container_v1" style="border: 1px solid rgb(255, 255, 255); padding: 15px; background-color: rgb(255, 255, 255);"></div>

Now at the footer of your page, we put in this script to stop twitpic from writing wherever it is placed.

<script language="javascript"><!--
var old_document_write = document.write;
var twitpic_badge_data = "";
document.write = function(s) {
twitpic_badge_data += s;
}
// --></script>

After, put in your whatever code is given to you by the twitpic badge generator. In our case it looks like this:

<script type="text/javascript" src="http://twitpic.com/badge/v1.jsx?username=uncharteddesign"></script>

Follow with the end script to make document.write function as normal.

<script language="javascript"><!--
document.write = old_document_write;
// --></script>

You should be able to grab and go from that. If you would like more explanation, just let me know.