Wednesday, November 18, 2009

Display Adsense Ad on the Latest Post Only

I have browsed tens of websites that provide hacks to display Google Adsense ads in the post body. There are several drawbacks with these hacks. Just to name a couple:
  1. As you might already know, you can display a maximum of 3 Adsense ad units on a page. The ads are displayed in the first 3 posts on the main page. That means that you cannot have ads in the side bars (unless sidebars are rendered first in your template).

  2. If you do put ad units in the side bars, then on the main blog page, the sections of the side bar containing the ad units display as empty blocks, which looks awkward.

Then there are hacks which take this to the next level. They will make an ad unit display only on the item page. This way, you still have 2 more ad units at your disposal that can be added to the side bars, or any other section of your blog. However, the problem is that the ad units are not shown inside the posts on the main page. This way, you waste one ad unit on the main page, which is probably your no. 1 landing page.

I really wanted a better solution. The ideal solution I had in mind was:
  1. On the main page, only the latest (top most) post should contain the ad unit. Same goes for the archive page.

  2. On the item page, the ad unit should be displayed inside the post.

With this arrangement, I'll always have the top most post on any page (main, item or archive) contain an ad unit. And I'll always have 2 other ad units at my disposal.

Now coming to the point - how do I get such an arrangement? I spent a lot of time searching on the web trying to accomplish this. I left comments on popular blog posts on this subject, sent emails to blog authors, but all in vain. So, I decided to figure out a solution on my own, and that's exactly what I did.

The challenge was really to identify the latest post. Unfortunately, I couldn't find a property like blog:post.index, which could serve the purpose. So, I resorted to using a dirty trick that solves the problem.

Every post has a unique 'Post ID'. For example, if you go to the edit page of a post, the URL would be like (the text in bold is the post ID):
http://www.blogger.com/post-edit.g?blogID=9179404155691939198&postID=91589727429XXXXXXXX

We need to use this post ID to identify the top most post. Here's the hack that I used:
  1. Go to your blog Layout -> Edit HTML page.

  2. Click on "Download Full Template" to backup your template.

  3. Select the checkbox "Expand Widget Templates".

  4. Search for string "data:post.body/".

  5. You'll see the above string in a section like this:

        <div class='post-body entry-content'>
          <p><data:post.body/></p>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>

  6. Insert the following code before or after the above section:

      <b:if cond='data:blog.pageType == "item"'>
    // Your adsense code here
        <b:else/>
          <b:if cond='data:post.id == "91589727429XXXXXXXX"'>
    // Your adsense code here
          </b:if>
      </b:if>

  7. If you want the ad above the content of your post, your final code might look like this:

      <b:if cond='data:blog.pageType == "item"'>
    // Your adsense code here
        <b:else/>
          <b:if cond='data:post.id == "91589727429XXXXXXXX"'>
    // Your adsense code here
          </b:if>
      </b:if>

        <div class='post-body entry-content'>
          <p><data:post.body/></p>
          <div style='clear: both;'/> <!-- clear for photos floats -->
        </div>

  8. Replace the text in red with your adsense code. Make sure you convert the adsense code before inserting it into the template. You can use the converter here.

  9. Replace the text in blue with the post ID of your latest post. The painful part is that you need to update the post ID everytime you publish a new post. I know it's extra work, but it works. If I find a better solution, I'll post an update here.

  10. Click on "Preview". You may not be able to see the ad in the preview, but if you do not receive any errors, it means that you can safely click on "Save Template".

That's all there is to this hack. Let me know if you face any problem with this hack. Though I'm still learning and don't claim to know everything, I'll do my best to help. If you are familiar with a better solution, I'll be glad to hear from you.

No comments:

Post a Comment

Click here to comment on this post