I was poking around today trying to figure out a way to add Google AdSense units to my blog posts. Even though I don't try to make money with CODEGATOR I still need to pay the hosting fees from GoDaddy, and every little bit of $$$ helps in that regard, so I decided to embed a couple of ad units into each blog post in the hope that someone might take pity on me and actually click on one of my advertisements every now and then. Anyway, here is what I went through today to get this to work.

Since CODEGATOR is built on Community Server 2007 I naturally began my quest by checking out the forums on http://www.communityserver.org. The first thing I noticed was the InlineAdModule module that is part of the CSModule developer contest. After downloading the zipfile and installing it on my sandbox I quickly figured out that it doesn't work.   I even went back to the forums several times to make sure I wasn't overlooking anything, but no, it doesn't work.

Next I found a post in the forums entitled 'Embedding AdSense unit within blog post' that seemed very promising. It started out with more info about the InlineAdModule but then switched to a technique wherein the Google AdSense HTML was posted directly into one or more master pages. That approach probably works but I just didn't want to bother with it. The biggest reason was that it makes modifying my advertisements difficult since I would have to manually edit master pages any time I wanted to make a change. Yuck!

As I was pondering my situation I hit upon another, slightly different technique - one that wouldn't require me to write code, and would still be fairly flexible at runtime. Here is what I did:

Step 1: My blogs all use the lean & green theme, so I started by modifying the Themes\Blogs\leanandgreen\post.aspx file. I added the following lines to the very top of the page:

<%@ Register TagPrefix="CSUserControl" TagName="AdTop" Src="Common/Ad-Top.ascx" %>
<%@ Register TagPrefix="CSUserControl" TagName="AdBottom" Src="Common/Ad-Bottom.ascx" %>

I added those two lines right under the one that looks like this:

<%@ Import namespace="CommunityServer.Blogs.Components"%>

Step 2: In the same file I then added the following lines:

<CSControl:AdPart runat = "Server" contentname="StandardBlogTop" ContentCssClass="CommonContentPartBorderOff" ContentHoverCssClass="CommonContentPartBorderOn">
     <DefaultContentTemplate>
         <CSUserControl:AdTop runat="server" />
     </DefaultContentTemplate>
 </CSControl:AdPart>

I added this section right after the line that looks like this:

<asp:Content ContentPlaceHolderID="bcr" runat="Server">

Step 3: Once more in the same file I added the following lines:

 <CSControl:AdPart ID="AdPart1" runat="Server" ContentName="StandardBlogBottom" ContentCssClass="CommonContentPartBorderOff" ContentHoverCssClass="CommonContentPartBorderOn">
     <DefaultContentTemplate>
         <CSUserControl:AdBottom ID="AdBottom1" runat="server" />
     </DefaultContentTemplate>
 </CSControl:AdPart> 

Now, I had to play around with this section a little to get it to look right. I ended up putting it right before the section that produces the comments area for the post. The section right before where I added my text looked like this:

<CSBlog:PostAttachmentData runat="server" LinkTo="Attachment" Tag="Div" Property="FileName"><LeaderTemplate><span class="em">Attachment:</span> </LeaderTemplate></CSBlog:PostAttachmentData> 
        </div>                           
    </div>

[Here is where I added the text shown above]

Now, you might want to put the second AdSense section somewhere else, or your theme file might by slightly different than mine, so you may need to play with the positioning a little to get things right.

Step 4: I saved the modified post.aspx file then I copied these two files:

• Themes\leanandgreen\Common\ad-bottom.ascx
• Themes\leanandgreen\Common\ad-top.ascx

To a new directory that I created at: Themes\Blogs\leanandgreen\Common

Step 5: I then navigated into: Control Panel, Administration, System Tools, Manage/Create Articles and created two articles named: StandardBlogBottom & StandardBlogTop. Into each file I pasted the Google AdSense HTML that I obtained from Google's site. One of the nice things about this approach is that I didn't need to replace any characters in the HTML or otherwise reformat anything. 

Note that in order for this step to work you need to put the CS editor into "HTML" mode, which is done by clicking the button that looks like this:

If you don't put the editor into "HTML" mode it will try to convert what you paste from clipboard into HTML, which wont be pretty. Once the editor is in "HTML" mode you can paste the AdSense HTML without problems.

Step 6: Of course, you have to have advertisements turned on in order for this to work on your site. In order to do that, navigate to: Control Panel, Administration, System Tools, Manage Ads and check the boxes entitled: "Enable Ads" & "Enable Inline Ad Control".

Step 7: Enjoy your newly monitized blogging platform.

One final note, the advertisements at the top and bottom of this page are the actual ones that I added using this technique. The whole thing took me about 30 minutes to figure out, complete, debug, and finalize. I really think this is a good way to tackle this problem because you can change your ads at any time without having to FTP into your website and modify master pages directly.

I hope this tip helps.

Technorati Tags:  Community Server Themes Google AdSense Master Pages Articles Blogs