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?!”

blog_image_template_aug2

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!

  • Muneeb Ahsan

    Really awesome work, bro i like this tutorial and will try this very soon. Thanks

  • Let us know how it goes!

  • Kevin

    Nice tutorial and features! Is it also possible to make sure a specific page gets more promotion? It would be really nice for example to promote our newsletter landing page…

  • Sol

    Thanks Kevin. We’ve heard that same feature request from a ton of people now, so we’re definitely thinking and considering how to implement a feature like that. We’ll keep everyone posted.

  • Didn’t quite work for me. Thing is my code never looked like your first example does, so I wasn’t exactly sure where to put the code. I think I placed in correct place, but like I said, it didn’t take. Could you provide an example with a more modified code such as users with links to their various social sites may have?

  • Sol

    Hi Inti – here is a full example that you can try using:

    http://support.addthis.com/customer/portal/articles/1200473-smart-layers-api#complete

    If you have the code somewhere I could take a look, drop it in a reply and I’ll be more than happy to check it out. Thanks again for trying Smart Layers, keep the feedback coming.

  • Bruno

    Very helpful, thanks. What would we need to do if we only want to show the “Follow on …” links in the recommended layer, i.e. don’t show any content but only provide the option to follow on FB and Twitter?

  • The Recommended Content layer is designed to increase user engagement by specifically showing more content from your site, so there isn’t an easy way to do what you ask. But keep in mind you have the Follow Layer and What’s Next Layer to connect your visitors to your social networks.

  • Bruno

    Many thanks for your response. I actually meant the “What’s Next Layer” but mistakenly referred to it as the “Recommended Content” layer, my apologies. Is it possible to restrict the links in this layer so as to only show the social links or other selected links? As others have suggested, having the chance to promote a newsletter etc. in this layer would be great.

  • Gotcha. :) The What’s Next Layer works similarly, but it’s designed to give your visitors fan/follow suggestions in addition to content recommendations. So as this post says, you’d only be able to code links to exclude–not include–in those layers.

  • Hi! I really like this feature but the pictures showing on my recommended box are blurred and how can I show the title only just like your recommended box appearing below. Thanks.

  • Sol

    Hi Ellen, can you provide a link to your site where you’re seeing this problem? As long as your content is tagged correctly with open graph tags, it should look similar to the Recommend layer on the AddThis blog.

  • here’s the link http://www.wanderfulexperience.info, yesterday the pictures that are showing are 3 out of 4, now they all appear but just the same the pictures are vague.

  • Hello Ellen, 23 days since your comment above and your pics are still blurry and difficult for me to see in the AddThis recommended layer, why hasn’t somebody resolved this issue for you? It’s probably just a simple CSS tweak required on the AddThis developer’s side. The reason I ask is because sometimes I have the same problem on my own website depending on what browser I’m using, etc. Let’s hope that in the future more time is spent on crosschecking code at AddThis before launching it to the general public for immediate consumption. Ellen, if you read through the AddThis knowledge base, you will see we are not the only two people having this problem, it’s been well documented but no solution appears to be surfacing as of yet. I hope a solution turns up soon. Take care.

  • Nice post. But could use more examples. I want to know how to block multiple URLs? Example, a log in page, a terms page, etc. You know what would be good, to have these options in the code generator, under an advanced tab if you don’t want too many options for new users at first. I am not a JavaScript programmer, I do marketing so I need you to tell me how to block more than one link, here is what I have made so far but it’s only good for blocking one link as you can see below:

    ‘linkFilter’ : function(link, layer) {
    if (link.url && link.url === ‘http://www.test.com’) {
    return false;
    }
    else {
    return link;
    }
    },

    To be honest, I don’t even know if my code is correct above, I just copied what you did above hoping it might be okay, so how do I block more than one URL please?

  • Hi, the pictures that show up in the Recommended Content layer are taken from the og:tags you set on your pages. The images need to be at least 200px x 200px to show up properly on the layers.

  • Hi Ellen, sorry we missed your last message. The images are blurry on your Recommended Layer because they’re small (75px) and we suggest having images no smaller than 200px. If you’re able, reupload them to 200px, and let us know when you do.

  • Since this might take a couple steps, could you email us with the URL? help@addthis.com

  • Thanks for the update, I’ll do what you said then give you feedback once they’re okay.

  • Hi ARKiQ! they heard us, let’s do the change and see if it will work on our website. Thanks and take care too!

  • Actually Ellen’s images are 72x72px, not 75x75px. Ellen needs to add 128x128px to her 72x72px images to rectify this problem. I on the other-hand have a totally different problem. AddThis is showing only the top left first 200x200px of my images rather than re-sizing my images to fit properly in the Recommended Layer. This problem mainly happens in Opera but I have seen it happen once in Chrome too. I always keep a copy of Chrome, IE, Safari, Firefox and Opera running on my task bar when coding, I hope the AddThis developers do too. So how do I get my images to scale properly in the Recommended Layer across all browsers please?

  • Ellen, simply upload your pics at 200x200px or greater to fix the problem. Warning: If you upload your pics greater than 200x200px there might be times when your pics do not scale down in the Recommended Layer across all browsers, I’m still waiting to hear about a fix from the AddThis team as I’m pretty sure it’s a simple CSS tweak is all. Thank you for your attention.

  • That is the problem, my image is greater than 200x200px and does not always scale down. This means users can only see the top left corner of my images which doesn’t look very pretty. This is fairly random, happened in Chrome, always happens in Opera. The problem is universal, not just on my website, so hope you can fix it, likely a very simple CSS tweak needed is all. Thanks.

  • The images should be scaling down automatically by the Layers, so if they are not, please be sure to send us an email so we can look into the issue.

  • MN

    I don’t get it. In one example you have console there:

    ‘linkFilter’ : function(link, layer) {
    console.log(“URL”, link.url);
    console.log(“Title”, link.title);
    console.log(“Layer”, layer);

    and the next example console ,etc is missing?

  • The console.log lines are used for debugging, so you don’t have to include them in your code.

  • MN

    How would you do this if you wanted to remove several pages and not just one?

  • It might be easier if we email so we can give you step-by-step instructions. Can you send us a message to help@addthis.com with your URL?

  • Is there a way to hide the page title from the post titles? My What’s Next suggestions show “Everything-Voluntary.com: Post Title Here”, I want to hide “Everything-Voluntary.com:” from that and just show the post title. Any help is appreciated. Note: This is done on the Trending Content widget with “remove : “Everything-Voluntary.com:””, but that doesn’t work in layers, but I could be adding it wrong. TIA.

  • Kamil

    I have one more question. I installed plugin AddThis Social Bookmarking Widget one month ago. Yesterday I installed plugin Smart Layers for WordPress – both plugins I have turn on in admin. When I turn off Social Bookmarking Widget my Smart Layers are disappear at my website.

  • We will need some more information, Kamil. Can you please email us at help@addthis.com with your URL so we can check it out?

  • Kamil

    Message was sent :-) Thx!

  • Hi there. This is a great plugin. Thanks for the insights.I have two questions:
    (1) For the “followus” service, is it possible to add an email button which links to a page for my enewsletter.
    (2) I have the “recommended” service setup, but it is colliding with my footer and I can’t read the word “recommended”. How do I give it more space so the word recommended is fully visible.

  • Hi Nick, unfortunately we don’t have other services in the Follow Layer. As for fixing the formatting of your Recommended Layer, we are happy to help! What’s your URL?

  • Thanks! It’s LeapingPost.com

  • Try adding this into your code, right above the tag: at4-recommended-recommended {
    padding: 80px 0 !important
    }

  • It worked – Thanks!

  • Score!

  • Griff1324

    I have added the following and it is not working. The items are still showing on the page. Please help!

    ‘linkFilter’ : function(link, layer) {
    if (link.url && link.url.indexOf(‘https://www.mydomain.com/checkout/onepage/’) === 0) {
    return false;
    } else {
    return link;
    }
    }

  • Happy to check on that for you! What’s your site’s URL?

  • MathNook

    I know I had problems with the code initially because I didn’t put a comma after the previous section if this is the last section. It didn’t work for me until I looked at the example and realized I needed to put a comma in the previous section.

    Good luck!

  • MathNook

    It would also be nice to have a “random” option that would occasionally recommend a random page. Great plugin and the example worked perfectly.

    Was able to prevent certain pages from being recommended by using the linkFilter in the example. Just what was needed.

    So is content recommended based on popularity of that content or the visitors interest?

    Thanks,
    Tommy

  • Watch Teller

    HI,

    I have WooCommerce installed. Wondering filter single product and single blog page show in the What Next and Recommended Layers

    1. If that possible 2 or more URL filter?
    2. If that possible 2 or more link Title Filter?
    3. Any great suggestion and idea for promote the product like eBay and Amazon?

    Look forward you help.

    Thanks

  • C5

    Hi, any idea on implementing this on Concrete5?

  • Matt

    I’d suggest that you add an HTML block within Concrete5 and then paste in the Smart Layers code from our “Get The Code” page on our site.

    http://www.concrete5.org/documentation/editors-guide/in-page-editing/block-areas/add-block/html/

  • Do you have to use a full URL, or can you use snippets? (e.g., exclude any page that includes /kittens/ in the URL)

  • Sol

    You can use snippets, but you’ll have to do a bit of Javascript to do it properly. You would do something like (url.indexOf(‘/kittens/’) !== -1) return false; which means if you find the string /kittens/ in the url, don’t show it. I hope that helps. Good luck and let us know if you still need help.

  • Hmm, that didn’t work. Killed the script so Smart Layers is not even showing. Here’s what I had for the last few lines of the script:

    ‘recommended’ : {}

    ‘linkFilter’ : function(link, layer) {

    if (url.indexOf(‘/kittens/’) !== -1)

    {

    return false;

    } else {

    return link;

    }

    }

    });

  • Sol

    Sorry, the code I provided wasn’t 100% correct. You’ll need to replace url.indexOf with link.url.indexOf. Give that a try.

  • Darn, I still can’t get that to work. Here’s what I have:

    ‘recommended’ : {}

    ‘linkFilter’ : function(link, layer) {

    if (link.url.indexOf(‘/kittens/’) !== -1) {

    return false;

    } else {

    return link;

    }

    }

    });