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. NOTE: You can add other content in your HTML, not just Google Ad Code.

  1. Create your HTML.
  2. 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.

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

<body bgcolor=white><div align=center>
<script type="text/javascript"><!--
google_ad_client = "pub-3491017725492xxx";
/* 728x15, created 7/30/08 */
google_ad_slot = "9036396336";
google_ad_width = 728;
google_ad_height = 15;
<script type="text/javascript"


  1. 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.
  2. 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.
  3. 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).
  4. When you upload to your blog, copy the HTML path. You must know the HTML path/URL.
  5. Now it's time to prepare your code for the Analytics box.
  6. Focusing on the example code below, replace the src="your.html" with your HTML file path.
  7. 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.
  8. After you make your edits, add the example code below, to your Analytics box - Manage/Analytics, and SAVE.
  9. 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".
<script type="text/javascript">
x$("#xg_navigation").after("<div id='custom_ads'></div>");
var ad_html = '<iframe frameborder="0" scrolling="no" allowtransparency="true" marginheight="0" marginwidth="0" src="your.html" width="735px" height="20px"></iframe>';

Tags: ad in header, add ad to header, add content to header, customize header, google ads in header, header, header ad, header content, header like ning

Views: 1553

Reply to This

Replies to This Discussion

Hi Stefaan,
Sure. You can place below Ningbar, or above the masthead.
Here's the topbar version, just modify the first part of this line:
x$("#xg_navigation").after("<div id='custom_ads'></div>");
And above masthead:

Hey Jen,

Almost there...

Would it be possible to move it some pixels down also? Or should I try with adding 2 rows in the linked html. The first row could specify the pixels I would like to go down.
Got it figured out:

style="padding-top:100px"; added to the iframe ;)
Good deal, and good job! ;-)


What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next!

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums.

APIsThe ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Jurrien Mammen replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"+1 for Mailchimp if time is limited maybe consider connecting to (easy way to connect…"
27 minutes ago
Jorge Nava replied to Rowald's discussion 'Fase 2'
"I agree with you, i also consider that have been waiting for things to improve since almost two…"
2 hours ago
Jords favorited Eric Suesz's page Upgrading to Ning 3.0: FAQs
4 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
".js-followUnfollow {  display: none;}"
4 hours ago
soaringeagle replied to Phil McCluskey's discussion 'Introducing Email Notifications for Blogs and Forums'
"hide it with css"
4 hours ago
Kos replied to ceri shaw's discussion 'Disabling Timestamp'
"Ceri here you go.  Note:  idk how this may impact your SEO b/c Google looks for…"
4 hours ago
Just Asking replied to Dutchlabel's discussion '2 discussions in forum'
"I'm not sure I follow what you're asking, but I'll give it a shot.   When you…"
4 hours ago
Just Asking replied to Mary Jane Peterson's discussion 'Please help Icon needed for chat for 2.0'
"Can you clarify?  Are you trying to add chat to your network (done through features layout) or…"
4 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service