<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Uncharted Design - Blog &#187; slow badge</title>
	<atom:link href="http://www.uncharteddesign.com/blog/tag/slow-badge/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.uncharteddesign.com/blog</link>
	<description></description>
	<lastBuildDate>Tue, 07 Sep 2010 23:15:24 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Fixing the Twitpic Badge</title>
		<link>http://www.uncharteddesign.com/blog/2009/01/fixing-the-twitpic-badge/</link>
		<comments>http://www.uncharteddesign.com/blog/2009/01/fixing-the-twitpic-badge/#comments</comments>
		<pubDate>Wed, 14 Jan 2009 22:32:59 +0000</pubDate>
		<dc:creator>Jordan</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[slow badge]]></category>
		<category><![CDATA[twitpic badge]]></category>

		<guid isPermaLink="false">http://www.uncharteddesign.com/blog/?p=58</guid>
		<description><![CDATA[When first building our site, we noticed that it wasn't very snappy. When Twitpic went down and our site didn't load we knew what to fix.  This trick forces their script to run at the end of your content, rather than wherever the badge is on your site. ]]></description>
			<content:encoded><![CDATA[<p>A modified version of <a href="http://www.myelin.co.nz/post/2006/6/9/" target="_self">this trick</a> to get badges to run after the page loads. A bit hacky, but it works wonders.</p>
<p>We need to specify a place for the code to be injected. This div is what twitpic&#8217;s java looks for, and will be where your badge is written.</p>
<p><code>&lt;div id="twitpic_badge_container_v1" style="border: 1px solid rgb(255, 255, 255); padding: 15px; background-color: rgb(255, 255, 255);"&gt;&lt;/div&gt;</code></p>
<p>Now at the footer of your page, we put in this script to stop twitpic from writing wherever it is placed.</p>
<p><code>&lt;script language="javascript"&gt;&lt;!--<br />
var old_document_write = document.write;<br />
var twitpic_badge_data = "";<br />
document.write = function(s) {<br />
twitpic_badge_data += s;<br />
}<br />
// --&gt;&lt;/script&gt;</code></p>
<p>After, put in your whatever code is given to you by the twitpic <a href="http://twitpic.com/badge.do">badge generator</a>.  In our case it looks like this:</p>
<p><code>&lt;script type="text/javascript" src="http://twitpic.com/badge/v1.jsx?username=uncharteddesign"&gt;&lt;/script&gt;</code></p>
<p>Follow with the end script to make document.write function as normal.</p>
<p><code>&lt;script language="javascript"&gt;&lt;!--<br />
document.write = old_document_write;<br />
// --&gt;&lt;/script&gt;</code></p>
<p>You should be able to grab and go from that. If you would like more explanation, just let me know.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uncharteddesign.com/blog/2009/01/fixing-the-twitpic-badge/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
	</channel>
</rss>
