Whether adsense is the best way to make money from a blog or not is up for debate however few people would argue that its the most common advertising media on blogs. There are numerous ways to integrate adsense into your blog. I was helping Stephen Welton integrate adsense into his new blog and it dawned on me that this is something a lot of people might have trouble with.

Most wordpress bloggers use a plugin to do the trick. I personally tried a few and found that they didn’t do what i wanted them to so i simply added the code to the templates. Don’t be alarmed - integrating adsense into your wordpress blog is very straight forward.

If however you would prefer to use a plugin to add adsense into your blog i strongly recommend reading the ‘10 Best Wordpress Plugins for Google Adsense‘ which was posted last November at Quick Online Tips.

Before we proceed i need to remind you all that the maximum amount of adsense ads you are allowed on the one page is 3 ad units and one link unit. Bear this in mind when you are deciding where you want to place your google adsense ads. You can try and fool google all you want and place 5 ad units on the page but after the 3rd google ad no more will be listed

Where can you place your Google Adsense Ads

Every wordpress blog is different in design but essentially you can break any blog into 4 main areas :

• The Header
• The Sidebar(s)
• The Footer
• The Main Content Area

The main thing to note about the above is that generally speaking, the information in the header, sidebar(s) and footer are the exact same on every page on your blog. The main content area is different for every page on your blog ie. the main content area includes your posts, your archives, your pages, your categories and of course your home page.

Adding a google adsense ad unit to the header, sidebar(s) or footer is incredibly easy. All you need to do is open up the template you want in the theme editor and paste the code in there. Easy peasy!

I will assume that you know how to add the code to the first 3 areas. It’s the last area i want to talk about specifically in this article.

On Blogging Tips i have added adsense ads to two areas and its these areas i am going to use as examples of how to add adsense to your blog :

• Home Page - On my home page i have chosen to display 7 posts before the reader needs to move to the next page. I have therefore edited my index.php file to add google adsense after the 1st, 3rd and 5th posts. Again, 3 times is the most i can display google ads on a page and since i dont have any on the header, sidebars or footer, this is OK.
• Post Page - This is one of the most common places to place adsense. You need to edit your single.php file to place adsense here (sometimes this is called single post in your theme editor).

How to place integrate google adsense ad with your blog posts

This is my favourite place to add the adsense ads as its where all the content is!

As you can see from this page, I have added the google ads to the right hand side of the post and the content wraps around it. As i said before, this is a very common place to add your adsense ads - check out the latest posts from ProBlogger and John Chow to see how well it works. I’m not 100% certain that they have not used a plugin to achieve that but i assume they have used a similar method as me ie. they have used CSS (Cascading Style Sheets).

You need to use CSS to float the advert to the right hand side of the post. If you were to just place the google adsense code without the use of CSS the ad would display and then the content would display directly after it like this :

As you can see from the above image, if we don’t use CSS with the code the adverts are just displayed on top of the content. Not every pretty is it. I am now going to show how the ads look when we float the advert using CSS :

The CSS Code

This is the code you need to add to your stylesheet file in the theme editor

.adsense-right {
display:block;
float:right;
margin: 0px 0px 5px 10px;
}

It doesn’t matter where you add it in the stylesheet but if you’re not sure i recommend sticking it at the very bottom

If you are familiar with CSS you will realise that i have used a class instead of an ID. Since this is the only google adsense ad im aligning to the right on the page i could use an ID but it doesn’t matter what you use and keeping it as a class allows me to easily align ads to the right hand side in the future without changing anything. For more info check ‘The difference between an id and a class in CSS‘.

I will assume that a lot of you out there dont use CSS so i will break the code down to make you understand what we are doing here :

• adsense-right - This is simply the name of our CSS class that we will be referring to later. As long as you link to the right name it doesn’t matter what you call it. You could call or crazygorilla if you were so inclinded. adsense-right is suitable since its self explanatory. However, as i said, you can call it anything you want.
• display:block - All this does is ensure the ad is displayed in a block like format.
• float:right; - This floats our advert to the right hand side and allows the content to flow around it (note you could also add a position:relative; tag to the css code if it doesn’t render properly in older browsers).
• margin - Thje margin defines the space around our ad before the rest of the content. I have chosen to put no margin at the top and right hand side because there is already white space there. At the bottom i have a 10 pixel margin and a 5 pixel margin at the left hand side of the pad. If you want to understand this more please read Margins & Padding.

Hopefully you should now understand what the css code will do to our adsense ad. Its not just a matter of adding our code to the single.php template.

Editing the Single.php file

The single.php file controls what happens on the page with your full post. I assume you want to add the code to the same area i have in this page and to do that you need to add the code directly above the content of the post so you need to look for the function the_content.

In the default theme of wordpress this code looks like :

<?php the_content('<p class="serif">Read the rest of this entry </p>'); ?>


However, some themes display the content a little differently. For example in my theme i use :

<?php the_content("Continue Reading : " . the_title('','',false), 0). ""; ?>

Regardless of how its displayed, the function will have ‘the_content’ at the start of the php code.

Ok, you should now have found the line i was referring to. All you need to do is add the following code directly above that line :

<div class="adsense-right">
<!– Add your adsense code below this line –>

Your adsense javascript code goes here

<!– Add your adsense code above this line –>
</div>

Hey Presto - your adsense ad will now be wrapped around the right hand side of your blog posts. I use 120×240 pixel ads but you can use any size that fits well with your design.

Adding google adsense above the comments

I actually display two google ads on my blog posts. The other google ad is underneath the main article and directly before the comments (I use a 468×60). To do the same you need to add your adsense above the call to your comments template
ie. <?php comments_template(); // Get wp-comments.php template ?>.

So this area would look something like this :

<div align="center">
<!– Add your adsense code below this line –>

Your adsense javascript code goes here

<!– Add your adsense code above this line –>
</div>
<?php comments_template(); // Get wp-comments.php template ?>

Thats it. You should now be able to add adsense banners in the exact same places i have them on this page

How to place integrate google adsense ad on your home page

There are a number of ways you can integrate Google Adsense onto your home page. For a start you could just place a banner at the top and bottom of the page. However, you want better click thru rates and for that you need to integrage the ads better with your content.

You can apply the same technique that you used on your single.php template on the home page. The only limitation to this is that adsense will be displayed in the first 3 ads and the rest will not have ads aligned to the top right. This isn’t actually too bad of a way to do it though as the posts nearer the top will be read more than the posts at the bottom.

Check out Chris Stark’s site Fuzzy Future for the perfect example of this. If you view the page source you will see that Chris has embedded the content directly above the main content of each post with a CSS class called adsense-embed. This is the same technique which i explained above. The result is a google adsense banner aligned to the right hand side of the first 3 posts on the home page and the rest of the posts do not have ads. If you go back to his source you will notice that the posts without adsense banners still have a reference to the class adsense-embed but no google ad is added. This is simply because google stops will not let you post more than 3 ad units.

As i said before, i have did it a little differently but this method might suit a lot of you out there. All you need to do is apply the same modifications you did to your single post template.

Integrating Google Ads randomly on your home page

As i mentioned nearer the start of the article, on the home page of Blogging Tips i place google adsense after the 1st, 3rd and 5th posts.

I would love to take full credit for doing this but unfortunately i cannot - I used the fantastic adding adsense guide at tamba2.

However, i thought it would be good to show you the code i used on my index.php page. Have a good read of adding adsense - you should be able to follow it quite easily. If your struggling though, come back to this part and see the code that i have added - it might help to clarify things for you.

The code i added :

In my index.php page first i added the number count and the posts i want the displayed after. I added the code :

<!-- counter to add advertisements on index.php page -->
<?php
$postnum = 1;
$showadsense1 = 1;
$showadsense2 = 3;
$showadsense3 = 5;
?>
<!– counter to add advertisements on index.php page –>

directly above the line

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>


and then further down the page i display the google ad by adding :

<!--   //////////// add advertisements on index.php page -->
<?php if ($postnum == $showadsense1 || $postnum == $showadsense2 || $postnum == $showadsense3) { ?>
<p><center>
<!– Add your adsense code below this line –>

Your adsense javascript code goes here

<!– Add your adsense code above this line –>
</center></p>

<?php }
$postnum++; ?>
<!–   //////////// add advertisements on index.php page –>

directly above

</div> <!-- End of Post -->


Again, complete details of how to do this can be found here. If your struggling to understand it please leave a comment or start a thread in the forums and ill do my best to help.

Summary

By integrating ads better with the content on your blog you should hopefully see an incease in commissions from adsense (but dont hunt for me with a big stick if it doesn’t increase!!). If you are not too confident messing about with templates i would recommend checking out the ‘10 Best Wordpress Plugins for Google Adsense‘ listed at Quick Online Tips as you might find what you need there.

I hope this guide was easy to follow but if your still struggling let me know and ill clarify what i meant and do my best to help you get it working on your blog.

Good luck,
Kevin