Putting Ads into Widgets

From developer.newsgator.com

Jump to: navigation, search

If you have ad code that you'd like to place in a widget, there are a few approaches for doing so. Our framework supports the inclusion of ads, so based on the ad code type you can use one of the approaches outlined below. They are listed from simplest to more advanced, and have a lot to do with what type of ad script you are using. It is important to note whether or not your ad code uses document.write. If it does, you can either use the simplest approach or, for more control over the code, overwrite the document.write function within the widget. Placing Google ads is also described in this article.

The Simplest Approach

The easiest way to put an ad into a widget is by using an iframe. Simply place the ad on a page external to the widget, and reference it in your widget HTML like so: 

<iframe src="myadpage.html"></iframe>

Google Ads

If you want to place a Google ad directly into the widget, you still have to take an iframe approach but you can control it all within the widget JavaScript. First, put a place-holder for your ad in the widget HTML (notice that you should be using unique buzz IDs on your elements, in the event that more than one of your widgets with the same ad code are on a page): 

<div id="ngAd_${BuzzId}_Container"></div>

Create a <textarea> somewhere in your widget HTML. This will house the iframe HTML that contains the ad. It should look something like this: 

<textarea id="ngAd_${BuzzId}" style="display:none">
{cdata}
	<html>
		<BODY>
			<!--- GOOGLE AD CODE HERE --->
		</BODY>
	</HTML>
{/cdata}
</textarea>

In the JavaScript pane, create a function that will populate the iframe. This function will write the HTML within the textarea into the iframe after the widget loads. Since occasionally the function will attempt to run before the container div has been rendered, you may need to add a timeout to the function. 

function loadAd_${BuzzId}(iframeId)
{	
	iframeId = iframeId + ${BuzzId};
	var html = document.getElementById(iframeId).value;
	var newFrame = document.createElement("iframe");
	
	newFrame.name = iframeId;
	newFrame.id = iframeId;

	newFrame.setAttribute("align", "center");
	newFrame.setAttribute("border", "0");
	newFrame.setAttribute("frameborder", "0");
	try
	{
		newFrame.frameBorder = 0; //sets frameborder for IE
	} catch (e) {}
	newFrame.setAttribute("vspace", 0);
	newFrame.setAttribute("hspace", 0);

	newFrame.setAttribute("height", 60);
	newFrame.setAttribute("width", 234);

	newFrame.setAttribute("marginheight", "0");
	newFrame.setAttribute("marginwidth", "0");
	newFrame.setAttribute("scrolling", "no");
	newFrame.className = "ng_iframe";

	var container = document.getElementById(iframeId + "_Container");
	container.innerHtml = "";
	container.appendChild(newFrame);

	// write a script into the <iframe>

	try
	{
		frames[iframeId].document.write(html);
		frames[iframeId].document.close();
	}catch (e){ alert(e.description); }

};

And finally, in the HTML pane call your function to load the ad once the widget is loaded: 

{eval}
AddPostRenderCallback(function(){
	window["loadAd_" + BuzzId]("ngAd_");
});
{/eval}

Ads That Use document.write

If your ad script uses document.write, you'll have to take a slightly different approach. Since widgets use document.write to render on the page, the function in your ad might interfere with the widget loading.

In your <iframe> that will house the ad: 

<textarea id="ngAd_${BuzzId}"" style="display: none;">
{cdata}
	<html>
	<head>
		<script language="javascript">
		
		document.write = function(value)
		{
			var target = document.getElementById("target");
			target.innerHTML = value;		
		}
		
		</script>
	</head>
	<body>
		<div id="target"></div>
		<!--- YOUR AD SCRIPT HERE --->
	</body>
</html>
{/cdata}
</textarea>

And the JavaScript function: 

function loadAd_${BuzzId}(iframeId)
{
	iframeId = iframeId + ${BuzzId};
	var rnd = Math.floor(Math.random()*101)
	var html = document.getElementById(iframeId).value;

	//replace random number placeholder on the ad script query string
	var regex = /<random_number>/gi;
	html = html.replace(regex, rnd);

	var newFrame = document.createElement("iframe");
	newFrame.name = iframeId;
	newFrame.id = iframeId;

	newFrame.setAttribute("border", "0");
	newFrame.setAttribute("frameborder", "0");
	try
	{
		newFrame.frameBorder = 0; //sets frameborder for IE
	} catch (e) {}
	newFrame.setAttribute("vspace", 0);
	newFrame.setAttribute("hspace", 0);
	newFrame.setAttribute("marginheight", "0");
	newFrame.setAttribute("marginwidth", "0");
	newFrame.setAttribute("scrolling", "no");
	newFrame.className = "ng_iframe";
        
	var container = document.getElementById(iframeId + "_Container");

	container.innerHTML = "";
        container.appendChild(newFrame);
		
	// write a script into the <iframe>
	try
	{
		if (document.all) //handle for IE
		{
			try { frames[iframeId].document.close(); } catch (e) {  }
			frames[iframeId].document.clear();
			frames[iframeId].document.write(html);
			frames[iframeId].document.close();
		}
		else
		{
			frames[iframeId].document.write(html);
			frames[iframeId].document.close();
		}
	}catch (e){  }
}
Retrieved from "http://developer.newsgator.com/wiki/index.php?title=Putting_Ads_into_Widgets"
Personal tools