JenSocial: Social Web Directory and Ning Tips

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

Add Special Content to Header Area

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

Create your HTML.
Upload to a server or to Ning via Blog (be sure to click on document upload icon)
How to center content in your HTML - add a DIV with align=center, around your header content, within your external HTML. An example of header content could be your Google Adsense code. Example start tag: <div align=center>
Background color - the best way to set iframe background color: add the body tag to your external HTML, like in following example. You can add these tags to your Analytics box code. But, I've found that it's better to add to your HTML file. Example start tag: <body bgcolor=white> Note: Don't forget to end both the body and DIV tags in your external HTML file.
Know your HTML path.
Replace the src="your_custom.html" with your HTML file path, in the example code below. Be sure to enter the entire file path for your HTML file.
Adjust the iframe width and height to fit your HTML content area.
Add the example code below, to your Custom Code box - Go to My Network/Tools/Custom Code.

EXAMPLE #1:
ADD CONTENT BELOW MENU NAVIGATION BAR:
<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_custom.html" width="955px" height="100px"></iframe>';
x$("#custom_ads").html(ad_html);
</script>

EXAMPLE #2:
ADD CONTENT BELOW NINGBAR:
Note: For some reason, the centering had to added to the script, in this case.
<script type="text/javascript">
x$("#xn_bar").after("<div align=center id='custom_ads'></div>");
var ad_html = '<iframe frameborder="0" scrolling="no" allowtransparency="true" marginheight="0" marginwidth="0" src="your_custom.html" width="955px" height="100px"></iframe>';
x$("#custom_ads").html(ad_html);
</script>

1 member favorited this

Replies to This Discussion

Permalink Reply by JenSocial on January 22, 2010 at 9:07pm

Hi Angels Launch,
The only external HTML URL you would not be able to load into an iframe, would be a link from your Ning Network. Ning Networks can't be loaded in iframes. Does that make sense?
Hope that helps,
Jen

Permalink Reply by Mandy G. on July 16, 2013 at 6:42am

Hi Jen, Quick question: Anytime I add an iframe and embed a html file (that's located on another server) I always add target="_blank" so they don't open within the iframe. The contents of the html include nav links that open in new windows and it's kind of annoying, lol.

Would you be able to help? How can I change it so the links open in the same window but not within the iframe.

Also, when I open this in my mobile, I can only see the logo and not the nav links..Do I need to add something to the code?

I know you're super busy and any help would be greatly appreciated.

See it here.

P.S. I know this article was written quite some time ago, but I used this tip anyway, to spruce up my 2.0 site until I get things going with the 3.0 site =)

Thanks, Mandy

Permalink Reply by JenSocial on July 16, 2013 at 12:16pm

Hi Mandy,

One thing to note: You can't use drop down menu items within iframes. As long as you have one level of menu links, you're good.

If the HTML you're iFraming belongs to you (other words, if you can edit it) - - to fix the issue of _blank:

For each link in original code, change _blank to _top. That should fix it.

I don't know about the mobile issue.

Best Regards,

Jen

Permalink Reply by JenSocial on July 16, 2013 at 12:17pm

Looks great!

Permalink Reply by Mandy G. on July 16, 2013 at 9:40pm