Saturday, April 23, 2011

Blogging tips: Open all external links in a new page

I posted some days ago about opening all links in your website in a new tab or window by default (old post here). The problem of that solution is that all internal links are opened in a new tab, even the "home" button. This is so disgusting for the users of your website.

Here there is a solution to open all external links in a new tab or window (if the target is a tab or a window depends on the browser). Include this lines into your website and the job is done:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery('a').each(function() {
    // Let's make external links open in a new window.
    var href = jQuery(this).attr('href');
    
    if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf(window.location.hostname) == -1) {
        jQuery(this).attr("target", "_blank");
    }
});
//]]>
</script>

If you are using blogger, you can include this by inserting it before the </body> tag (Dashboard -> Template -> Edit HTML, search the </body> with Ctrl+F and insert it before the tag closes. Remember to save always a backup of the HTML before change it) or inserting in a HTML/Javascript widget element.

With this feature, all links other than adSense and your domain, will open in a new tab (if you're using blogger, all links to other blogger sites won't be affected and will open with the default properties).


Source: Challenges that each developer faces every day

24 comments::

London Bride said...

Hi I followed your link from this useful thread

http://www.bloggertipsandtricks.com/2011/02/how-to-make-all-links-open-in-new.html#comments

as I was so pleased to find you can have external links open in a new tab, however I didn't want ALL links to open in new tabs (ie internal links such as links to other pages on my blog). I followed your instructions hoping they would solve the problem but sadly ALL my links still open in new tab.

Not sure if I'm inserting the copy in the right place? Just before (body/) tab?

Thanks

London Bride said...

Ignore my comment above! I had kept in another bit of wrong code, but once deleted, I added this and it works. AMAZING. Thank you, 3 years of blogging this will really help!

The Munson's Apps said...

You were right, just before the (/body) tag.

Thank you!, I'm so glad to be useful :-)

Jeff Goodman said...

Thanks for the tip. This worked perfectly!

Cap Creations said...

Totally can not get this to work! Any ideas why? I have tried it several times. Thanks for any help!

Ivan said...

What exactly have you tried?

Have you tried to include the source code before the "/body" tag?

Can you paste me what do you have just before the "/body" tag? or send me your template?

Cap Creations said...

Thanks for the reply. Yes I pasted the code exactly as you said, (blogger wont allow me to paste it here or I would.) Right before the < /body >. Is that correct?

Is there an email that I can use to send you my template if needed? Thank you again for your help!

Ivan said...

Before the < /body > should be correct.

Have you also tried inserting pasting the code in a HTML/Javascript widget element?

You can send me the template to themunsonsapps at gmail dot com :-)

Cap Creations said...

I tried pasting it in the HTML/Javacript widget and it is all working except the very top "Home" link on the left. I want that one to open in the same window. Other than that is seems to be perfect! Any thoughts on how to fix that one? Thank you again I truly appreciate your help!

Ivan said...

I think that I've understood your problem. The code is based on the domain, and you've two different domains. While I access to your domain with http://blog.capscreations.com/, your home points to http://capcreations.blogspot.com/, for the code, it's considered an external link.

Try to modify the code including both domains:

...if (typeof href != 'undefined' && href != "" && (href.indexOf('http://') != -1 || href.indexOf('https://') != -1) && href.indexOf('blog.capscreations.com') == -1 && href.indexOf('capcreations.blogspot.com') == -1)...

Cap Creations said...

Wow! You are GOOD! Thanks so much it is totally working now! I'll be sure to share this tip and point people in your direction. Thank you again yay! So happy! How do I make a small donation in US dollars?

Ivan said...

You're welcome! :-) Turn here when if you've problems programming your blog!

What about "like us" on facebook? unfortunately 25 fans are needed in order to make a facebook site. :-(

I've changed the top-left donation button currency to USD. Thank you!

Cap Creations said...

Definitely will turn here! Thank you again! I know it wasn't much but I've made a small donation. Also shared you on my facebook page. Hopefully you can build up those "likes"!

Ivan said...

Thank you very much!!! :-)

We'll se if we can increase those 14 facebook likers! ^^
Let's go top-right and "Like us"!

Emily Sacra said...

Thank you so much!!! This is a fabulous tutorial :)

PS: I came over from Cap Creations!

Emily

iWebCrafter Blogs said...

Added the code and now my AdSence ads open in a new window/tab as well???

Fru Mæla - Mer enn bare ord - said...

I can not make this work!! Please help me before I am going crazy!! :O

Ivan said...

What have you exactly tried? Where have you included the code? Which is your website?

If you use blogger, have you tried pasting code in an HTML/JavaScript Widget?

Fru Mæla - Mer enn bare ord - said...

I have blogspot blog (blogger) - my adress it: www.frumaela.com

I have tried to but in the html-code AND tried to past it in a widget.
Maybe I can send you the code, maybe I did it wrong?

I have looked everywhere for a solution where all the EXTERNAL link open in new window, and all the links that links to my blog remains in the window! I have to make this work!

Matthew B said...

Thanks so much for this bit of script! Instead of editing directly into the template html I opted to nest the code in an html/java widget as you suggested. I prefer this option as it just seems a bit safer than tinkering with coding and it's easier to find / change / delete etc if it's not working. But it is working, perfectly. Thanks very much.

Amanda said...

I've posted the code in HTML/JavaScript... and it is still not working... (I have blogger) Any Ideas?

Tessa said...

Thanks for posting this- it worked, finally.

Other sites said to put it just before the head not body. It worked, but then my slider in the custom template disappeared except for the heading- any ideas?

Ivan said...

@Tessa, I don't know why the slider is disappearing, have you inserted in a widget or in the body? Probably the best option is including it in the HTML/JavaScript widget.

@Amanda@EmbracingGrace. Maybe it doesn't work because now Blogger redirects domains from .com to .co.uk, .it, .es...depending on user locale.

Tessa said...

Thanks, Ivan. I'll figure it out :)

Post a Comment