JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Add Google Ads in Header! (Read Disclaimer!)

Several people have voiced concerns about using iframes to display Google Adsense, understandably. This is all news to me. So here is my disclaimer: Use At Your Own Risk!

I think it's the manner in which some people use iframes to display adsense, but not certain. My guess is as good as yours. The way I read it, if you're intentionally doing something underhanded like stuffing keywords, or for example adding words to do something like bring up sexy ads -- which unfortunately typically get more clicks. Since we have no option with Ning until July or after, I don't know any other way to do this, that I can explain here.

I definitely will not take responsibility for anyone getting banned on this. I really cannot. If you have an Adsense account, you need to do your own research.

Network Creators often ask: "How do I put my Google Ads in the header?"

How To Add Google Ads or Other Content to Your Header:
Summary - Prepare your content and add to an external HTML. Call into your Network Header via the Analytics Box, using an iframe and JavaScript.

Create your HTML.
For example, if you are adding Google Ads, copy/paste the code into a new HTML file. I usually wrap a DIV around my code, and I add a BODY tag with a white background. Here is the example of my Google Ad code (728 by 15) text links. This example is the entire HTML file.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ning Directory - Directory of Ning Networks</title>
</head>

<body bgcolor=white><div align=center>
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>

</html>

How to center content in your HTML - Within your external HTML, add a DIV with align=center, around your header content. See example HTML file above.
Background color - the best way to set iframe background color: add the body tag to your external HTML, like in example above. This is an important step.
After you have completed your HTML file, upload to your file server. If you don't have a file server, upload to your Ning Network via a Blog (be sure to click on document upload icon).
When you upload to your blog, copy the HTML path. You must know the HTML path/URL.
Now it's time to prepare your code for the Analytics box.
Focusing on the example code below, replace the src="your.html" with your HTML file path.
Adjust the iframe width and height to fit your HTML content area. For example, my Google Ad space is 728 by 15. For my Analytics Box code I will use width=735 and height=20. I want to allow for a few extra pixels, for proper spacing.
After you make your edits, add the example code below, to your Analytics box - Manage/Analytics, and SAVE.
For this example, we are adding the iframe after the Menu Navigation Bar. If you want to add above the menu, just change "after" to "before".

0 members favorited this

Replies to This Discussion

Permalink Reply by Put on May 22, 2010 at 3:09am

How do I center it. I did all the steps, but it won't center. It only center on the HTML

Permalink Reply by JenSocial on May 22, 2010 at 11:45am

I can't quite figure out what you've added. It's almost like you've added the iframe that calls your html with the ads, twice. When I look at the code via Firebug I see 2 iframes that each contain the google ads. If it hits me what's happened, I'll write again. It could just have something to do with Firebug.

And you could try centering with the code for the Analytics box. I do urge you to check the code though, and make sure you haven't added duplicate code somewhere.

<div align=center id='custom_ads'></div>

Best Regards,
Jen

Permalink Reply by Put on May 29, 2010 at 7:51pm

Thanks now it work. On your code for Analytics box there wasn't a "center"

Permalink Reply by Put on May 30, 2010 at 9:25pm

Jen, I was wondering how do you put ads on each forum,video and on the comment box. Like here you have ads on the forum and below the comment box

Permalink Reply by JenSocial on June 2, 2010 at 2:48pm

The Ads under the forum, video, and comment boxes is fairly extensive custom code. It's not something I could explain in so many words. Sorry about that. Plus, it's one of those that I'm not willing to take on the risks of answering questions, and preventing potential issues across networks.

Basically I write injection points within an external js file. And call the js in via the Analytics box. It's confusing, and one of those I offer within my customization projects. But as in any hack, even when I charge to do it, I warn the receiver that hacks can break any time Ning updates their platform. I promise, if it were easier, I would share. :-)

Best Regards,
Jen

Permalink Reply by LeafsZone on June 2, 2010 at 2:39pm

Hmm, I'm having trouble also. I'm not inserting ads, rather trying to insert a twitter icon. I replaced the "your.html" with the twitter icon link, but it places it under the menu bar.. not sure if I did something wrong... or what?

Permalink Reply by JenSocial on June 2, 2010 at 2:52pm

I'm not certain without seeing the code. The one thing that comes to mind, if you use the "after", instead of the "before", it will insert your html after the navigation bar. If you notice in #9, it explains this:

For this example, we are adding the iframe after the Menu Navigation Bar. If you want to add above the menu, just change "after" to "before".

Basically, you should be able to insert any html using these instructions.

Hope that helps,
Jen

Permalink Reply by JenSocial on June 10, 2010 at 2:20pm

I understand. It gets confusing for sure. Be sure to follow each step, very carefully. The code you're referring to is javascript, not CSS. ;-) Are you adding to Analytics Box via Manage/Analytics? Please see #8: After you make your edits, add the example code below, to your Analytics box - Manage/Analytics, and SAVE.

Best,
Jen

Permalink Reply by JenSocial on June 10, 2010 at 2:50pm

k, the reason I said what I said was because (1) it was stripping characters, and if you added javascript to advanced CSS box, it would do this. And (2) you said you were new to CSS, and it's easy to confuse the 2. :-)

Keep me posted.
Best to you,
Jen

Permalink Reply by JenSocial on June 10, 2010 at 2:49pm

Yeah, I think you're right Nicole. I bet that will solve EnerjizedLife's issue. I need to add the align=center to iframe in tutorial. In the past it wasn't needed. But, lately I've seen this come up on several of the tutorials using DIVs and iframes.
Thanks for your help!
Jen

Permalink Reply by Forbes on August 24, 2010 at 12:49pm