« How and Why to Use Polls on Your Blog | Main | Wow! This Makes Me Feel Really great! »

John T. Unger

How To: Insert Google AdSense Ads Between Posts on Your TypePad Blog

John T. Unger June 6, 2006

UPDATE: Newer instructions that work with TypePad's updated code base can be found in the TypePad Knowledge Base here.

Asha Dornfest sent me an email a while back, asking if I would be interested in a tutorial on how to insert google AdSense ads between posts. Definitely! I've had several requests for this hack and since I don't actually have an AdSense account of my own, I was more than pleased to turn the job over to her.

She did a fantastic job! Her tutorial is clearly written and easy to follow, while maintaining a nice personal tone that makes it more entertaining and less intimidating than some tutorials. I'm totally impressed, and I hope that she continues to submit more tutorials in the future. Not many writers can balance clarity and conversation tone as well as she did. Asha, you rock and you can tell everybody I said so!

I've included the full tutorial here in the extended entry, exactly as Asha wrote it. I would also recommend dropping by her blog to read the full entry she posted. Before getting into the tutorial, she recounts some of her experiences with AdSense including lessons learned, and some good advice on placement of ads within your blog layout. Thanks, Asha, for granting me one-time rights to reproduce an unedited excerpt of the tutorial on TypePad Hacks.

Tags: , , , , , , , ,

Before you begin

  • You need to be using TypePad Pro Advanced Templates so you can fiddle with TypePad tags. HTML know-how is helpful here, but not absolutely necessary if you can deal with brackets and are good at following directions.
  • You also need to be a member of the Google AdSense program.
  • You'll be doing plenty of cutting and pasting between Google and TypePad, so using a browser that supports tabs (such as Firefox) wouldn't hurt, either.

The hack in theory: Setting the lastn and offset attributes of the <MTEntries> tag

<MTEntries> is a container tag that represents the list of posts in your page. Whenever you see a list of posts in your blog, whether on the home page or an archive page, that list begins with the <MTEntries> opening tag and ends with </MTEntries> closing tag.

The key to inserting AdSense code (or anything else) between posts is to take advantage of two attributes of the <MTEntries> tag: lastn and offset. These attributes work together to control how many posts are visible inside the <MTEntries> container.

The value of lastn determines how many posts are visible. For example:

<MTEntries lastn="2">
...
</MTEntries>

specifies that this list contains the two most recent blog entries.

The offset value, when used together with lastn, enables you to change the starting point of your entry list. For example:

<MTEntries lastn="8" offset="2">
...
</MTEntries>

specifies that this list contains eight blog entries, but skips the first two entries and starts with the third.

Imagine, then, what happens when you combine the two sets of <MTEntries> containers with a bit of Google AdSense code. For example:

<MTEntries lastn="2">
...
</MTEntries>

[insert AdSense Code here]

<MTEntries lastn="8" offset="2">
...
</MTEntries>

creates a page that displays ten blog entries. Entries 1 and 2 appear at the top of the page, followed by a Google AdSense unit, followed by entries 3-10.

The <MTEntries> tag lives in the "entry-list" module included in the Main Index template. So, to change the <MTEntries> tag in your blog, you'll need to create a duplicate of the entry-list module. In the duplicate, you'll tinker with the <MTEntries> tag as I outline below, paste in your AdSense code, save the new module, and then swap out the default entry-list module for the new-and-improved module in your Main Index template. Easy! (Really.)

BIG, FAT CAVEAT: The only problem with using the lastn attribute - and it's a biggie - is that it restricts the display to entries posted within the last 30 days. If yours is a high-frequency blog, with new posts every day or two, you're fine. But if you only post once a week, which amounts to approximately four posts every 30 days, or if you want to include AdSense ads in your archive pages, your entry list won't display fully. I got around this on the Parent Hacks category archive pages by placing my AdSense unit at the top of the entry list, avoiding lastn altogether (here's an example).

Get the hack in theory? Time to apply it to your own blog.

Step 1: Decide on your layout.

Obviously, how you want your finished page to look will determine what size AdSense unit you'll use, and how you'll alter your blog's code.

My first attempt involved placing half-banners after every second blog entry. At the time, my home page contained ten entries, so I inserted a total of three half-banners, figuring that inserting more would result in diminishing returns as they'd be too far down the page to get many clicks.

I later changed the setup to a single medium rectangle after the first blog entry. The resulting code was much simpler, and the returns were similar to the first setup. In the interest of brevity, this tutorial highlights how to build the second setup (medium rectangle between first and second post), but the concept behind both layouts is the same; choose whichever suits you.

Step 2: Generate the AdSense code you'll eventually paste into your template.

1) Log into your AdSense account and generate your ad code.

I found that 234 x 60 half banners and 300 x 250 medium rectangles fit nicely into the body of the page. I recommend choosing a color scheme that blends with the text of your blog entries (a strategy most other bloggers would agree works well).

2) Copy the AdSense code and paste it into a sticky note or plain text file so you can grab it later.

Step 3: Copy the original code for the entry-list module from the TypePad documentation.

1) Open a second tab in your browser (or a new window if you're not using a tabbed browser) and go to the Advanced Templates: Template Module page in the TypePad Knowledge Base.

This page contains all the original code for the default template modules.

2) Select the contents of the entry-list box and press Command+ C (or Ctrl + C) to copy the code into your clipboard memory.

Step 4: Create a custom entry-list module.

1) Open a third browser tab and log into your TypePad account. Access your blog's design template.

[Paranoid aside: if, like me, you're nervous about working on your live template, I strongly suggest creating a copy of your current design, fiddling with the copy, and then applying the design to your blog only when you're sure it works properly. As hacks go, this one is pretty low-risk as you're working with modules, most of which have backup copies in the TypePad documentation, but still, it's a good habit to develop.]

2) In the Edit Current Design tab, click the "Create new template module" link.

3) In the Create New Template tab that appears, name the new module "entry-list-main."

You want to name the module something other than "entry-list," as the original entry-list module also appears in the Category Archive and Date-based Archive templates. The module you're creating will only appear in the Main Index Template, hence the unique name.

4) Click inside the Template Body box and then press Command + V (Ctrl + V) to paste the original entry-list code (it's still sitting in your clipboard memory, remember?).

5) Hit the Enter key a few times to insert a bit of white space beneath the code.

This is simply a helpful visual cue -- you'll eventually paste your AdSense code into this white space).

6) Now press Command + V (Ctrl + V) again to paste a second copy of the original entry-list code directly beneath the first set.

The module should now contain two identical sets of <MTEntries> containers.

7) Click the Save button in TypePad. (I'm a compulsive saver. Humor me.)

Step 5: Alter the <MTEntries> tags in the custom entry-list-main module

1) In the first <MTEntries> tag, set the value of the lastn attribute.

This is the number of blog entries you want to appear before your AdSense unit. In Parent Hacks, I display a single post before my AdSense unit, so my first <MTEntries> tag looks like this:

<MTEntries lastn="1">
...
</MTEntries>

(In English: show only the first entry)

2) In the second <MTEntries> tag, set the values of both lastn and offset.

In this case, the value of lastn is the number of blog entries you want to appear after the AdSense unit. The value of offset should take into account the lastn value of the first <MTEntries> tag. In Parent Hacks, I wanted the home page to contain a total of ten entries. Because the first entry was already visible thanks to the first <MTEntries> container, the second <MTEntries> tag looks like this:

<MTEntries lastn="9" offset="1">
...
</MTEntries>

(In English: show the next nine entries, starting with the second entry)

If, instead of a single AdSense unit between the first and second post, you want to insert AdSense after say, every second post, your entry-list-main module would look something like this:

<MTEntries lastn="2">
...
</MTEntries>

<MTEntries lastn="2" offset="2">
...
</MTEntries>

<MTEntries lastn="2" offset="4">
...
</MTEntries>

<MTEntries lastn="2" offset="6">
...
</MTEntries>

<MTEntries lastn="2" offset="8">
...
</MTEntries>

Step 6: Insert AdSense code between the <MTEntries> containers

1) Copy and paste the AdSense code you generated in Step 1 into the white space between the <MTEntries> containers.

If you want to display a single AdSense unit (as I do on the Parent Hacks home page), you'll only need to do this once.

<MTEntries lastn="1">
...
</MTEntries>

[AdSense code goes here]

<MTEntries lastn="9" offset="1">
...
</MTEntries>

Otherwise, paste the code between each set of <MTEntries> containers.

<MTEntries lastn="2">
...
</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="2">
...
</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="4">
...
</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="6">
...
</MTEntries>

[AdSense code goes here]

<MTEntries lastn="2" offset="8">
...
</MTEntries>

2) Optional: I find the ad units look nicer with a little padding underneath, so I surround each bit of AdSense code with a <div style="padding-bottom: 20px"></div>.

3) Save!

Step 7: Include the new entry-list-main module in the Main Index template.

1) In the Select Template To Edit dropdown list, select Main Index Template, and then click the Go button.

2) In the template body, scroll down to about the middle of the page until you see the following tag:

<$MTWeblogIncludeModule module="entry-list"$>

3) Change the tag as follows:

<$MTInclude module="entry-list-main"$>

That's it! Now save and publish the template (you can publish index pages only to save time), and behold your site in all its revenue-earning glory.

More Like This: Advanced Templates , Blog Tools , Hacks for Layout + Design

Comments

Rich Owings says:

Nice. Yet another hack on my to implement list!

BTW, John. I succeeded in getting a 728 x 15 AdSense ad under the banner (using a modified version of your chrome menu bar hack). I have some cleanup to do but will try to send info on it soon.

Serge Lescouarnec says:

After seeing your Blog featured on Typepad today, I was glad when I visited it to see your post on the 'Ad Placement' issue. I have always thought that having Ads between posts and if possible related to their content makes better sense.
One question, can you follow the same guidelines for 'Affiliate Programs' ads and 'Yahoo Ads'?

Keep up the good work.

Serge
Biz:
http://www.njconcierges.com
Blog:
http://www.sergetheconcierge.com

jlt says:

Well, I was with you up until the last step. I went to edit my Main Index Template, and found that I don't have anything called

<$MTWeblogIncludeModule module="entry-list"$>

I don't have a module, just all the constituent parts. Not sure why. I was a pretty early adopter of a pro account, before modules were used. I really want to use this technique, but I have no idea how. Any suggestions??

john t unger says:

Rich,

The modified menu to adbar hack looks great! We should talk about developing some instructions so others can do what you did!

john t unger says:

Serge,

I would think that you could use the same hack for any other ad program… Just insert the code for Yahoo or whoever where you would put the google code in this example. I would try it on a test blog first, before altering your live blog's code just to make sure it works (but that's always a good idea).

If you try it out, let me know and I'll link to you as an example!

john t unger says:

jlt,

Yeah, I have one of those older blogs too… and I've been putting off much needed changes forever because I didn't want to deal with the different code structure.

I'm glad you brought this up, because it gives me an idea. I *was* going to suggest (I can already hear the screaming) updating your template by recreating it in basic, converting it and then copying all the edits you've made into the new advanced template. Yeah, way too much work.

Instead, try this: go to this page in TypePad's knowledge base and copy the standard code for the main index template. In an external html or text editor, compare it to the one you now have and add any of the custom code from your current template to the example from TypePad. Then (after you back up your current file) replace your main index template with the new code that combines the two.

Is that clear? If not, email or call me and I'll try to make it clearer.

Thanks for bring this up right when you did! You just saved me a *ton* of work!

Nice blog by the way! You've obviously put some work into it.

jlt says:

John, that makes sense. I may need to email you, but let's see how I do on my own!

jlt says:

well, john, that looks NOTHING like mine. And I haven't done much futzing with mine. The problem is, I have no idea why mine is twice as big as their version - I guess because now modules handle a lot of stuff. But since I don't have the modules, if I switch over to using that code, my site will tank, right?

I think I'm screwed. I hate to say it, but typepad is really bad about informing users of changes in implementation. At one point, they stopped using one of the old servers and my sites went dead for several days when I was out of the area. They claimed over and over that they had emailed me many times- when i finally communicated with the person who sent out the emails, they admitted that a few people had fallen between the cracks and hadn't been notified.

So maybe you are right. I am trying to implement a redesign anyway, even though i know next to zero CSS... I hired a designer who is working on it in his spare time and maybe I should just wait.

jlt says:

I can't seem to do it... I don't trust myself. I have zero idea of what I'm looking at - I can tell which bits of code are discrete sections, but my index is like 10 times longer than the stock page and I have no idea what does what. On top of that, mine is a three column center and the stock layout is two column right. I guess we'll talk via email, but I don't see it working easily.

Strange, I never saw anything anywhere about Typepad changing how this kind of thing is handled structurally (i.e., all in the index templates as opposed to in modules). When did they change over to the new system? Did they tell everyone, and I just missed it?

john t unger says:

jlt,

Send me an email and we can work this out off-site. I think I'll do a post about how to convert older templates to the current settings afterwards…

I'm not getting email notifications today (perhaps because of all the insane traffic I *am* getting) so I don't have your email address yet. If you use the email form on my contact page or call on the phone, I'll see what we can figure out to get your blog set up.

PS: I think the templates changed just about one year ago. The reason you have so much more code in your older template is because most of the code used to be in one file, and when they changed it it was to use MTInclude tags so that different parts of the code could be brought in using MT tags. It's actually a much easier and more verstile way to handle it, but converting is a bit of a pain if your blog is older than the new structure.

Rich Owings says:

Hmm, I'm wondering if I can modify this hack to include an ad WITHIN a post. I used to run one in the upper left hand corner of all my reviews. The click thru rate was nice, but when people viewed a category page, it would try to serve up many Google ads, a violation of their terms of service, so I took it down. A modified version of this hack may give me a way to control it. I'm already running an ad at the end of each review, by putting it on the "continued" page. I'll report back if I try and can make it work.

john t unger says:

Rich,

definitely let me know how the modification turns out!

Al says:

Hey thanks guys! John, for the site and Asha for the tutorial. It was well-written and worked like a charm!

republica says:

Hey John & Asha...firstly I wanted to say thank you for the great piece of code...it works brilliantly. Question for you, that I was wondering if you could shed some light on.

On our Typepad enabled site, www.republicaupdate.com, we are currently running Feedburner flares at the bottom of each post which includes "Subscribe to this feed"; "E-mail this"; as well as "Feedburner's Ad Program"(which you are running as well) that runs thru their feed flares. Whenever I insert the above Adsense code that you have provided, it disables our flares across the board in all posts. Would you happen to know why this might be happening? And if there might be a fix for this. Ideally I would like to run Feedburner ads as well as Google Ads.

Keep up the great work!!!

Best,

[R]

john t unger says:

R—

I'm not really sure why that would be happening… I would suggest contacting google and asking them if they are disabling the feeflare ads somehow as a violation of their TOS. I'd also fire off an email to Feedburner's tech guys. They're very good about tracking down answers to this kind of question quickly.

Do let me know what you find out!

[R] says:

Finally figured it out it was a coding issue...now it seems to be working fine. Thanks!

Divisionbell says:

Wanted to know if there was an easier way to insert the code, something like replace the inline with adsense? Thanks

Sam Mooney says:

Hi

I hope you - or someone - can help. I managed to insert my google code, add a banner menu, and make a couple of other changes. It all works perfectly in Firefox. It's a mess in Explorer although the menu works. The placement of everything else is bizarre and there's ony one post showing on my home page.

I'm going to leave the blog up the way it is for a day in case someone can take a look.

It's www.audefrance.com

Thanks,

Sam Mooney

john t unger says:

Hi Sam,

It looks great in Firefox on my mac. When I look at it in IE (version 5.2.3) I can still see all the posts, but they show up under the sidebar.

Usually this happens when there's a tag somewhere that's not closed or an orphaned div tag. I suggest double checking the code in your templates and sidebar to see if all your tags are properly closed. I'd try the sidebar first… it's less code to search through and it's also where I most commonly make that mistake.

Let me know if that helps!

Sam Mooney says:

Hi John

Yup, it was a div tag. Thanks. Now I have to fix the padding on the ads. LOL.

Phil Van Treuren says:

Worked well on my blog, you can check it out at http://www.walmartfiles.com

By the way, anyone know how to alter this code to place ads at the end of individual posts on permalinks? Thanks . . .

iPodder says:

Worth noting that Google limits the number of ads shown per page to just 4.

Including the adsense code with the posts will mean that the ad will only show in the first 4 post listed on any particular page. Even less than the first 4 posts if you have the adsense code in your header.

I've played around with most placement positions and settled for having the code outside of the posts.

Joseph says:

One of the simplest tutorial I have seen.
Now adays there are many tools like urbanread.com which helps you to increase your adsense revenue.I started with pasting it on my blog it will be helpfull someone helps me with urbanread.com

Kelly says:

Okay, I did well with the ads in between posts on the main index and added them to my permalinks, but whenever I try to implement the same task on my Category and Date archives, it makes all my posts disappeared. I took out the "lastn" bit by creating another module and changing the code in the date/category templates to reflect that, but apparently I did something wrong.

How exactly do you place the ads on past archives if you haven't posted that regularly in the past? Thanks!

john t unger says:

Hi Kelly,

The most common reason that posts disappear is an unclosed HTML tag somewhere in your template. This is something that can easily happen when cutting and pasting.

Also, you might check to make sure that all the code is still in your template... Sometimes when I cut and paste into a TypePad template window, I find that there's an invisible character that makes TypePad delete everything in the template after the character that got pasted in. Don't know what's up with that exactly, but it has happened to me many times when I've pasted in code from dreamweaver or even from a text file.

The comments to this entry are closed.

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d8341c4fdf53ef00d834c79ba469e2

Listed below are links to weblogs that reference How To: Insert Google AdSense Ads Between Posts on Your TypePad Blog:

» Inserting Content Between Posts on Your TypePad Blog from UK Bloggers Guide
I've been using this hack for some time. It allows you to display content beween your posts on your TypePad blog. The guide talks of inserting Google Adsense code between posts, but you can insert any content. See the guide. [Read More]

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media

Subscribe

Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count

Search

Socialize

Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page


    Grazr

    Colophon

    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License