Jump to content

[SOLVED] How to make external links nofollow and target _blank by default if using source code toggle in editor?


Violet
 Share

Recommended Posts

I've set the ProcessPageEditLink module to ensure that external links are nofollow and target is _blank. Below is an image showing those settings. This works PERFECTLY for links that I add in via the editor, but the problem is that when I toggle editor to "source code" and add in links that way, it won't default to making the external links nofollow and target _blank. It only works when I put the link in via the link button in the editor.  

The reason this is a bit of an issue is that most affiliate links (which is exactly what you would want to apply this to) are usually given by the company as source code, so I am adding them in by toggling editor to "source code". In that situation, I just can't get the links to default to nofollow and target _blank.

Some solutions I tried:

  • I can add in those attributes manually to my source code, which works, but it's frustrating to do it on each and every link that I'm putting in.
  • Another option that seems to work is clicking on the link inside the editor AFTER toggling out of the source code mode window, and opening up the new link in the editor and hitting "submit", which forces the editor to re-edit the link with the attributes added. But likewise, this is rather clunky and time-consuming, plus I have to remember to do it every time.

However, being a newbie to ProcessWire maybe I have overlooked something. Have I been doing something wrong, or is there a workaround that someone could suggest? I'm hoping to figure this out early on, since I'll be using affiliate links in my new website. Thanks for any help that anyone can provide. 

ProcessPageEditLinkScreenshot.png

Link to comment
Share on other sites

There are probably many different ways to do this, but perhaps the easiest might be to make use of this module (or modify it to your exact needs): http://modules.processwire.com/modules/textformatter-mark-external-links/

This won't actually save the rel="nofollow" to the link in the database, but will instead add it to all external links when the link is rendered on the frontend. 

 

  • Like 1
Link to comment
Share on other sites

Another option which avoids the need to parse and modify the links on every frontend page load (as a textformatter does), you could just do it once when a page is saved.

The example below (add to /site/ready.php) uses Simple HTML DOM as the parser:

// Change 'body' to whatever your CKEditor field is named
$wire->addHookAfter('Pages::saveReady', function(HookEvent $event) {
    $page = $event->arguments(0);
    // Return if body field absent or unchanged
    if(!$page->body || !$page->isChanged('body')) return;
    // Load Simple HTML DOM from site root
    require_once $this->config->paths->root . 'simple_html_dom.php';
    // Create DOM from body field
    $html = str_get_html($page->body);
    // Get all the links
    $links = $html->find('a');
    foreach($links as $link) {
        $href = $link->href;
        // For any link that is not relative and does not start with the site httpRoot...
        if(strpos($href, '/') !== 0 && strpos($href, $this->urls->httpRoot) !== 0) {
            // Set rel and target attributes
            $link->rel = 'nofollow';
            $link->target = '_blank';
        }
    }
    // Set the results to the body field
    $page->body = $html->save();
});

 

  • Like 5
Link to comment
Share on other sites

Thanks everyone for these answers. @adrian I liked the idea of the module, but when I looked at a discussion thread of the module, it says it should only be used on PW 2.x and not 3.x. Indeed, the module itself is only listed as compatible up to 2.7. I'm not sure if that means I still could use it successfully in my site, or that I might break things if I try that. I'll think about that. Even if it works, I'm a little hesitant to use a module that isn't designed to be used with future PW releases. Thanks for the info and I'll definitely keep thinking about this.

@Robin S Great, thanks for this code. I had never thought to use a separate HTML parser, and I love the idea that it does it when the page is saved. Very nice. Thanks for showing me how it should be done, as this is beyond what I would have been able to figure out on my own. Thank you so much.

Link to comment
Share on other sites

OK, I tried out the code from @Robin S and it works perfectly! :D It's an incredibly powerful and elegant solution, especially since it works on page save instead of front-end load. Besides trying out a standard link, I also tested it out with actual affiliate links and banners, which are a lot more complex-looking than a standard link, and it worked perfectly. For anyone in the same situation as me who wants to use Robin's solution, you should remember to first un-set the nofollow and _blank link attributes in ProcessPageEditLink (i.e. don't have those in the two boxes in the pic I showed in the original post up top). Then, just do what Robin said. It all just works!

I'll mark this as solved. Thanks again Robin S! 

  • Like 2
Link to comment
Share on other sites

  • Violet changed the title to [SOLVED] How to make external links nofollow and target _blank by default if using source code toggle in editor?

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...