Original proposal by @georgeolaru for Pixelgrade.com:

Guidelines

It would be great if we can apply the same "block" treatment that we choose with Comments, so we can use this Sharing component on both the Pixelgrade.com site and Rosa2+Nova system.

My main concern is performance and privacy because many plugins available on WordPress add a load of code for a simple set of links. With this sharing system, I would like to address a basic use-case, with minimal Javascript involved and minimal impact on performance and tracking.

I couldn’t find many resources on this matter, but this Hacker News discussion could be a good starting point that suggests a few promising solutions, like Shariff or SocialSharePrivacy.

The Share Modal

• Styling
  • The overall layout is similar to the Mobile version of the menu (see screenshot). -
  • The colors should be chosen from the Color Palette, with transparent blacks and whites where it’s needed
• Structure
  • the Share modal could be an area where other plugins can hook up and add their sharing options (eg. like Jetpack Sharing)
  • While the “Copy link” should be custom coded by us, the other items and groups could be hardcoded for Pixelgrade.com until we figure out a solution to manage them from the backend.

The Share List

• The “Copy link” item
  • The "Copy link" functionality is the most important element as it’s containing the “universal” solution for sharing: a plain link. It should be custom coded and displayed at the top of the list:
  • I do like the most the experience from Basecamp (see recording) and the autofocus from Stackexchange (see recording)
• The Print/PDF items are nice-to-have at this point. If you can find some simple and elegant solutions for them, go for it!
• There might be items that should be available only in some environments (eg. SMS on mobiles), and we could simply hide them when we find out more details.

The Share Buttons
I will come back later for the "Share" buttons location and styling, as I had some discussions with @oanafilip and now I have some directions to explore.

Resources

• Figma Mockups
• Tools:
  • Shariff
• Articles:
  • UX Considerations for Web Sharing
  • What Percent of Page Views Share on Social Media? (2014)
  • Hacker News discussion
    • The scourge of web analytics

ToDos

Here is how I see this project running:

• Style the modal in the frontend (without the functionality for sharing buttons)
  • Create the "Copy link" component
  • Source a list of SVG icons for sharing options @georgeolaru
• Implement a system for sharing links management
• Create the functionality to open the modal from multiple places (eg. similar to Search)
• Add the “Share” buttons on Upstairs Blog and Community