Jump to content

Force all external links into a new tab?

Go to solution Solved by Guest,

Recommended Posts

  • 10 months later...
On 5/13/2020 at 1:04 AM, tuanphan said:

try adding to Code Injection Footer

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[href*="mail"]').attr('target','_blank');
});
</script>

 

I put this in the Code Injection Footer, but it doesn't seem to work (I'd like all external links to open in a new window). Any suggestions?

Thank you tuanphan!!

Link to comment
On 10/11/2021 at 5:35 AM, Naomi_ said:

I put this in the Code Injection Footer, but it doesn't seem to work (I'd like all external links to open in a new window). Any suggestions?

Thank you tuanphan!!

above code for email only, try this new code

<script>
  var all_links = document.querySelectorAll('a');
for (var i = 0; i < all_links.length; i++){
       var a = all_links[i];
       if(a.hostname != location.hostname) {
               a.rel = 'noopener';
               a.target = '_blank';
       }
}
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...
On 7/15/2020 at 5:13 AM, Tarjo said:

I came across this similar issue when displaying blog posts in a summary block. If the "Link Post Title to Source URL" option is selected, there is no way to make the link open in a new tab.

I found a solution in another post on this form that is counter intuitive but seems to work. Adding "target="_blank to the end of the Source URL will add the target="_blank" to the html. For example: https://link-to-outside-source.com"target="_blank  Yes, I know, the code looks wrong if you are use to writing html, but try it. Plus, no JS is required for those on the lower level subscriptions. 

THIS WORKED, THANK YOU, TARJO!

https://link-to-outside-source.com"target="_blank

be sure to include the https:// at the top. Just using www. caused some strange behavior

Link to comment
On 10/13/2021 at 9:23 AM, tuanphan said:

above code for email only, try this new code

<script>
  var all_links = document.querySelectorAll('a');
for (var i = 0; i < all_links.length; i++){
       var a = all_links[i];
       if(a.hostname != location.hostname) {
               a.rel = 'noopener';
               a.target = '_blank';
       }
}
</script>

 

Hi @tuanphan, I added this to my site's Code Injection panel and it still didn't work. Do you have any idea why? I'd love to force all external links to automatically open in a new tab. Thank you!

My site: http://www.ibnibnbattuta.com/

Link to comment
22 hours ago, ibnibnbattuta said:

Hi @tuanphan, I added this to my site's Code Injection panel and it still didn't work. Do you have any idea why? I'd love to force all external links to automatically open in a new tab. Thank you!

My site: http://www.ibnibnbattuta.com/

Can you share link to a page where you use external links? We can help easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
14 hours ago, ibnibnbattuta said:

Thank you @tuanphan, this page includes two that are currently not opening in external tabs the way I had hoped. Any help is appreciated! 

https://ibnibnbattuta.com/blog/why-dont-we-understand-algeria

Just tested the code & it works fine. Can you keep the code in Code Injection Footer? We can check it again easier

<script>
  var all_links = document.querySelectorAll('a');
for (var i = 0; i < all_links.length; i++){
       var a = all_links[i];
       if(a.hostname != location.hostname) {
               a.rel = 'noopener';
               a.target = '_blank';
       }
}
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 10 months later...

Hey everyone,

Reading everything so far, it seems like the 5 main problems are:

  1. Having something that doesn't require manually editing each link. Takes too much time.
  2. Having a solution that requires less technical knowledge to implement, not having to worry about specific format for links or using a weird "hack"
  3. A solution that only targets external links, without affecting navigation links or other internal links
  4. A solution that works for different types of content like blog posts, summary blocks, gallery blocks, etc.
  5. Solution that's reliable and always works, and will include bug-fixes or 1-on-1 support.


With these requirements, I've made a small (paid) plugin that does all of that, and more.
You can see a video demo below

 

I also added a simple on/off switch, and an optional icon so visitors can easily recognise external links from internal ones. 

If you want to try my plugin you can find it here

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 4 months later...

For my specific need, alladinsane nailed it:

On 9/3/2020 at 9:05 PM, aladdinsane said:

This is really easy to do, but Squarespace makes you go through several steps.

I have highlighted text within a text block intended to take the user to a third-party website. Not only is it several steps, it's easy to miss one of the steps - for me, it was clicking on the "Apply" button.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.