Ning Injection Code Generator: Insert HTML above/below many Ning Site Locations like: NingBar, Menu, Footer, new Ning Chat! (included in VIP Group)

What is the generator? The Generator will take your simple HTML tags and text, like paragraphs, links and images - - and creates the script for your Custom Code Box - - to inject your content into a special place on your Ning Network. For example: you may want to add a simple text message before/after your NingBar. See great mini-tutorial for: Announcement at Top of New Chat Box, at bottom of page.


Add Your HTML Code Below (Text and HTML Tags - No JavaScript)


HTML Syntax Requirement: Use double-quote" instead of single quote '.
If you need the single quote in a sentence, use ' with JavaScript escape, a forward slash.
Example Quote Syntax: When adding single quote in text add a backslash like this: I think I\'ll have lunch.


Include JavaScript tags


Inject code :





JenSocial Injection Code Generator | Developed by Elson Tan


Generator Details:

This is how it works. The generator will take your simple HTML tags and text, like paragraphs, links and images - - and create the script for injection into special locations in your Ning Network. For example, you might want to insert a special message above or below the Navigation or NingBar. The generator creates the script for you. There are pre-coded location insertions points you can select to insert your HTML after or before those locations.

Warning: We've tested the Generator, but it's still in beta. Please report any issues you experience. As in any code hack or tip, please install at your own risk.

 

Instructions:

  • Add your HTML code in the box above, just like you would in a text box from the HTML mode (clicking on the HTML button).
  • ~ Be sure to only enter simple HTML tags and text. Tag examples: links, images, paragraphs and divs.
  • ~ Do not enter scripts.
  • ~ If you use a single quote in your text like in the word I'll, be sure to add backslash like this: I\'ll - - or your generated script will not work.
  • Next to Inject code, select After or Before.
  • From the drop-down box, select the location (CSS element) where you want to insert your HTML.
  • After you select the CSS element, the id/class will be auto-filled in box labeled: element name/class/id. This is also a great learning tool, to learn some of Ning's element id/class names.
  • Click on the Generate Code button.
  • Grab your generated script, and paste into the Custom Code Box via: My Network/Tools/Custom Code
  • Save

 

For Advanced Users:

If you know a CSS element id/class name, you can enter the name in the element name/class/id field and follow the same steps above - - minus selecting the class/id. Be sure to include the class prefix - a period, or the id prefix - a pound sign, #. For example: #xg_navigation or .account-links

We will be adding new elements in the future. PLEASE feel free to share your element ideas.

 


 

HTML Code Examples - CORRECT WAY AND WRONG WAY ;-)

CORRECT:

<center>Testing the Injection Code Generator to add HTML below the Ning Bar. I think I\'ll add a link to yahoo.com for my test code. <a href="http://www.yahoo.com">yahoo</a> I wanted to center this text, so I wrapped my HTML with the center tag.</center>


 

WRONG:

<center>Testing the Injection Code Generator to add HTML below the Ning Bar. I think I'll add a link to yahoo.com for my test code. <a href="http://www.yahoo.com">yahoo</a> I wanted to center this text, so I wrapped my HTML with the center tag.</center>

Why is the HTML/Text above wrong? Because I added a single quote to I'll without the JavaScript escape character. In a case like this where you need to use a single quote, use the escape code which is a backward slash - - directly before your single quote - - like this: I\'ll



HTML Code Examples/Template Code

Announcement at Top of New Chat Box & Install Instructions:

  • Edit code below, and add your short announcement.
  • Paste entire DIV/HTML code into top Generator Box.
  • Select "After" for Injection code location.
  • Select "New Chat Box (Top)" from drop-down selections. It is under "Common Insertions Points"
  • Click on "Generate Code" button.
  • Copy/paste generated script to your Custom Code Box via: My Network/Tools/Custom Code Box.
  • Done.

<div style="padding:10px;border-bottom:8px solid #e6e6e6;">Welcome to Live Chat! We hope you enjoy meeting and chatting with fellow members. Please be respectful towards others.</div>


I hope you enjoy the generator! It makes it so much easier to insert little bits of HTML like a quick message.

 

The generator was developed exclusively for JenSocial - Copyright © 2011 JenSocial, all rights reserved.
Support for the Generator is only offered in VIP Group.

Developed by Elson Tan, a very talented young Developer.

Comment

You need to be a member of JenSocial: Social Web Directory and Ning Tips to add comments!

Join JenSocial: Social Web Directory and Ning Tips

Comment by JenSocial on February 7, 2012 at 2:54pm

My pleasure. =) Truly happy to hear you like it.

Comment by El Surveyor on February 7, 2012 at 2:51pm

you're right...my eyes must not be working today...nah i love what you've done here...i can definitely make something crafty happen with this...thanks Jen

Comment by JenSocial on February 7, 2012 at 2:50pm

El Surveyor,

This generator only accepts HTML. See title abovce: Add Your HTML Code Below (Text and HTML Tags - No JavaScript)

If you didn't understand this, and want a refund, I'll be happy to do that.

Sorry for any confusion.

Best Regards,

Jen

Comment by El Surveyor on February 7, 2012 at 2:43pm

Can we use this to inject google ads?

© 2020   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips