I want my external links to open in a new tab

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

1 Like

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.

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

2 Likes

@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

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:

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");
});
3 Likes

Welcome to Ghost community, @Sumeet_M !

Here are several ways I do this on my sites:

1 Like

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

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

2 Likes

Thank you David. You are kind :slightly_smiling_face:

2 Likes

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?

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

1 Like

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.

3 Likes

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!

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

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, https://populationstat.com/canada/, but I am available to talk round the clock. Call me if you do not find any other solution. I will help with pleasure.

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>

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