Are you trying to add the Quantcast badge code to your website, but having problems getting it to show up for you? Then read this post for the solution, if you can make it through my nerd tech talk.

I’m a nerd. There, I’ve declared it to the world. No, I don’t wear glasses with tape in the middle, or even have a pocket protector. {Now a pocket projector – that would be cool. Something you could carry in your pocket – or purse – that would project movies onto any solid surface. That would rock my world. I’m sure something similar exists, but I digress.}

In school, my subjects were math & science. It wasn’t that they were my favorite subjects, but I “got” them. They just made sense to me. I couldn’t teach and explain math to others {trust me, I tried tutoring & failed}, but somehow I knew the answers. On my ACT, I got a 34 in the Science section. And that excited me. See? Told ya, I’m a nerd.

So why do I share this with you? Because one of my favorite things to do is troubleshoot. And if you want to know why I like troubleshooting so much, the reason is because I’m a nerd.

Yesterday, I had a colleague email that she was having trouble getting the Quantcast badge to appear on her site & wanted to know if I could take a look. If you don’t know, Quantcast provides audience measurements by collecting data from your site’s visitors, and then gives you a breakdown of your visitors’ demographics.

Quantcast provides different badges you can display on your site with some information on your visitors (like how many visit each month). It’s supposed to be a simple copy & paste job. You copy the HTML code that Quantcast provides you & then paste it into your site. And the simple badges work just like that. However, there are a couple customizable badges with Sparkline, and the HTML code from Quantcast was not working for those. Instead of displaying the badge, it was showing an iframe of the Quantcast website with the Quantcast logo, slogan & a big rectangle link that said “Home” in it:

So, where's the widget?

So, I went to my first place to look for a solution → Google. Surprisingly, I wasn’t able to find any fixes. So, I started troubleshooting. I won’t bore you with the details of what didn’t work & how I came up with the solution. All that matters is that there is a fix. I’m sharing it here in case anybody else is having this problem & goes searching for an answer. The problem was in the source (src) link in the HTML iframe code provided by Quantcast.

{Please note that every time you see yourdomain.com in the following code examples, this should be replaced with the domain of the site for which you are wanting to display audience metrics.}

The default widget code for US People per month with Sparkline is:

<iframe src="http://widget.quantcast.com/yourdomain.com/9" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="120"></iframe>

The code above will display the right widget. The widgets with Sparkline allow you to set some custom variables for the widget’s display, and this is where it gets tricky.

To show the number of visitors per month, for the previous 90 days, the code from Quantcast looks like this: {note: this is what is not working}

<iframe src="http://widget.quantcast.com/yourdomain.com/9&timeWidth=30&daysOfData=90" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="120"></iframe>

Notice that the difference between this code and the one above it {that works} is the src url. The customized widget adds the following to the end of the widget url:

&timeWidth=30&daysOfData=90

This specific section needs to be moved to before the “/9″ in the url {9 being the identifier for the type of widget}.

So instead of this:

src="http://widget.quantcast.com/yourdomain.com/9&timeWidth=30&daysOfData=90"

You should use this:

src="http://widget.quantcast.com/yourdomain.com&timeWidth=30&daysOfData=90/9"

The final, working HTML code you should paste into your site should look like this:

<iframe src="http://widget.quantcast.com/yourdomain.com&timeWidth=30&daysOfData=90/9" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="160" height="120"></iframe>

If this solution works for you, your widget will look similar to this:

{this is the badge using audience data for quantcast.com}

In the midst of creating an online store, using the Prestashop e-commerce shopping cart, I ran into a little error while using Cufon (which generates fonts & renders them in the browser with JavaScript). Using Cufon, at it’s very basic level (of replacing text with graphics), was fairly simple to set up in a Prestashop theme. However, when I went to enable the :hover option for a replaced element, with the normal code structure, the e-commerce site would load a blank page.

Normal usage:

<script type="text/javascript">
Cufon.set('fontFamily', 'Vintage');
Cufon.replace('h4');
Cufon.replace('h2 a', {
	hover: true
});
 </script>

I struggled with finding a solution to this last night. I tried removing the line breaks around hover:true, adding quotes around different areas, deleting the brackets, but nothing worked. Then, this morning, I decided to google the problem, and within minutes, I found the solution in the Prestashop forums. It was an ah-ha moment, when I found the solution. It was so simple, yet nothing I would have tried on my own…

The Solution: Surround the JavaScript code with {literal} tags.

Like so:

<script type="text/javascript">
{literal}
Cufon.set('fontFamily', 'Vintage');
Cufon.replace('h4');
Cufon.replace('h2 a', {
	hover: true
});
{/literal}
 </script>