Current status of the Ning Platform is always available on the Ning Status Blog.

With this plug-in you'll easily be able to add standard CSS with !important, CSS stylesheets, any HTML and javascript links into either the head or the body of any network. These codes can also target nonmembers/visitors, just members, male members and/or female members.. These tiny snippets of javascript can be added to any javascript code you may be working on or are already using.

Important. You should only have one GeoPlugin code in your "custom code box". If you're adding an updated version of this plug-in remove the old one. All your old codes will still work with the new updates.

To view the codes in the plug-in click here

This is the main plug-in it must be used in order to use the following codes.

<!-- GEOCOMs GeocPlugin v2.00.005 -->
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>

 

 

Targets all members and nonmembers ( Any network )

Now if you add the letter o in front of any of these 8 lines it will only inject the codes once per Session!!

Example --  Before  GEOHTML( '<p></p>' );  --  ( After  oGEOHTML( '<p></p>' ); 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~
these four lines will inject your codes into the head

addGeoStyleh('BODY{background-image: url(none)!important;}');

GEONodeh.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripth.src = 'https://api.ning.com/your_javascript.js';

GEOHTMLh( '<meta name="viewport" content="width=device-width, initial-scale=1" />' );

these four lines will inject your codes into the body

addGeoStyle('BODY{background-image: url(none)!important;}');

GEONode.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScript.src = 'https://api.ning.com/your_javascript.js';

GEOHTML( '<p id="GEOHTML_test">GEOHTML is working</p>' );

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
NEW Run a script every 15, 30, 45 or 60 seconds.

GEOScript15.src = 'https://api.ning.com/your_javascript.js';

GEOScript30.src = 'https://api.ning.com/your_javascript.js';

GEOScript45.src = 'https://api.ning.com/your_javascript.js';

GEOScript60.src = 'https://api.ning.com/your_javascript.js';

 

Targets nonmembers and visitors ( Ning networks )

these three lines will inject your codes into the head

addGeoStyleho('BODY{background-image: url(none)!important;}');

GEONodeho.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScriptho.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStyleo('BODY{background-image: url(none)!important;}');

GEONodeo.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripto.src = 'https://api.ning.com/your_javascript.js';


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
New Run a script every 15, 30, 45 or 60 seconds.

GEOScripto15.src = 'https://api.ning.com/your_javascript.js';

GEOScripto30.src = 'https://api.ning.com/your_javascript.js';

GEOScripto45.src = 'https://api.ning.com/your_javascript.js';

GEOScripto60.src = 'https://api.ning.com/your_javascript.js';

 

Targets members ( Ning networks )

these three lines will inject your codes into the head

addGeoStylehon('BODY{background-image: url(none)!important;}');

GEONodehon.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripthon.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStyleon('BODY{background-image: url(none)!important;}');

GEONodeon.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripton.src = 'https://api.ning.com/your_javascript.js';


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
New Run a script every 15, 30, 45 or 60 seconds.

GEOScripton15.src = 'https://api.ning.com/your_javascript.js';

GEOScripton30.src = 'https://api.ning.com/your_javascript.js';

GEOScripton45.src = 'https://api.ning.com/your_javascript.js';

GEOScripton60.src = 'https://api.ning.com/your_javascript.js';

 

Targets male members ( Ning networks )

these three lines will inject your codes into the head

addGeoStylehm('BODY{background-image: url(none)!important;}');

GEONodehm.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripthm.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStylem('BODY{background-image: url(none)!important;}');

GEONodem.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScriptm.src = 'https://api.ning.com/your_javascript.js';

 

Targets female members ( Ning networks )

these three lines will inject your codes into the head

addGeoStylehf('BODY{background-image: url(none)!important;}');

GEONodehf.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScripthf.src = 'https://api.ning.com/your_javascript.js';

these three lines will inject your codes into the body

addGeoStylef('BODY{background-image: url(none)!important;}');

GEONodef.href = 'https://api.ning.com/your_css_stylesheet.css';

GEOScriptf.src = 'https://api.ning.com/your_javascript.js';

 

How to use and usage examples.

You may add as many "addGeoStyle" lines as you want.
In each "addNewStyle" line, you can add one line of CSS. ( No spaces or breaks in the CSS.)

addGeoStyle('BODY{background-image: url(none)!important;}');
You may add as many "GEONode" lines as you want. ( CSS Stylesheets )

GEONode.href = 'https://api.ning.com/your_css_stylesheet.css';
You may add as many "GEOScript" lines as you want.  ( javascript links )

GEOScript.src = 'https://api.ning.com/your_javascript.js';
You may add as many "GEOHTML" lines as you want.  ( Any HTML - Iframes, objects, H1,  a, p, span, div virtually any HTML Element. )  Your HTML needs to be in one solid line, no breaks, which means do not press enter in the HTML!!!  If your text needs a break in it just add <br/>...

 To see more of what you can do with this line of code go to example #5... examples below

GEOHTML( '<p id="GEOHTML_test">GEOHTML is working</p>' );

 

 

Here are some fully functional examples.
In thies examples we'll be styling Ning Networks.

Working example #1 Ning 2&3 -- In this example your male members will have a different background imge than your female members. Ning 2&3

<!-- GEOCOMs GeocPlugin v2.00.005 -->
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>


<!--  javascript opening tag" -->
<script type="text/javascript">

/* background image only female members can see it */
addGeoStylef('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932420?profile=original)!important;}');

/* background image only male members can see it */
addGeoStylem('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932449?profile=original)!important;}');

/* javascript closing tag" */
</script>

 

Working example #2 Ning 2.0 -- In this example we'll be styling the video pages on a Ning 2.0 Network.

<!-- GEOCOMs GeocPlugin v2.00.005 -->
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>


<!--  javascript opening tag" -->
<script type="text/javascript">

/* start Targeting all video pages" */
if(document.URL.indexOf("video") >= 0){

/*  The main styling for all video pages, CSS stylesheet  */
GEONode.href = 'null//storage.ning.com/topology/rest/1.0/file/get/963872733?profile=original'';

/* background image all video pages */
addGeoStyle('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932420?profile=original)!important;background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* Hides everything from non-members */
addGeoStyleho('.xg_widget_video{display:none!important;}');

/* nav subtab arrow JS link */
GEOScript.src = 'null//storage.ning.com/topology/rest/1.0/file/get/963872822?profile=originalubtabarrow.js';

/* START Targeting just the main video page */
if (x$('.xg_list_video_main').length) {

/* background image main video page */
addGeoStyle('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932449?profile=original)!important;background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* End tag for Targeting just the main video page */
}

/* extra jQuery = moving the right column to the left   */
x$(document).ready(function() {
x$('#column1.xg_column.xg_span-16').before(x$('#column2.xg_column')); });   

/* End tag for Targeting all video pages" */
}

/* javascript closing tag" */
</script>

 

Working example #3 Ning 3.0 -- In this example we'll be styling the photo pages on a Ning 3.0 Network. With this example We'll be giving the photo pages a completely different look/style for male and female members.


<!-- GEOCOMs GeocPlugin v2.00.005 -->
<script src="https://st3.ning.com/topology/rest/1.0/file/get/935791?profile=original" type="text/javascript"></script>

<!--  javascript opening tag" -->
<script type="text/javascript">

/* start Targeting all photo pages" */
if(document.URL.indexOf("photo") >= 0){

/* background image all photo pages */
addGeoStyleh('BODY{background-image: url( http://bit.ly/1LwJD7U);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* background image all photo pages female members */
addGeoStylehf('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932420?profile=original);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* background image all photo pages male members */
addGeoStylehm('BODY{background-image: url( http://bit.ly/1POdd7J);background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/* End tag for Targeting all photo pages" */
}

/* java closing tag" */
</script>


<!--  java opening tag" -->
<script type="text/javascript">

/* START Targeting just the main photo page */
if (x$('.photoListPage.grid-frame').length) {

/* add HTML - vidieo, text and image to the main photo page */
GEOHTML( '<DIV id="GEOHTML_test_1" class="module-body"><center><iframe width="420" height="305" src="https://www.youtube.com/embed/qU5UmJ-XmQs?wmode=opaque&autoplay=1" frameborder="0"></iframe><p>Download the NEW Shockmachine 2000 v2015. I have created a portable and an install version. It has tons of cartoons, games and music videos. It works on Windows 98 through Windows 10. Download links below.<br/> <br/> <br/> When you click on the download link, press the big blue "download now" button.</p><p><a target="_self" href="https://storage.ning.com/topology/rest/1.0/file/get/11524238?profile=original"><img class="align-full" src="https://storage.ning.com/topology/rest/1.0/file/get/11524238?profile=RESIZE_1024x1024" width="721"/></a></p><p>Shockmachine full setup 112 MB<br/> <a href="http://d-h.st/18FV" target="_blank"> http://d-h.st/18FV</a><br/>; portable version 135 MB<br/> <a href="http://d-h.st/nFhy" target="_blank"> http://d-h.st/nFhy</a></p></center></DIV>;' );

/* Jquery to add the above HTML to the main photo page grid frame */
x$(document).ready(function() {
x$('DIV.photoListPage.grid-frame.sheet FOOTER.module-footer').after(x$('DIV#GEOHTML_test_1')); });  

/* background image main photo page */
addGeoStyle('BODY{background-image: url(null//storage.ning.com/topology/rest/1.0/file/get/932449?profile=original)!important;background-attachment: fixed!important;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;}');

/*  The main styling for the main photo page only, CSS stylesheet  */
GEONode.href = 'http://bit.ly/1hDrkBD';

/*  The main styling for the main photo page male members only, CSS stylesheet  */
GEONodem.href = 'http://bit.ly/1LwJL7t';

/*  The main styling for the main photo page female members only, CSS stylesheet  */
GEONodef.href = 'http://bit.ly/1NxLrOs';

/* End tag for Targeting just the main photo page */
}

/* javascript closing tag" */
</script>

 

Working example #4 Ning 2.0 -- In this example we'll be styling the photo pages on a Ning 2.0 Network.

 Let's say you wanted to use my responsive fullwidth network tip on just your photo pages. You would just take the three major codes from that tip and add them to the corresponding lines of code in this tip. As you can see I added the viewport HTML to a GEOHTMLh line, the CSS stylesheet to a GEONodeh line and the JavaScript to a GEOScripth line. Then I just placed the three snippets of code in a page targeting JavaScript wrap.

<!-- Start Ning 2.0 responsive fullwidth photo pages -->
<script type="text/javascript">
if(document.URL.indexOf("photo") >= 0){
GEOHTMLh( '<meta name="viewport" content="width=device-width, initial-scale=1" />' );
GEONodeh.href = 'null//storage.ning.com/topology/rest/1.0/file/get/932304?profile=originalponsive_fullwidth_network_v3.6.css';
GEOScripth.src = 'null//storage.ning.com/topology/rest/1.0/file/get/963872751?profile=originalponsive_fullwidth_network.js';
 }
</script>

Working example #5 Ning 3.0 -- In this example we'll be adding HTML, a vidieo, text, a image and links to main photo page grid frame on a Ning 3.0 Network.. Notice all the HTML is in one GEOHTML line of code.   Your HTML needs to be in one solid line, no breaks, which means do not press enter in the HTML!!!  If your text needs a break in it just add <br/>...

 

<!--  java opening tag" -->
<script type="text/javascript">

/* START Targeting just the main photo page */
if (x$('.photoListPage.grid-frame').length) {


/* adding HTML - vidieo, text, links and  image to the main photo page */
GEOHTML( '<DIV id="GEOHTML_test" class="module-body"><center><iframe width="420" height="305" src="https://www.youtube.com/embed/qU5UmJ-XmQs?wmode=opaque&autoplay=1" frameborder="0"></iframe><p>Download the NEW Shockmachine 2000 v2015. I have created a portable and an install version. It has tons of cartoons, games and music videos. It works on Windows 98 through Windows 10. Download links below.<br/> <br/> <br/> When you click on the download link, press the big blue "download now" button.</p><p><a target="_self" href="null//storage.ning.com/topology/rest/1.0/file/get/11524238?profile=original"><img class="align-full" src="null//storage.ning.com/topology/rest/1.0/file/get/11524238?profile=RESIZE_1024x1024" width="721"/></a></p><p>Shockmachine full setup 112 MB<br/> <a href="http://d-h.st/18FV" target="_blank"> http://d-h.st/18FV</a><br/>; portable version 135 MB<br/> <a href="http://d-h.st/nFhy" target="_blank"> http://d-h.st/nFhy</a></p></center></DIV>;' );

/* Jquery to add the above HTML to the main photo page grid frame */
x$(document).ready(function() {
x$('DIV.photoListPage.grid-frame.sheet FOOTER.module-footer').after(x$('DIV#GEOHTML_test')); });

/* End tag for Targeting just the main photo page */
}

/* javascript closing tag" */
</script>

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Votes: 0
Email me when people reply –

Replies

  • Thank you George :)
  • aah, so this is the code you were talking about! Thanks @George H. Compton IV I'll be playing around with this!

  • NC for Hire

    this looks pretty cool G... hope to see this progress.. i may give it a whirl this weekend if I get a little free time

    • Thank you JFarrow, speaking of progress I just updated it. :)

      Now if you add the letter o in front of any of those lines it will only run the codes one's per visit to the network.

      Example

      Before  GEOScript

      After  oGEOScript

      I'm also planning on adding grouped age targeting. You know like 40 and above, 25 to 39 and so on, it could be very useful for advertisements for instance. 40-year-old and above males might get an advertisement for balding or hemorrhoid cream while a teenager might get a advertisement for an Xbox or whatever. It could very well make you more money with your advertisements targeting them that way

      Hope you like it and let me know what you think.

      You have a great weekend.

       

  • Hello George this is pretty amazing. i would like to see how works on the network.

    • Thank you and Hello Jelena. :)

      You can go to this website (Click here) and navigate to the photo pages to see some of the changes, but in all reality you need to be a member in order to see the difference between male and female members.  On that website. I'm using the exact same code as example #3

      You have a 3.0 network correct?

      Grab a copy of the example #3 and just paste it into your "Custom Code - End of Page Code box" to see all the changes. When you're done testing it you can simply remove it. :-)
      Well either remove it or customize it to your liking and keep it. :-)

      You have a wonderful day. :-)

  • Update 8/30/15, now you can also easily add HTML to the head or the body of your network.. TJ thank you for the compliment on this plug-in.

  • NC for Hire

    Awesome in every sense of the word.

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels