Skip to content


How to add Google Adsense code to Gallery 3

I already presented Gallery 3 in a previous post. I just upgraded gal.patheticcockroach.com to Gallery 3.0.2, so I had to place the stat tracking code again, as well as to replace the .htaccess with my modified version for pretty URLs. And in the process I decided to add some Adsense ads, too. After some thinking I figured that a good place to put them would be at the top, just below the menu and above the gallery titles.

More precisely, the place we want to reach is just between <div id="yui-main"> and <div class="yui-b">. First problem: there’s not Adsense ad that matches the available space: the 768×90 leaderboard is just a bit too wide. I picked a simple solution: I placed 2 ads side by side: a 468×60 banner plus a 234×60 half-banner. It just fits the available width (in the default theme, Wind, at least) and compared to the big leaderboard it also uses 33% less height (I’ve always thought that 90 pixels is starting to get a bit too big).

Let’s get started then; once again the file to edit is /themes/wind/views/page.html.php.
Find:
<div id="yui-main">
<div class="yui-b">

…and between those two add your Adsense units. You need to place them in a few divs so that they lay side by side instead of stacking on each other. Here’s a full code sample (NB: I wrote the divs added for layout in bold):

<div id=”yui-main”>
<div style=”width:702px;height:60px;border:1px solid #bbb;margin-left:10px;”>
<div style=”float:left;”>
<script type=”text/javascript”><!–
google_ad_client = “ca-pub-9471398824076666”;
/* 468×60 for pcr gallery */
google_ad_slot = “8724036694”;
google_ad_width = 468;
google_ad_height = 60;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>
<div style=”float:left;”>
<script type=”text/javascript”><!–
google_ad_client = “ca-pub-9471398824076666”;
/* 234×60 for pcr gallery */
google_ad_slot = “2196553125”;
google_ad_width = 234;
google_ad_height = 60;
//–>
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>
</div>
</div>

<div class=”yui-b”>

That’s all 🙂 You can see the result there.
Note that the reason why there’s a border here is because I used it to find the proper dimensions. It actually looks nice too IMO, however it will spoil the layout a bit for people with ad-blocking software… so you may want to remove the height as well as the border for the div containing the ads. That’s what I did on my gallery indeed.

NB: if you’re not the I-modify-files-by-hand type, you can use a plugin/module such as this one, too. Personally I’m always a bit afraid of those Gallery modules, they don’t seem to be regularly maintained yet…

Posted in Google, web development.


One Response

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Tygarbyte says

    Thanks, your entry helped me lot – Im not very good at coding….. so it took me about 4 hrs to figure out how to place two adsense adds in Gallery 3.0.2

    The addsense plugin/module you mentiond covers the title bar in my instance. Doesnt look good.

    I also added a tower adsens 160×600 on the left column, using the codeblock pugin. But had to edit/add the adsense code to the code_block.html.php file. and enable the codeblock module.

    ie i added

    Your google code here..

    ### in front of the original code below.



Some HTML is OK

or, reply to this post via trackback.

Sorry about the CAPTCHA that requires JS. If you really don't want to enable JS and still want to comment, you can send me your comment via e-mail and I'll post it for you.

Please solve the CAPTCHA below in order to fight spamWordPress CAPTCHA