Blog

AddThis Smart Layers: Personalizing the Web

Today, we’re democratizing awesomeness with the next generation of web tools. AddThis Smart Layers includes Share, Follow, Recommended Content and What’s Next tools all in one line of code. We’re bringing data and responsive technology together for publishers of all sizes in ways that have generally only been available to resource-heavy companies like Yahoo! or Amazon.

smart_layers_blog

Smart Layers is designed to drive measurable outcomes––increasing engagement, traffic and monetization––for sites across all devices and platforms. Smart Layers is responsively designed, optimized and retina-ready for mobile, tablet, and desktop. One line of code and, Boom! It just works.

Smart Layers @ Work: Mobile & Personalized

Smart Layers puts the right social tools and content in the right place for every visitor. By personalizing the experience for each, visitors will spend more time on site, share more to their friends and buy more (for ecommerce sites). Check out this video to learn more.

Or, just look at our blog right here where you are now. If you visit this post on a mobile or tablet device, you’ll see how it changes. If you’re on desktop, see the sharing tool on the left? It’s personalized for you. Look up and to the right. You can easily become a fan or follower with the Follow Layer. Now, if you keep scrolling towards the bottom of this post, you’ll see personalized prompts appear through the What’s Next Layer and other AddThis content promoted in the Recommended Content Layers. This is all done with one line of code based on our expertise in content marketing and distribution.

Content Marketing and Distribution

AddThis is one of the most widely adopted technologies on the Internet today. We are leveraged by over 14 million unique websites on a monthly basis, and our technology was called over 1 trillion times in 2012. Many think of AddThis as a sharing company and we’ll continue to provide awesome sharing tools, but sharing is really a form of consumer to consumer content distribution and engagement. That’s our real mission—delivering engagement tools and services across advertising, publishing and e-commerce. Engagement happens on social sites like Twitter and Facebook, but it also happens on millions and millions of other small and large sites everyday.

Smart Layers is a natural next step in our evolution to personalize the web with powerful, easy-to-use engagement tools, empowering all sites to create rich content experiences.

We’re not done yet either. There’s so much more to do on personalization in the age of privacy. Regardless of the outcome of discussions about cookies and user privacy, we know that publishers, advertisers AND consumers all want relevant and rich content experiences on any device. With Smart Layers, we are delivering the tools to make that happen.

We believe in the power of the open web. Today is a milestone for us and we thank you for your continued feedback and ideas that inform all of our products and iterations. Now it’s your turn. Take Smart Layers for a test drive with our live demo. Make your site smarter with AddThis Smart Layers.

#getsmarts #addthisawesomeness

July 30: Update made to clarify content.

  • Currently trying Smart Layers out on my blog. Liking it so far.

  • Glad to hear, Liam! Thanks for trying it out.

  • Megan Smith

    Not working in Chrome :/

  • Hi Megan, we can help. Can you send us an email to help@addthis.com with your URL so we can test it out?

  • Jack

    What are the image resolution prerequisites for the ‘Recommended for you’ sections? my featured images aren’t being picked up – Great tool by the way!

  • Hi Jack, Smart Layers automatically resizes the images, but you do need to have the proper open graph tags specified for it to work. Here’s how to do that: http://support.addthis.com/customer/portal/articles/1223427-tagging-your-content-for-the-recommended-content-layer#.UeVRMWRATbl

  • Roberto Ruiz

    With the new Blogger interface, I no longer see where I could paste the Smart Layers code. How can I install them? Thanks!

  • You can copy & paste the code just above the tag in your blog’s theme. It should work like a charm!

  • Dani Montoya

    I am on a samsung tablet and I see don’t see any of the stuff you said I should be seeing. Just thought you should know this. except for the bottom Follow, share bar. I do see that. It all looks the same.

  • It’s working well with self-hosted my wordpress blog. However, the Pinterest share button does not show on the left-side sharing column. It only shows up when I click the Plus sign (more options)

  • Thanks for giving Smart Layers a try, Ardash! The reason you’re seeing only a specific set of share buttons on the left is because they’re personalized to each visitor. We’ll have a blog post about this soon. :) But if you prefer to change it manually, you’d have to do it thru our API: http://support.addthis.com/customer/portal/articles/1200473-smart-layers-api#share

  • Hi Dani, what’s the URL of the site where you’re seeing the issues?

  • Terry

    The sharing tool on the left shows the icons coded into the sharethis button, not the ones I coded into the smartlayer.

  • If we’re understanding your answer correctly, the pages you added to your code were for the Follow Layer up top. As for the Share Layer, the buttons that show up are personalized to each visitor so they won’t always show the same options. Here’s some more info about that: http://support.addthis.com/customer/portal/articles/1216215-what-are-smart-layers-#.UfbYt2RATT0 Does this answer your question?

  • Xymanek

    I’m currently viewing this site on iPhone 5 and I do not see any buttons on the left, as specified in the post. Does that mean that they are left out on mobile devices?

  • Terry

    This has proven way too difficult. I used the code on my blog (pasting it above the end-body tag in the theme’s html) and it layered my share-button’s pre-selected icons vertically on the left (which when I view it is NOT personalized to my options) and the Share Layer (which IS personalized) horizontally across the top right, layered over blogger’s links for “new post”, “design”, and “sign out”, making these links unreachable.

    I have quit trying. I won’t be using SmartLayers. Maybe a few months from now I’ll try again in the hopes you have debugged this thoroughly. I do like your share button!

  • Greg M

    Works fine in Chrome, but not IE10 (or 8). The top right Show/Hide button is there, but the share buttons are not. If you can get this working in IE, I’ll be glad to add it to my sites and spread the word – it would be an improvement.

  • You should see them! Make sure your private browsing option is off, and see what they look like on your phone. :)

  • Try clearing your cache. If that doesn’t work, send us an email with your URL so we can test it out. help@addthis.com

  • Greg M

    In IE, clearing the cache made no difference. In Chrome, it caused the entire widget to disappear. No trace of it remained. Weird.

  • Strange. What’s the URL you’re looking at?

  • Greg M

    http://eyescastdown.com/test.html – already emailed to help@…

  • susan rattray

    Nothing works on IE10. I have to use FF & Chrome to watch anything because IE decided it would not download Adobe flash. Useless browser.

  • susan rattray

    But why should we have to do this? Other browsers are quite fine why not IE?

  • zaygsi

    Hi, I was trying out this one and realized that on the tablets, it can only display either at ‘top’ or ‘bottom’. Can we display it at left or right as how it displays on the desktop?

  • Not at the moment; that option’s only available on desktop.

  • We’re sorry it didn’t work out, but if you ever run into any issues with our buttons, please feel free to email us directly at help@addthis.com. We’d love to help.

  • zaygsi

    Noted with thanks for the prompt reply. Well then we just have to wait till it supports :)

  • You can turn off mobile in the meantime (here’s how http://support.addthis.com/customer/portal/articles/1200473-smart-layers-api#share). We’re continually making updates, so stay tuned!

  • Xymanek

    I checked and the private browsing is off, however I still don’t see them. After browsing around the code generator I think we are talking about different things. I do see them now as I’m on my mac (on the left) and in my iPhone’s Safari I see the black row at the bottom, which serves exactly the same function.

    But thanks for trying to help!

  • You found them! The desktop appearance is different than mobile; sorry for the confusion before!

  • Xymanek

    Tnx. BTW the smart layouts look really smart (XD)! Too sad i haven’t got a chance to try then out yet :-(

  • If there’s something we can do to help you add it to your site, let us know. Email us at anytime: help@addthis.com

  • Good start folks, but there’s still some work to do as far as the user experience. Using this post for example — I see icons in the upper right, and to the left, but what do they do? There is no guidance as to what these buttons do. Without basic identification, the call-to-action is weak.

    Now I can guess as to what they do, but for the average user, they are going to be totally lost.

    In addition, we have an “choice overload” situation. At this comment box area of the site we have:
    — icons on the very left of the browser window
    — icons just above the comment form
    — icons just below the comment form
    — a “share to facebook” box to the bottom-right
    — and more icons in the upper-right

    What am I to do with all these choices?

    Keep up the good work! Look forward to seeing more.

  • We appreciate the kudos, and thanks for the feedback! You’re right. Users need some direction to know what the layers do. So with Smart Layers, we placed Share and Follow where users expect them (right/left, and top-right). As a publisher, you can also customize the Follow Layer to show “Follow” right next to the buttons. Like you said, we don’t want users to be lost, but we also don’t want them frustrated by looking for buttons.

    Thanks again. It’s feedback like yours that help us improve our products. We’re taking note!

  • I still cannot get my Recommended Content layer to show up. All I get is the Follow on Facebook popup. Does the Recommended Content layer show up in the same location as the Facebook Follow box? In other words, if Im seeing the Follow on Facebook box does that mean that the Recommended Content layer is installed correctly? I seem to remember deleting a Recommended Content Layer code but cant figure out how to get it back. Do I just have to reinstall the entire Smart Layers code?

  • No need to reinstall, but we can take a look to see why the Recommended Layer isn’t showing up. Can you send us an email to help@addthis.com with your URL?

  • Email has been sent. Thank you.

  • MaJoBV

    Hi,

    I’m really happy I discovered Addthis yesterday. I immediately added both the smart layers widget and share buttons to my blogger blog. It was working fine until a while ago. I’m on my laptop and it is showing as if it was on a mobile device and the post share buttons aren’t there anymore :( Any help will be very much appreciated! thanks :) http://muymajobv.blogspot.com

  • Hi MaJo, thanks for joining the AddThis community! Your Share and Follow layers look normal on desktop. Just so you know, the buttons will reconfigure to the mobile layout if your resolution is low. Have you tried increasing the resolution, or expanding the size of your browser?

  • MaJoBV

    thank you so much for the super quick reply! duh! I feel so dumb now… I just had my window smaller; put it back to normal size and they all appear again. I had no idea it was so clever, lol.

  • No problem at all! Let us know if any other questions come up. :)

  • Elizabeth Winchenbach

    nevermind – somehow I got it to work, no idea how or what I was doing wrong – thanks again for a great product – but please add all the little details about how to put stuff where, for those of us who are not full-time web geeks :)

  • Glad it’s working now, Elizabeth! If you ever have any questions on how to add/customize the code, please don’t hesitate to email us at help@addthis.com. We’re happy to help!

  • Awesome Work with the Smart Layers guys. I wanted to ask a bit of help.

    I read about the Open Graph Code and the code includes things like “AddThis Smart Layers: Personalizing the Web” “http://farm6.staticflickr.com/5486/9262576856_3e294841e2_o.png” “Introducing the next generation of web tools: AddThis Smart Layers.” http://www.addthis.com/blog/2013/07/11/addthis-smart-layers

    I wanted to know if these are aears I cancustomize for myself or leave them as they are?

  • Matt

    Hi Alain,

    The Open Graph code example you’re referencing is intended to be an example of the format you could use on your site. For your site, you would just replace the og:image, og:url, og:title, and og:description with the appropriate image/text from your website. If you need any further help, send us an email – help@addthis.com. Thanks!

  • Hi, i wonder that at my page, Smart layer recommends the same content. so what going on ?

  • It could be for a couple of reasons. Please email our support team with more information (including your site’s URL), and they’ll be happy to assist you: help@addthis.com

  • Thank you i will do it.

\n\n