Adding a Banner With JavaScript

Meta

Instructions

You can use a tracking code JavaScript hack to add a banner at the top of your social network. On this example we show how to make some room for the banner at the top using CSS and then how to add a banner on the reserved area after the page is loaded.

Note: Running advertisement on a ning network without having the Run Your Own Ads premium service is against the Ning Terms of Service, so please make sure you pay for this benefit before trying to install this hack, so you don't risk account termination ;)

1. The first thing you need to do is to tweak the custom CSS for your network in order to open some space at the top, this example assumes you will use a banner with dimensions 728x90, so we will push all pages 94 pixels down using the following CSS:

   #xg {
   top:94px;
   position:relative;
   }

2. Since you are already dealing with the CSS, you might as well describe the positioning of your future banner, for this example we will setup the css rules for a banner container of id #adHack and centralize it horizontally with the following code:

#adHack{
left:50%;
margin-left:-364px;
position:absolute;
width:728px;
height:90px
top:30px;
}

3. The final step is to add a javascript code in your tracking box to modify the page after loading to insert the banner element on it. In this example I will use an static image, but you can replace the banner variable with any html dom element generated by your ads manager engine (normally another javascript). Replace the url in red with your image if you want a static banner:

   <script type='text/javascript'>
   var ningpage = document.getElementById('xg');
   var newelement = document.createElement('div');
   ningpage.parentNode.insertBefore(newelement, ningpage);
   newelement.id = 'adHack'
   newelement.setAttribute('align','center')
   //replace this element with your banner div or iframe generated by your ads manager
   banner = document.createElement('div')
   banner.innerHTML = '<img src="http://api.ning.com/files/HOOdfrsMhfPJE5U*CNo*tJu7pBGVJF0iiC9L1GEbhlGHivEO34QZKVRFwtmQABLq3J88KcaMBK*JV*Gx5AF0vhHZEQqD3CmQ/728x90.png">'
   newelement.appendChild(banner)
   </script>

4. Follow the instructions posted here to install this JavaScript tracking code hack.

<script type="text/javascript"><!--
google_ad_client = "pub-XXXXXXXXXXXXXXXX";
google_ad_slot = "XXXXXXXXXX";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<script type='text/javascript'>
var ningpage = document.getElementById('xg');
var newelement = document.createElement('div');
ningpage.parentNode.insertBefore(newelement, ningpage);
newelement.id = 'adHack'
newelement.setAttribute('align','center')
dojo.addOnLoad(function() {
var iframes = ningpage.parentNode.getElementsByTagName('IFRAME'); 
for(var i=iframes.length-1; i>=0; i--){
  if(iframes[i].getAttribute('name')=='google_ads_frame'){
      banner = iframes[i]
      break;
  }
} 
if(banner){
  newelement.appendChild(banner)
}
});
</script>