Adding Google Adsense to my blog

So after seeing my server logs and realizing that people actually read my blog in some significant quantities, I decided to see if the adding Google Adsense ads to the site could generate enough to pay for my daily latte habit. Here is the blow by blow implementation….

Step 1: Get a Google AdSense account. You would think that this is trivial. It is not. I first applied about six months ago when I had very little traffic and infrequent posts. I was denied. They sent a nice mail saying “your site doesn’t meet the criteria”. Maybe one wrinkle is that my blog is at a subdomain off my main domain. The blog is at www.martinandalex.com/blog and Google won’t let you enter that subdomain, only the top level which is www.martinandalex.com. When their bots went there and found a personal web page, instead of the insightful, engaging blog content, they probably ran for cover. When you sign up for an AdSense account, you use your e-mail address to log-on. So when I went back this time and tried to apply for an account they said I (my e-mail address) was not elligible (based on six months ago scan). Being wiley and persistent, I signed on with a different e-mail address and gave the domain again. This time their spiders came out and found the blog, all the insightful postings, and approved my application. Now I don’t know if the AdSense criteria have changed in six months, or if simply over time and more traffic, my site now qualifies. It is a bit of a design error with Google that they blackball your e-mail address and only allow one domain per e-mail address. Good thing e-mail addresses are easy to come by. So I got the account, figured out what ad format I wanted for the site and copied the javascript code. Ready to paste into my Movable Type index template.

But not so fast….

Step 2. Add the AdSense code to your Blog template. Nothing could be as easy as it sounds. My Movable Type Index template was two columns with a small left sidebar and a variable content main body. I wanted the ads down the right side of the blog. This means a three column blog. So I had to break it down into substeps.

Step 2a. Make the blog a three column format. Now not being a programmer (anymore), I asked my pal John who is. He didn’t know exactly how to add a right column, but pointed out the Cascading Style Sheets part of MT configuration. So I had to become a CSS programmer. MovableType does not provide any three column templates standard (bummer). Luckilly Google provided the answer at this very helpful site. There was the three column CSS code. And different variations. I chose one with a fixed left and fixed right margin with floating text in the middle. That means that as you resize the window, the text in the middle will resize and wrap as the left/right stay there. The main work was creating a “Rightlinks” and “Leftlinks” division in the style sheet. And modifying slightly the #Content (center) portion code. Here is the relevant new code which I added to styles-site.css in MT.

                  #content {
background:#FFF;
margin-right:163px;
margin-left:225px;
margin-bottom:20px;
border:1px solid #FFF;
voice-family: “\”}\“”;
voice-family: inherit;
margin-left: 225px;
margin-right:163px;
}
html>body #centercontent {
margin-left: 225px;
margin-right:163px;
};
}

#leftlinks {
position: absolute;
left: 10px;
top: 85px;
border:1px solid #FFF;
width:200px;
}

#rightlinks {
position: absolute;
right: 10px;
top: 80px;
border:1px solid #FFF;
width:164px;
}

Step 2b. Change the index template to pick up the new style sheets. Basically, you have to rename your “links” division to “leftlinks” and then add a “rightlinks” division. Sounds simple, but after a couple of placements, I kept getting the adsense stuff either appended after the bottom of the “powered by” part of the left links or written directly over top of the calendar part. There was a very nice white space over on the right that was totally unoccupied. After a couple hours of futzing around, I decided to go back to an old programmer trick of counting begins and ends. It looked to me like the “rightlink” division was being treated as part of the “leftlinks” division. If that was so, there was probably a missing “< / div >” somewhere. That was in fact the case. When I fixed that, the following code slapped the google Adsense ads right over on the right like it is supposed to. (had to insert some spaces to get MT to see this as text and not try to run the code).

< div id=“rightlinks”>

< div class=“side”>
< script type=“text/javascript”>< /script>
< script type=“text/javascript”
src=“http://pagead2.googlesyndication.com/pagead/show\_ads.js">
< /script>
< /div>

< /div>

Step 3. Rebuild the site and start cashing the checks. Well, no checks yet, but I will keep you updated.

In all it took about five yours to implement. Too long for the average guy. And I had to become a CSS and HTML programmer. This has to be an order of magnitude easier to do.