Web Development Class: Adsense in Joomla!

By Nathan Segal

One of the most common forms of advertising is the Adsense program by by Google. It's relatively easy to set up a variety of ad formats. In this article we're going to show you how to use the Google Adsense Easy Extension with Joomla!.

There are several different ways that you can use Adsense on your site. We'll look at two of these options here. One approach is to use tower ads. Another way is to insert banner ads into the footer. With the latter option it's possible to rotate the ads.

Before we dive into this subject, there's one more thing to know. You can insert ads into your pages manually, but this process can become labor-intensive if you have multiple pages and different styles of ads that you want to use. It's far easier to make use of an extension, which is what we'll do here.

I chose the Phoca - Google Adsense Easy extension because it seemed to be relatively straightforward. Also, it had 41 votes and 22 reviews, most of which were really positive. Note that this extension is a module.

One more thing about extensions; it's really important to check out the votes, but more importantly, I recommend that you read the documentation to see what's involved and have a look at the user comments. That will tell you very quickly whether or not this is an extension you want to use.


When you decide to download this extenstion, you'll probably be overwhelmed the number of choices on the page. The screen shot above will make it easier for you to find the extension. Downloading it is a snap and only takes a couple of seconds.

To install it, go to Extensions: Install/Uninstall, browse for the extension. then click on the Upload File and Install button. This will only take a few seconds.


Next, you need to activate the module. To do so, go to Extensions: Module Manager. In the Module Manager page, you'll see a full list of all the modules, if you don't see the Phoca - Google AdSense Easy Module, enter Phoca in the Filter parameters box and click on Go. This will bring up the Phoca module. Click on the "X" under the Enabled heading to enable it.

Module New

Now you're ready to use the module. Click on the New button at the top right. In the Module [New] page, click on Phoca - Google Adsense Easy.

Module Edit

This brings up the Module [Edit] page and now you're ready to insert your Adsense code. In this case, I've chosen to use a 160x600 pixel tower ad. Here are the settings:

Title: 160x600 Tower Ad
Show Title: No
Enabled: Yes
Position: Right
Order: 4: Who's Online
Access Level: Public
Menus: All

You'll note that in the Adsense Code box in the right, I pasted in my code from Adsense directly without modification. All the modifications were done in Adsense. There were no IP's to block nor other content. All that's necessary is to save the changes.

Tower Ad

Refresh the frontend.

Regarding Adsense, I've chosen to use a particular ad style, largely due to articles that I've read which indicate that this type of ad is the one that gets the most clickthroughs. Here are my Adsense settings:

Border: # FFFFF
Title: # 0000FF
Background: # FFFFFF
Text: # 191919
URL: # 666666
Font Family: Use Account Default
Font Size: Use Account Default

To create new modules and positions, simply go back to Extensions: Module Manager. Click on the New button at the top right and in the Module [New] page, click on Phoca - Google Adsense Easy to begin the process again.

Placing Adsense Ads into the Footer

Component Banner

In this section we'll place an Adsense ad into the footer of this template. To get started, go to Components: Banner: Banner. Click on the New button at the top right.

Banner New

In the Banner [New] page, enter the following:

Name: 468x60 Adsense Banner
Show Banner: Yes
Sticky: No
Category: Text Ads (this is where you set your own category)
Client Name: Open Source Matters (apply your own client settings here)
Impressions Purchased: Unlimited
Click URL: Leave empty
Custom Banner Code: Paste in your Adsense code

Save the changes.

Banner Manager

In the Banner Manager, note the new entry at the bottom of the page. Also note all the items with a checkmark. These will rotate in the footer at the bottom of the page.


Refresh the frontend until the Adsense banner ad appears in the footer.

You now know of a simple way to add Adsense advertising to your site. If you're not satisfied with the colors, you can experiment with those on the Google end, then copy those over to your template until you find one that works.

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date