"They're coming. Ning has said over and over they're working on them. Be…"
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. NOTE: You can add other content in your HTML, not just Google Ad Code.
<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"><!--
google_ad_client = "pub-3491017725492xxx";
/* 728x15, created 7/30/08 */
google_ad_slot = "9036396336";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</body>
</html>
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>';
x$("#custom_ads").html(ad_html);
</script>
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.
- 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.
<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"><!--
google_ad_client = "pub-3491017725492xxx";
/* 728x15, created 7/30/08 */
google_ad_slot = "9036396336";
google_ad_width = 728;
google_ad_height = 15;
//-->
</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".
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>';
x$("#custom_ads").html(ad_html);
</script>
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
Replies to This Discussion
-
Permalink Reply by Amit S on -
This works great and have been using it from one of your previous tutorial...
I have been struggling with how to put an adsense unit (728 * 90) next to the logo... Any idea?
-
NC for HirePermalink Reply by Jen on -
Within your HTML, create floating DIVs or a table. Insert your logo in one column or div, and your adsense in the other.
Float Tutorial:
http://css.maxdesign.com.au/floatutorial/
DIV example with styling in DIV, instead of individual style tag like the tutorial:
<div style="float:left; padding-right:15px;">This is the space for my logo.</div><div style="float:left;">This is the space for my adsense.</div>
-
Permalink Reply by Amit S on
-
Sorry i guess i wasn't that clear. I understand the table concept..however wouldn't that still appear below the navigation bar, what i meant was, if i have uploaded the logo though the appearance tab (from the manage tab) and then i want to insert the ad next to that logo... Like its there in usually most of the sites...
Like in this attached jpeg (just for example)
-
NC for HirePermalink Reply by Jen on -
You do one of the following:
1. Leave the logo uploaded via the appearance/all options tab, if it will load evenly under your new iframe.
2. Don't load it via the appearance/all options, and just load via your iframe. But, if for some reason your iframe doesn't load or loads slow, your logo will be missing.
3. Or, float your adsense iframe to the right of logo, using the position parameter something like this:
x$("#xn_bar").after("<div style='position:absolute; left:65%; top:36px;' id='custom_ads'></div>");
-
NC for HirePermalink Reply by Garfield Creator on -
You're too good. It's like each question is an opponent thrown into a gladiator ring and after a few minutes you say "who's next!" It's fun to watch. You are so generous.
-
NC for HirePermalink Reply by Jen on -
LOL. Happy to share when I can.
;-)
-
NC for HirePermalink Reply by Jen on -
Happy you worked for you.
;-)
-
Permalink Reply by fawaz on -
hi jen!could you tell me how to add something just under the tabs as ning added a content slider...???
fawaz
thanks
-
NC for HirePermalink Reply by Jen on -
Hi Fawaz,
Start by learning how to add content below the tabs. I'm not quite ready to create a slider tutorial. There are too many files involved. ;-)
Use the example provided here: Google Ads, and use any HTML you create, in it's place.
Best,
Jen
-
Permalink Reply by praneet srivastav on -
Hi Jen ,
Thanks for your detailed Explanations .. I was able to achieve the same ( what amits is looking for) with the first code given by you... just changed the position of div.
x$("#xg_navigation").after
div style="xg-p: absolute;; left:455px; top:80px;" id="custom_ads">
this is how it look like...
-
Permalink Reply by praneet srivastav on
-
Is it possible to show the ads in both side space.... if yes can u please share the bits for the same... I would really appreciate !!!
Latest Activity
James Hawkins replied to Alex's discussion 'More styling in the Design Studio'"Looks like you need to adjust height here from 300 (default) to 295.
.row:after…"
soaringeagle replied to Alex's discussion 'More styling in the Design Studio'"actualy when using 5 rows its still there
so what is going on?
ok new thoery
its loading as many as…"
soaringeagle replied to Alex's discussion 'More styling in the Design Studio'"very minor bug but when u have the profile icons rounded in the member box set to small and 2…"
Margie replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'"That's really good to hear about groups. That's our site's main…"
soaringeagle replied to Alex's discussion 'More styling in the Design Studio'"sweet awesom e job
tho im using text badges and have a feeling that wont look so sweet
im gonna go…"
Margie replied to Phil McCluskey's discussion 'Site Manager Updates for Ning 3.0 Networks'"AGREE 100% on groups. We are not interested in blogs. Our groups are the main…"
Thiago Santos de Moraes replied to John Bizley's discussion 'Show Your Ning 3.0 Sites'"The green background is not good to read."
Cultivating Community
© 2013 Created by Ning.
