While building the theme for this blog, I had a difficult time deciding which share links I wanted to include. Facebook, LinkedIn and Twitter were pretty obvious, but beyond that I had a hard time deciding which to use. I ended up settling on the six shown at the bottom of this page, despite the fact that I don't have accounts for VKontakte or Sina Weibo—I went with the most popular networks that have share functionality.

Pintrest, flickr and Tumblr are also very popular social networks with sharing features, however these are for images and videos. Since this website is text-based, these share functions would not be appropriate to include in this case. Lots of sites still include an option for Google Plus, which has been defunct for some time. In fact a Google image search for Share Links still shows the G+ buttons as one of the main options people use, as well as icons for Delicious, which is also defunct. These sources are terribly outdated.

Share buttons for Digg also appear on the first page of an image search for share buttons, though it's not nearly as popular since the company was quartered and sold off to Betaworks and LinkedIn. I could have also included a Reddit share button, but the main audience on Reddit are not the type to use social media buttons—they are much more adept in general and would be more likely to copy a link themselves and make some kind of post to go with it. A reddit share button would also encourage spamming my content, which is highly frowned upon on that platform. For these reasons I left the Reddit share button out.

While doing research to figure out the URL formats for the sharers I found a glut of different social media networks with sharing support across many sources. I've compiled them all here in one place, starting with the six I use...

https://www.facebook.com/sharer/sharer.php?u=[URL]
https://www.linkedin.com/shareArticle?url=[URL]&title=[TITLE]
https://twitter.com/share?url=[URL]&text=[TITLE]
https://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]
https://vk.com/share.php?url=[URL]&title=[TITLE]
https://service.weibo.com/share/share.php?url=[URL]&title=[TITLE]
 
https://www.reddit.com/submit?url=[URL]
https://pinterest.com/pin/create/button/?url=[URL]
https://tumblr.com/widgets/share/tool?canonicalUrl=[URL]
https://bufferapp.com/add?url=[URL]&text=[TITLE]
https://wa.me/?text=[TITLE]%5Cn%20[URL]
https://t.me/share/url?url=[URL]&text=[TITLE]
https://share.renren.com/share/buttonshare.do?link=[URL]&title=[TITLE]
https://like.baidu.com/set?buttontype=small&cb=bdShare.ajax._callbacks.bd4bb141b&index=0&url=[URL]
https://news.ycombinator.com/submitlink?u=[URL]&t=[TITLE]

The rest didn't make it into my design, but I included them in the list just to be thorough. I won't understate how hard it was to find all these; Google is flooded with people promoting their share link widgets for different platforms like WordPress and a glut of tutorials which all feature 5 of the same 8 social networks, or have outdated links like Google Plus. I had to look these up individually and wade through a lot of cruft—these services all want to push their embedded scripts on your site, which would stunt load times if you used them all, not to mention the privacy considerations.

There's also something decidedly sour about having a dozen scripts loaded just to have share functionality, but the links I have compiled above all work without any javascript added to your site. I might try to expand this list at a later date, these were hard enough to find as it is.

While there's existing button graphics that are often used on these platforms, I wanted ones that more closely fit the design of this site. I took these logos and modified them for the share buttons I have included. I also added the Github logo, since I use it in the Github Link sections at the bottom of certain articles...

The graphics themselves are just white on transparent, that way any background color or CSS gradient could be used with them to create the desired button effect, while keeping consistency. Another thing to note is that these images are much larger than the actual buttons I use and they use a 2 color palette of just white and transparent. There's a very good reason for this: PNGs are compressed in rows. The encoding will state the number of pixels of a single color value, rather than encode each pixel. This means than long rows of the same color will compress very well. Since there are only two color values in these images, they compress extremely well.

Anti-aliasing of the images is automatically done by the browser when the images are shrunk down, so the images don't look choppy and monochrome in real use. These images are 120 x 120 pixels, 2 colors and each one of them is between 300 - 800 bytes in size. This is a smaller file size than if I reduced the images down to 48 x 48 with anti-aliasing. I would need to reduce the icons to 32 x 32 anti-aliased before the file size would be smaller than these graphics.

To summarize, larger images with a lower color count compress better and will have a smaller file size than smaller images with anti-aliasing. In some cases, they may even be smaller than SVGs that plot all the details of the logos.