Home
Solutions
Tutorials
Tips
Customizing OL
Help and How To
Downloads
Services
Office Live Video
Common Problems
Contact Us
Link Exchange

 

 

 Insert Google Adsense (IFrame)

How To Videos:

 

Watch Video

 

Download Video (ZIP file)

 

Instructions

 

This method uses IFrame and an external file to display ads, advantage to this, is that you can easily manage the ads on your site, since the code is in only one place, plus if you want ads in the side navigation, you need to use the IFrame method.

 

1. Sign up for a Google Account and Adsense,
 

2. Copy the following code into Notepad:

 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Google Adsense</title>

<base target="_parent">

</head>

<body>

<!--insert Google Adsense Code Here-->

</body>

</html>

 

3. With the Adsense code from Google paste it into notepad where the code above indicates and save it as "adsense.htm" and upload it to the documents on your website.

4. Now paste the following code using the HTML module into your website where you want Adsense. Replacing "/documents/adsense.htm" with the location of the adsense.htm file.  Also change the height and width of the IFrame if needed.

 

<iframe src="/documents/adsense.htm" width="728px" height="90px" frameborder="0" marginwidth ="0px" marginheight="0px" scrolling="no"></iframe>

 

 

Placing Ads in the Left Navigation Bar

1.  Copy the following code below into notepad.

 

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" omit-xml-declaration="yes"/>

<xsl:template match="/">

<div id="adLoader">

 

</div>

<script type="text/javascript">
var leftNav = document.getElementById('IWS_WH_Elem_LeftNav');
leftNav.appendChild(document.getElementById('adLoader'));

</script>

</xsl:template>

</xsl:stylesheet>

 

2.  Copy your Google Adsense ad code and paste it between the div tags.

 

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" omit-xml-declaration="yes"/>

<xsl:template match="/">

<div id="adLoader">

<script type="text/javascript"><!--
google_ad_client = "pub-4699595034616080";
/* 120x240, created 6/4/08 */
google_ad_slot = "9208350676";
google_ad_width = 120;
google_ad_height = 240;
//-->

</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 

</div>

<script type="text/javascript">
var leftNav = document.getElementById('IWS_WH_Elem_LeftNav');
leftNav.appendChild(document.getElementById('adLoader'));

</script>

</xsl:template>

</xsl:stylesheet>

 

3.  Add <![CDATA[ before the comment tag <!-- and add ]]> after the ending comment tag -->.

 

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html" omit-xml-declaration="yes"/>

<xsl:template match="/">

<div id="adLoader">

<script type="text/javascript"><![CDATA[<!--
google_ad_client = "pub-4699595034616080";
/* 120x240, created 6/4/08 */
google_ad_slot = "9208350676";
google_ad_width = 120;
google_ad_height = 240;
//-->]]>

</script>

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">

</script> 

</div>

<script type="text/javascript">
var leftNav = document.getElementById('IWS_WH_Elem_LeftNav');
leftNav.appendChild(document.getElementById('adLoader'));

</script>

</xsl:template>

</xsl:stylesheet>

 

4.  Next use a custom footer module, and paste the completed code from notepad into the custom footer module, removing everything else that was previously in the custom footer module.

 

 

 
  Page 1  Go back to XSLT solution for Google Adsense