This tutorial shows you how to display Google Adsense ads on your Joomla! 1.7.x website without installing an extension.
Requires you have a Google Adsense account. Should work for other ad providers that provide you with a code snippet for ads on your site.
Joomla! 1.7.0 has backend compatibility problems with IE 8 (and possibly other browsers). These instructions worked using FireFox 6.0, but will not work using IE 8 because you will be unable to edit the Global Configuration page using IE 8.
NOTE: Joomla! 1.7.1 does not have this problem and works as expected.
Some images may be clicked for larger sizes.
It is very easy to place Google Adsense ads on your Joomla! site without installing an extension.
Yet, the last time I looked, there were dozens of different Joomla! extensions to help you with Google Adsense ads on your site.
Embedding ads directly within your article requires a plug-in and is not covered by this tutorial.
Determine Ad Placement
You need to find a place for the ads on your site.
Ads are typically placed at the:
- top of the page
- bottom of the page
- side of the page
See this article on how to enable Joomla 1.7 to display module positions.
To reveal the module positions available in your Joomla! template, append
?tp=1
to the end of your URL. As shown below, the various module positions available on this site are revealed:
You can choose to place ads in a currently empty module position, for example: position-6, position-8, position-3, position-0, position-12, position-2 , position-9, position-10, position-11 or position-14 in the case of this template. Or you can place them in already occupied module positions, for example, position-5.
Where you place the ad will determine the type of ad you place. For instance, if you choose to place an ad on the left position, then a narrow and tall ad makes more sense than a short, wide ad.
Remember the name of the module position where you want to place your ad.
Disabling the HTML Editor
Joomla! tries very hard to prevent users from entering malicious code. This also means it prevents adding legitimate code. To get around this we need to disable the HTML editor. A compatibility problem between Joomla! 1.7.0 and IE 8 means you will need to use a different browser to do this. FireFox 6.0 worked for me. Joomla! 1.7.1 does not have this problem.
1) Select Global Configuration from the Site menu item:
2) Select Editor – No Editor for the Default WYSIWYG Editor:
3) Click on Save & Close to save the changes:
After you are done, you can restore the editor to the TinyMCE editor (or which ever editor you were using).
4) Click on Article Manager from the Content menu (non-intuitive, I know):
5) Select the Options icon:
6) Click on the Text Filters tab:
7) Scroll down to Super Users and select No Filtering from the dropdown box.
NOTE: this step assumes you are logged in as an administrator and thus have super user privileges.
8) Scroll back up and click on Save & Close:
After you are done, you can restore the option to Black List (default).
Adding Adsense
You require an Adsense account.
You also need the HTML code Google will provide you for your ad.
1) Select Module Manager from the Extensions menu item.
2) Click on New to create a new module.
3) Click on Custom HTML:
4) Fill in the module information.
Details
- Title: enter a title for this module. If you want to display the title, something like Sponsored by is a good choice.
- Show Title: select Yes to display the title, No to not display the title.
- Position:·from the dropdown list, select the name of the module position you decided on when determining your ad placement
- Status: set to Published to show / display the module.
- Access: ensure Public is selected.
- Order: if there are other modules occupying your selected position, you can choose the ordering of the modules.
- Start Publishing: leave empty.
- Finish Publishing: leave blank
- Language: leave as All.
- Note: optional note to display in the module list.
Custom Output
This is where you paste the HTML code that Google Adsense gives you.
Advanced Formatting Trick
It is likely that the ads will be left justified in the module position.
You can horizontally center the ads by adding
<div align=”center”>
before the HTML code Google Adsense gave you and adding
</div>
at the end of the Adsense code.
Module Assignment
Ensure On all pages is selected. This will place the ad module on all pages of your Joomla! site.
If you want some pages to be ad free, then select one of the other Module Assignment options (No pages, Only on the pages selected, or On all pages except those selected) and then select only those pages were you want the ads to appear or not appear.
5) Click on Save & Close
6) Observe that the module has been correctly installed. To locate the newly created module, I find it easiest to click on the ID column and sort the column in descending order (the newly created module will have the largest module number):
7) Check that the ads show up and are correctly positioned on your site (in this case, I created a single Adsense module in position-10:
Thank you.
I found this tutorial is very helpful.
Very detail indeed. I’m not a programmer, just a “social” user of joomla. Previously I used joomla 1.5, but my hosting provider provides with joomla 1.7 and I decided to give a try.
Thank you.
You solved my 2 days problem in 5 minutes reading your posting.
Hope could get to know you and your web activities more.
It’s a pleasure if you can contact me via my email provided here.
Cheers,
Mike R
You’re welcome. I am glad you found the article helpful.
Hi, thanks for your very informative knowledge sharing about this. I had a hard time for sometimes because J1.7 does not have code view like in J1.5 and it made me frustrated. Now I can go on.
You’re welcome.
There are a number of things that changed from between 1.5 and 1.6/1.7 that make some configurations harder now.
Thanks for taking the time to write this, I found it very helpful 🙂
Hi there! Thank you for your information. I followed everything (using Firefox) and after everything, I am not seeing any ads on my blog. I pasted it on Position 0 for your information. I just saw the script on my website instead of the ad.
Any advise please?
Thanks for your comment.
From your description, it sounds like HTML filtering has not been completely disabled on your Joomla! site – telling me that you see the script on your site instead of an ad it what leads me to believe this.
Confirm that (1) your default editor [step 2] is set to Editor – none, (2) text filtering [step 7] is set to No Filtering. If either of these is not correctly set up, Joomla! will filter out a lot of the javascript code that Google gives you.
If you have no editor and no filtering enabled as per steps 2 and 7, then check the code pasted into the Custom HTML Ouput module – if it is truncated / filtered / not what you originally pasted in there, then it was filtered out by Joomla!. You will need to repaste the code back in.
i tried it but it didn’t work it for me in the website.
please any help or do you have any alternative options/
i even tried the modules and the plugin but all the mess up………..
so need really help.
What is not working?
(1) If you are getting a blank space instead of an ad, this is probably because you have a new ad unit and have to wait about 30 minutes for it to become active.
(2) If your adsense script is being corrupted (check that the script in your custom HTML module is the same as Adsense provided you), then you have failed to (1) disable the HTML editor and (2) disable text filtering (or both).
(3) If your adsense script is identical to what Google provided, then:
hey
i tried your way (it didnt work, i couldnt choose default HTML editor to NONE)) i pasted AdSense code into template (index.php). there is no content but there is empty space with dimension as choosen in AdSense. do you have any advice for it. sorry for my english, i may try to explain something different way.
regards
jacek
Sorry to hear you couldn’t select HTML editor to NONE.
Yes, you can simply paste the adsense code into your index.php file.
The blank space you are seeing is probably the ad. However, when you create a new ad unit, it takes about 20-30 minutes for it to become active and start displaying ads. Just be patient and wait about 30 minutes. You should start seeing ads after that.
Thanks for your comment.
Thank you sooooooooooooo much for this tutorial.
My website had been running addless for months now… and I never found a way to set up my google ads until I found your tutorial. There are many tutorials out there and this is the best, by far… not to mention that it was the only one that worked… at least for me xD
Ty again =)
I am glad it worked for you and I appreciate your feedback.