Blog

AddThis Social Icons Go Flat

I’m excited to announce that our team has updated our product icons to the a new flat and minimal style! The new icons are modern, vibrant, and will elevate the design of any website—including yours!

flat_icons

We didn’t roll out the new, sleek flat designs “just because”; we have reasons for making the change, all of which aim to increase content engagement on your site. Our new flat icons come with a few advantages.


Advantage #1: Less fat, same great taste.

comparison

We’ve reduced our icon sizes by approximately 40%. That means the social service images that load on your page, load faster. Less is more.


Advantage #2: They can increase engagement.

side layer

We tested the new icons on our blog, and saw a click increase of 48%! That’s massive! We want our tools to increase engagement on your site as well, prompting your visitors to click or share at the right time.


Advantage #3: Flat icons are automatically updated for you.

old_new

That’s right, you didn’t have to deploy new code or edit any templates! The new icons rolled out this morning, so if you have Smart Layers installed on your site, you should already be seeing the changes.

So, to conclude, the reason we love the new flat design is because it’s faster, sleeker, and prone to help you reach your site goals. If you have any questions, feel free to visit our support page, or leave them in the comment box below.

  • I hope the CSS I posted works well for you Michael!

    I posted another CSS design for you as well but one of the tags mimics a link so waiting for AddThis admin to approve my comment.

    Let me know if you need any further assistance.

    Your friend,
    Richard Morris

  • I must have been unclear and I apologize. The buttons are fine speed
    wise but I see no difference between old and the new flat design in
    terms of load time.

    URLs are http://dragonsheroesandwizards.blogspot.com/
    http://oldbatsbelfry.blogspot.com/

    I’d
    appreciate a look but I do believe it is a problem with either my code
    or google’s since this problem is not restricted to AddThis share
    buttons. No share buttons, regardless of origin, (except blogger’s) work
    in mobile or in any of the dynamic views.

  • rnb_001

    I have another question: can you add the Like/Tweet/Pin It buttons below the 2nd batch of social icons? Is it possible to do that? A mix of the 1st & the 2nd would be perfect

  • I decided to give your suggestion a shot.. no go.

    Ive read through the api’s and was able to change a few other things.. including setting up specified share buttons using:

    ‘services’ :
    ‘facebook,twitter,google_plusone_share,linkedin,pinterest_share,more’,

    which worked, but when I try to go for the mix with prefered services, with a total number 7 over the 6 preset so the user would see their last used service in addition to the services I set like so:

    ‘services’ :
    ‘facebook,twitter,google_plusone_share,linkedin,pinterest_share,more’,
    ‘numPreferredServices’ : 7

    I get no change..

    Any thoughts?

  • Hmm, sounds like we’ll need to take a closer look. Mind sending us an email so we can find out what might be causing this? help@addthis.com

  • Thanks for the feedback! In the meantime, you can use both the share icons and like icons, though they’ll show up on two different lines.

  • Unfortunately, you can’t mix preferred services once you specify you want to override them.

  • Jon Salinger

    I would like to provide some feedback on the new style. I do like them but it would be really useful if they explained what they were for. For example the Follow Us buttons says ‘Follow …’ when you hover over them so you know what they are for, whereas the sharing buttons on the left/right don’t say ‘Share on …’

    Can this be added automatically or can the code be amended to add this bit of text?

  • Thanks for the feedback. This is something we’re talking about, so thanks for reaching out!

  • rnb_001

    No problem! I’ve just noticed that the Facebook Like button was much darker on certain posts than on others. And the 3rd type of “Like” button is white. Is it normal to see so many varieties (a dark blue Facebook “Like” button, the original one and the white one)?

  • Sorry, I read it so long ago I kind of forgot, here is the correct code to allow for wildcard share icon(s) based upon the end-user’s latest share action.

    ‘services’ : ‘facebook,twitter,google_plusone_share,linkedin,pinterest_share,addthis_button_preferred_1,more’,
    //’numPreferredServices’ : 7

    There is no need to enter the number of preferred services so just slash it out like I did above.

    If you want more wildcard sharing services, the correct pattern is as follows:

    addthis_button_preferred_1, addthis_button_preferred_2, addthis_button_preferred_3

    Good luck.

    Your friend,
    Richard Morris

  • FYI: Disqus does not automatically break sentences with no spacing in them so to see the full code please highlight my entire post then copy it into Word/Notepad to read it, otherwise you won’t be able to see what I typed unless you visit your Disqus panel or have Disqus email alerts enabled to read my reply from there. ;)

  • Oh, I thought I just did mix preferred services after overriding them in the code I posted?

    Can you tell us more about AddThis Pro and when we can expect to get it!? O_O

    I want to try out every single feature and cross test them all against your other five plugins so bad I am almost drooling on my keyboard with anticipation! LOL

  • Dear Michael,

    AddThis CSS override similar to the old design with icon spacing:

    .atss a {
    height: 32px !important;
    line-height: 32px !important;
    margin-bottom: 5px !important;
    padding: 0px !important;
    width: 32px !important;
    }

    .atss a:hover {
    width: 48px !important;
    }

    .atss a. at-svc-compact {
    margin-bottom: 0px !important;
    }

    .at-share-close-control {
    width: 32px !important;
    }

    Very important note: You must remove the space between the letter a and .at-svc-compact in this tag here: atss a .at-svc-compact (I had to add the space or else Disqus blocks my post thinking it’s a link)

    Be sure to like my comment in order to help other users find this information.

    Your friend,
    Richard Morris

  • Your links are resolving to addthis.local so they’re not working.

  • So the issues I’m seeing are browser related. It appears that icons render well in Firefox, are fuzzy in Safari, and have the faint outline in Chrome… all on OS X of course. Oh and it has nothing to do with my site because the same anomalies are showing up on AddThis blog.

    Screenshot uploaded (click image for full resolution detail) and versions listed below:

    OS X 10.9
    Firefox 24
    Chrome 30.0
    Safari 7.0

  • Yep, it’s a known issue we’re working on. :)

  • Gotcha. We were able to replicate it if we zoomed in on the window, so we’ll be passing this along to the team now. Thanks so much for letting us know!

  • Facebook recently updated their Like button, so that’s why you see it’s slightly different than the older version. The square icons you see are share icons; they behave differently (they share instead of Like) so that’s why they look differently.

  • Yea nope.. it looks as the the AddThis rep is correct. The code you posted doesn’t work. The addthis_button_preferred_ options are ignored and do no display. Ah well.. I think I’ll just return to the deault settings for the time being.

  • Yes and no brother.

    This method will work (I just tested it) in the vertical Share Buttons but NOT for the Share Layers. If you want to use this method, simply turn off the Share Layer in your Smart Layer and use the vertical Share Buttons instead.

    Also, don’t forget AddThis has about 700 new servers and something called AddThis PRO which I plan to start using the second they give it to me which I hope is very soon, so if it is as good as they are claiming, I might not need to use the other plugins assuming AddThis PRO is superior, I will know soon enough because I plan to do a complete source code/browser/hardware crosscheck whenever they hand me the reins for AddThis PRO, I got so excited for this when I read the launch notice, was not expecting to see new product so soon! :D

  • We love your enthusiasm! We’ll keep you posted. :)

  • rnb_001

    Thanks for this accurate answer.
    Do you plan on updating yours? It’d be better if all the Facebook “Like” buttons looked the same. I like things to be homogeneous :-)

  • One thing for certain, You Guys Do A good job! I like AddThis! I have truly seen an increase in traffic, shares, etc. Good Job guys!!!

  • Awesome! Thanks for letting us know! We love hearing this kind of feedback. :)

  • We sure will! Stay tuned…

  • rnb_001

    I cannot wait to see all those changes. Do you have a date just to have an idea? I’m kind of in a hurry ^^

  • Unfortunately, that’s out of our control so it’s hard to say when. It’ll update automatically once Facebook rolls out the new icons.

  • Paul Cardy

    Did it not occur to you that some sites might look bad with the new square and flat icons when they were designed for round and non-flat ones? You didn’t think to maybe warn us? As a programmer, I would never introduce a breaking change like this as opt-out, but rather opt-in (for existing users). So.. how do I opt out?

  • Duly noted, and thanks for your feedback. Unfortunately, this is the standard design across all of our tools at this time. However, you’re able to customize our standard sharing using our API. Here’s some more info about that: http://support.addthis.com/customer/portal/articles/381263-addthis-sharing-button-api#.UoKHD5RATT0

  • Paul Cardy

    you keep trotting out that lame excuse (I’ve seen addthis quote it to other disgruntled users), but in doing that I loose the only reason to use addthis, namely localised choice of buttons (e.g., weibo in china). I *know* you know that even flat rounded buttons would be useful for your users, and that flat square buttons just look wrong on some pages because **you’re using them a few paragraphs above this post!*** why not make them available to everyone? finally, the links on the notification email to this post, they direct to www-la.addthis.local instead of http://www.addthis.com

  • Unfortunately, the suggestion we made above is the only solution we can offer you at the moment. As for the Disqus notifications, that is an issue we’re aware of and are currently working to resolve.

  • semrocc

    I guess it was wishful thinking, but nobody ever did reply back to my email :(

  • Sorry if we missed your message! Please resend it and let us know when you do: help@addthis.com.

  • West

    So, I really like the performance/look of the buttons displayed on your site right now.

    does your Add This code accommodate such a layout?

    If not, mind spilling the beans on how someone with a limited knowledge of coding and file organization could obtain that?

  • West

    In the below comment I am specifically referring to the floating buttons on the left side of the page.

  • We’ll totally spill the beans! :) The floating icons on the left are part of our Smart Layers tools. You can customize & grab the code free here: https://www.addthis.com/get/smart-layers

  • West

    Wow. That was easy, thanks to you. I will most certainly mention your name should someone ask my opinion regarding sharing button options.

  • 2B Editor

    Hi! Is it possible to change the color of the letters on the “follow” and “share” buttons of the bottom bar for mobile?

    I love the Smart Layers, but I need a little customization – Just a little! Please!

    Thank you…

  • Hello! The color of the letters itself can’t be changed, but you can select the background/theme of the tools (which might help?). Here’s how: http://support.addthis.com/customer/portal/articles/1200473-smart-layers-api#mobile Let us know if this doesn’t make sense. You can email us at help@addthis.com.

  • We use the share icons on our website http://www.philipmorrisdirect.co.uk/ and the new icons do look a bit boring now I feel? I preferred the 3D effect if I’m honest. Would it be possible to let us choose which design we would like to use and maybe offer a smaller option? The comment about quoting “share” and “follow” is also a good idea.

  • We’ll definitely take your feedback to the team. Although we don’t have those options available in the default, they are customizable with some code: http://support.addthis.com/customer/portal/articles/1200473-smart-layers-api#.Uoy-eWRATT0

  • gadr

    Some sites are not just into flat design. “Automatically update” mixes styles and it’s not fair for the design… Where can I choose addthis?

  • Chris

    Hate the flat squares. Want 3d rounded squares back. I guess even flat rounded squares would be ok.

  • Michael O’Brien

    stopped by and added smart layers and now this , Awesome Thanks Add This ! Hope santa Brings you a lil extra somthin somthin this holiday season :)

  • Inovar é preciso, sempre!…Obrigado!

  • Unfortunately we don’t have that design option available at this time, but you do have the option to customize your buttons with CSS.

  • Thanks for your feedback. We rolled out the flat design across all our tools. If you do want to customize, you can do so with CSS.

  • These new designs are awesome – love how they look

  • I don’t like the flat design, they have no depth and look cheep. I’m lucky to be able to add my own css to adjust this, i feel sorry for the people who cannot.