I want my external links to open in a new tab

Developer help
1

Hello all

I’d like all external links on my blog to open in a new tab.
I’ve been reading the blog posts on this forum from people that had a similar question. I found some possible solutions that were posted here, but none of them seem to work on my Ghost website. The current version of Markdown seems to overrule attempts to manually create links like
[Text goes here](http://linkgoeshere" target=“_blank)
and take out the target=”_blank" part.

Does anyone know if there is a way to overrule this, without using Javascript?

PS: I noticed that some of the posts around this topic were closed by admins, stating that links should never open in a new tab, using some old blog posts around the topic dating as far back as 1999 to prove their point.

Please, do not close this blog post with the same kind of response. I’d like to get an actual workaround from the community.

I personally don’t care how links in HTML and Markdown were initially intended to work and that they “should” never open in a new tab. I don’t agree with that stance because it is a technology push without taking the user experience into account, which is shortsighted and obnoxious. Most users and a lot of webmasters expect external links to open in a new tab. Period.

By the way, here’s a good article about why external links should open in a new tab: Why External Links Should Open in New Tabs

5 Likes
2

but it’s so easy in JS… and instead of _blank I just use a single named tab (e.g. moredetail ) so that I don’t spam my users by opening lots of tabs.

I have the following in my Code injection Site Footer:

<script type='text/javascript'>
  $( document ).ready(function() {
  	$(".post-content a").attr("target","moredetail");
  });
</script>
7 Likes
3

If you only wanted to do this for specific links, you could simply embed a tag in the href and look for the tag.

For example; say I decide to use: ?xgtab& as an indicator to open the page in an [External Giani Tab]

and then just use a more advanced selector:

$( "a[href*='?xgtab&']" ).attr("target","moredetail");

This will embed the xgtab arg in the request - but I doubt that will cause a problem if you choose a tag that is unlikely to be used by the websites you are linking to.

4 Likes
4

Aha, this is actually very usefull. Just what I need. Thanks!

1 Like
5

I am a photographer and I have a Facebook page. I want an internal link on my Facebook page to my business website to get more traffic. But I don’t know how to do this.

6

Is this question related to a Ghost site? :slight_smile:

2 Likes
7

@DavidDarnes the reply above by @pattersonmatilda062 looks like a spammer message to me – not related to Ghost site as far as I can tell.

1 Like
8

Hi Jeff,

I added the code in the side footer but its not working for me. All the links are still opening in the same tab.

Do I need to do anything apart from adding the code in the site footer?

Thank you. :slight_smile:

9

I think @jeff’s version expects jQuery to be present, here’s a vanilla JavaScript version:

[...document.querySelectorAll("a[href*='?xgtab&']")].forEach(link => {
	link.setAttribute("target", "moredetail");
});
4 Likes
10

Welcome to Ghost community, @Sumeet_M !

Here are several ways I do this on my sites:

https://ghost-o-matic.com/make-links-open-in-a-new-tab/

6 Likes
11

Just a newbie question: - Won’t this jQuery make the specific page slow ?

Since I was missing this feature, I posted a similar question (labelled as IDEA) in the forum a day ago. Link

12

Hey @ajeet, the JavaScript I wrote doesn’t need jQuery and will apply the attribute instantaneously:

2 Likes
13

Thank you David. You are kind :slightly_smiling_face:

2 Likes
14

Hi thanks for this code, so we only neeed to inject this in the footer? Not working for me. IS there something I’m missing?

15

Hi @GTS, I think you’d also need to add attributes to the link ( ?xgtab& is the example) as per @jeff’s earlier post - see I want my external links to open in a new tab - #3 by jeff

1 Like
16

I was successfully using this non-jQuery code snippet injected in the Ghost site footer:

<script type="text/javascript">
    var links = document.querySelectorAll('a');
    links.forEach((link) => {
        var a = new RegExp('/' + window.location.host + '/');
        if(!a.test(link.href)) {
          	link.addEventListener('click', (event) => {
                event.preventDefault();
                event.stopPropagation();
                window.open(link.href, '_blank');
            });
        }
    });
</script>

This doesn’t name the tab, but checks if the URL is external and only then opens in a new tab.

17 Likes
17

Unsuccessfully tried all variations of these snippets to little or no effect.

This really should be an option in the settings, and things such as “but it’s so easy in JS…” is only true if you know JS, or you are fine with adding more scripting into your website.

Ghost needs to become less about writing scripts and more about writing, and options such as this will help remove the barrier to entry. I manage to stumble my way through most things, but this has been bugging me for a while.

This code finally worked for me

<script>
  $(document).ready(function() { 
	$("a[href^='http']").attr("target","_blank");
  });
</script>

No ideas why others didn’t. I am eternally grateful to the post in this forum though… they usually save me some pain!

18

I had a typo in my code snippet. If you try it again, it should work and only open external links in a new tab, but not internal ones.

Your snippet requires jQuery, which is not something everyone wants to use.

1 Like
19

I know how to do it. But I find it difficult to explain it here. It is a lot of writing. It would be better if I could talk to you. And you will immediately try to make amendments. What time zone are you in? I am from Canada, Canada Population (2023) - Population Stat, but I am available to talk round the clock. Call me if you do not find any other solution. I will help with pleasure.

20

This is excellent, but I just noticed that clicking on the avatar image at the top right, opens another tab instead of opening the dropdown menu.

It also happens by clicking on the choice of the stripe plan, it opens a new tab.

Any ideas to fix it?

EDIT
this seems to work, if it can be optimized, I would like to know

 <script>
	var links = document.querySelectorAll('a');
	links.forEach((link) => {
		var a = new RegExp('/' + window.location.host + '/');
		if(link.href.indexOf("javascript") == -1){
			if(!a.test(link.href)) {
				link.addEventListener('click', (event) => {
					event.preventDefault();
					event.stopPropagation();
					window.open(link.href, '_blank');
				});
			}
		}
	});
</script>
1 Like