AddThis Blog

Taking Control of What’s Next and Recommended Layers [UPDATED]

You’ve probably installed the What’s Next, and Recommended Layers on your site/blog, and you’re thinking to yourself, “Why is that blog post with kittens doing yoga showing up in the layers?!”

Well, the easy answer is because people love watching kittens doing yoga. The not-so-easy answer is that your visitors are constantly sharing and driving more visitors to that page, which signals that the page is trending and should be recommended to other visitors. Then again, you have lots of other great content that you want to appear in those layers as well. So I’m here to help you take control of your layers.

Built into Smart Layers is the ability to filter and take control (to a certain degree) of what links show up in the What’s Next and Recommended Layers. This is done through the linkFilter property which is documented in our API. The basic idea is that you define a function that will be passed the link and layer and you decide if you want it to show up.

Now let’s go through an example of how to filter out the fictional blog post about kittens doing yoga.

First, find your Smart Layers code. It should look something like this:

addthis.layers({
    'share' : {},
    'whatsnext' : {},
    'recommended' : {}
});

Next we are going to add “linkFilter” to our configuration object and define our function which will be passed the link and the layer:

addthis.layers({
    'share' : {},
    'whatsnext' : {},
    'recommended' : {},
    'linkFilter' : function(link, layer) {
        console.log("URL", link.url);
        console.log("Title", link.title);
        console.log("Layer", layer);
        return link;
    }
});

You should also notice that I added some console.log messages to output the URL, title, and layer. This is really useful to debug what’s going on under the hood. You should also see that at the end of the function, I’m returning the “link” object. By doing this, I’m telling Smart Layers that I want to show this link. If I don’t want Smart Layers to show this link, I would return “false” instead.

So now I’ll update my example and filter out any link that has “kitten” in its title:

addthis.layers({
    'share' : {},
    'whatsnext' : {},
    'recommended' : {},
    'linkFilter' : function(link, layer) {
        if (link.title && link.title.indexOf('kitten') >= 0) {
            return false;
        } else {
            return link;
        }
    }
});

That was pretty easy right? Okay, so now I’ll do a slightly more complicated example where I’ll filter out specific titles and URLs:

addthis.layers({
    'share' : {},
    'whatsnext' : {},
    'recommended' : {},
    'linkFilter' : function(link, layer) {
        if (link.url && link.url.indexOf('http://www.mysite.com/kittens-doing-yoga') === 0) {
            return false;
        } else if (link.title && link.title === 'Kittens doing yoga') {
            return false;
        } else {
            return link;
        }
    }
});

The previous example works great for filtering out a single string or URL. But suppose you had multiple pages of kittens doing yoga. Here’s another example that shows how to filter multiple URLs:

addthis.layers({
    'share' : {},
    'whatsnext' : {},
    'recommended' : {},
    'linkFilter' : function(link, layer) {
        if (link.url && (link.url.indexOf('http://www.mysite.com/kittens-doing-yoga') === 0 
           || link.url.indexOf('http://www.mysite.com/more-kittens-doing-yoga') === 0)) {
            return false;
        } else if (link.title && link.title === 'Kittens doing yoga') {
            return false;
        } else {
            return link;
        }
    }
});

I mentioned limitations earlier. To clarify, you cannot add a link or pick the link you want to have show up. You have the ability to filter out what you don’t want to display, but ultimately Smart Layers will choose what’s best for your visitor.

And there you have it! Now you can write your own custom rules to filter out specific links, or if you can come up with a regex, you could even filter out certain sections of your site/blog!

How have you used Smart Layers so far? Have you done any customizations to it? We’d love to see it!