How to Force External Links to Open in a New Window

posted Jul 9, 2014, 5:13 PM by Jaybird Farrow   [ updated Jul 11, 2014, 2:37 PM by Justin Farrow ]

How to Stop Losing Your Community Visitors

Open External Links in New Window Ning
Sending all of your SEO link juice to another site can hurt your search engine ranking.  This is why it is important for external links (those links inside your site which go to an entirely different website instead of linking to another page on your site) to open in another window, rather than take visitors away from your site.  Back in 2011, I made a post on Ning Creators showing how to force external links on your Ning Network to open in a new tab or window.   That method still works very well for Ning 2.0 Networks, but with Ning 3.0, we have more options and thus, a better solution is available.

Open Links in New Window Ning 2.0

Add this to your custom Code box (if you're Ning Plus or Ning Pro)

 

<script type="text/javascript">
 jQuery(document).ready(function(){
jQuery("a[href*='http://']:not([href*='http://yourdomain.com'])").attr("target","_blank");
jQuery("a[href*='https://']:not([href*='https://yourdomain.com'])").attr("target","_blank");
});
</script>

 

 

Don't forget to change yourdomain.com  with YOURDOMAIN.COM


Open External Links New Window Ning 3.0

The jquery code i use now for Ning 3.0 templates is this:

<script type="text/javascript">
 x$('a').each(function() {  
  var a = new RegExp('/' + [removed].host + '/');  
  if(!a.test(this.href)) {  
    x$(this).click(function(event) {  
      event.preventDefault();  
      event.stopPropagation();  
      window.open(this.href, '_blank');  
    });  
 }  
});
</script>

Place that code inside the bottom section of your Custom Code page

 Try it out by clicking the link inside the Credits section of this page

Note About Using Jquery with Ning Sites

If you've been looking through Jquery Code Snippets around the web, you may be wondering why they do not work right out of the box on your Ning Site.  This is because Ning has Jquery natively installed and you'll need to make a slight adjustment to any Jquery code you choose to add to your Ning.  In simple terms, you'll simply want to add an 'x' in front of any '$'.

Shout out to TJ of Jqueryhelp.Ning.com who had taught me a lot over the years.  Check out his uberhelpful list of Jquery Codes and Mods for Ning 2.0 to begin playing around with code for your Ning Network.  His Beginners Guide to Jquery is a definite place to start for Jquery Noobies.

Tell Me What You Think

The gadget spec URL could not be found