I want my external links to open in a new tab

Hi everyone, I’ve been trying to follow along with the ideas above. But I’m still having some trouble. I’m mainly wondering about links within blog posts. I’ve been using bookmarks and external links… with this script work for those too?

Thanks for any help

1 Like

They should work for bookmark links, where are you encountering problems? Can you share the code you’re using? :blush:

1 Like

Thanks for the reply, I forgot to come back and say I figured it out. I got that script from just above to work in the end :ok_hand:

1 Like

Impressive codes this is what i am looking for for the past 2years haha. thank you so much!

1 Like

How do you create a single named tab? So I can use this to open external links in new tabs. Help would be greatly appreciated

If you’re looking for a simple target="_blank" functionality, I’ve been using it for quite a while now.
What below codes does, is check the hostname you’re linking to, compare it to the hostname of your blog. If they don’t match it adds target="_blank" to that link. Links within your domain are left alone.

$(function() {
	// add target="_blank" to all non-internal text links
	$('.post-full-content a').filter(function() {
		return this.hostname && this.hostname !== location.hostname;
	}).attr('target', '_blank');
});

It’s a slightly different approach from the accepted answer, but I hope that helps someone.

6 Likes

Thank you, is this something that will work in the code injection part of my ghost site?

Thank you! This worked! I am not familiar with code but I just added the script tags this code and it is working now thanks!

2 Likes

You set the TARGET attribute to a fixed name.

If you use _BLANK each link will open in a new blank tab.

If you set it to MYNEWTAB or some other value that you choose, the first link will open a new tab and subsequent links will use this named tab.

More details on how HTML links work can be found here. HTML DOM Anchor target Property

Wow. Thank you Denver

Thank you so much for this.

Jeff, thank you!! Works like a charm.

I am new to Ghost and was wondering why the heck “open in new tab” wasn’t an option with external link. I completely agree with another user that is proper UX.

Thank you so much for this fix. I tested it on my site and worked well.

Thank you both for this - works well for me

This is pure javascript function. Works perfect. Also it will not reduce the page speed. Thank you.

Thank you Aileen, I didn’t had to start from zero. Modified your suggestion a little bit to avoid using the event listener.

<script type="text/javascript">
	var links = document.getElementsByTagName("article")[0].querySelectorAll('a');
    var a = new RegExp('/' + window.location.host + '/');
	links.forEach((link) => {
		if(!a.test(link.href)) {
			link.setAttribute("target","_blank");
		}
	});
</script>

Only applies to anchor tags inside the article tag. Handles internal and external links as expected.

4 Likes

Hi, I tried these out, but I could only get it to work if the links point to other sites (Twitter, YouTube, other blogs, etc.)

How could I make the link open to another tab if I’m linking my own posts/pages?

1 Like

Thank you so much for this! I had to try a few different ones to get them to work, but I finally found one.

1 Like

I’m going to have to go back to the drawing board because it literally only worked for like 60 seconds. I’m so confused.

How is this not the default yet? Anyone with a newsletter who is trying to share info on their post, likely wants to keep their readers on their page, and allow readers to open up extra info on other tabs. This is frankly obnoxious that it hasn’t been implemented or requires extra workarounds.

Try googling the problem and seeing how many people have the same issue. This is also the 17th most viewed post on the forum. Let’s fix this for all customers/users…

2 Likes

Welcome here, @ezosso !

As a built-in default it might also be obnoxious to some others. It would certainly be outside of the norm for any platform, in my experience.

That said, setting all external links to default to opening in a new window or tab is one of the first things I do on all my new sites!