The (original) problem It has always annoyed me how crappy the social buttons we use on this site look on retina screens (modern cell phones). Because they don't use retina resolution images for logos. Other (minor) problems The buttons are slow... as it turns out, the three buttons we use on this site (Facebook, Twitter and Google+) generate a total of 20 HTTP requests totaling ~116KB for each page view. Not a huge deal, except that some of the HTTP requests are very slow. Formatting of the buttons is non-existent. They are rendered inside IFRAMEs, which means you really can't do anything as far as manipulating CSS to make the buttons somewhat match each other or the look/feel of your site. It always annoyed me that social networks track users with cookies via the social buttons. The solution I decided to design my own replacement buttons for Facebook, Twitter & Google+... Utilize vector-based SVG images for the logos so they scale infinitely. The buttons are rendered into the page DOM (meaning you can manipulate them with CSS). The "share" numbers for each network are consolidated into a single number, which allows us to reduce down the total screen real estate required. The "share" numbers are fetched on our end vis API calls that are run in parallel (the total time it takes to get all the numbers is the time it takes the longest single API to respond). The "share" numbers are cached on our end so we don't need to make a ton of API calls for every page view. The rendering script (social.js) is cached in the end user's browser for 1 hour (browsers won't even bother checking if it's been updated, which would require an HTTP request that still included headers). No tracking/cookies required to use. The results A single HTTP request is required to render all buttons (1 vs. 20 with the default buttons). The data transfer needed is ~2KB (compared to ~116KB for the default buttons). Overall page load times are SIGNIFICANTLY reduced. For digitalpoint.com, the real-world page load times for users were reduced by 16.12%. User engagement is up is 365% higher (users actually *using* the buttons). This has caused more users coming in to the site from the social networks. The buttons look good on retina screens and can scale even larger if you needed to for whatever reason. An example of how they looked zoomed in: You can restyle/resize them completely with CSS if you wish. For example a little bit of CSS turns them into this (from http://www.shawnhogan.com): Indirect results It's hard to say definitively how much of an affect it's had on some things, but here's some random stats since the new buttons were rolled out: All pages load an average 1.52 seconds faster 0.91% more visitors (works out to many thousands more) 0.14% lower bounce rate I rolled out the JavaScript that we use to render the social buttons here so that anyone can use it on their own site... at the end of the day a faster website is always a better website in my opinion. https://tools.digitalpoint.com/social-buttons
I think most people find it annoying. It's good that "Digital Point" found mobile-optimized buttons. The other solution is also to find a platform such as Wordpress that has a plugin for automatically optimizing a site for mobile use.
This is kind of cool, I am going to have to play with the SVG format. I never put social media scripts in sites, I have just been making png buttons with a straight link to the social media page. The problem with that is the small buttons can look ragged due to pixels. Thanks for sharing Shaun.
IDK, I guess I'm getting old or something. I find all this social stuff a bunch of nonsense. Some websites have so many scripts running it kills the browsing experience. I'm going to just stick with plus, fb and twitter for now.
Its really hard to make social buttons totally right without affecting the design or page speed. If you use image, it will reduce page speed although only a little bit. As you know slow loading time increases bounce rate. Now you have to find a way out to use plugins without affecting the speed.
Neat idea trying the script on one of my sites. Any way to get reports on pages shared from a domain using social buttons