Skip to content

Instantly share code, notes, and snippets.

@collin

collin/sharetools.md

Last active September 2, 2016 20:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save collin/2b19dd8812d917bf6535210e781d90e1 to your computer and use it in GitHub Desktop.
Save collin/2b19dd8812d917bf6535210e781d90e1 to your computer and use it in GitHub Desktop.
Download ZIP
<share-tools>
Raw
sharetools.md 
<share-tools
  share-title="Share This!"
  share-url="//example.org/share-me"
  data-track-category="Super Cool Category"
  data-track-action="Share" [0]
>
  <h1>Special Custom Share Message</h1> [1]
  <share-via-facebook icon label></share-via-facebook>
  <share-via-twitter icon label twitter-handle="theonion"></share-via-twitter>
  <share-via-email icon label message="via theonion.com"></share-via-email>
</share-tools>

[0] The data-track-* attributes have nothing to do with the share tools, other page-wide javascript interpret them for their own purposes. Huge interop win comes from just using dom elements here. Don't even have to consider the compatability story.

[1] Any html goes inside here. Very flexible for handling our incoming designs.

Easy to use, low training threshold.

The biggest hurdle for getting everybody on board was explaining that: Yes, you can just add a class attribute to these to restyle them.

<share-tools class="footer-share-tools">
  <share-via-facebook icon class="footer-share-via-facebook"></share-via-facebook>
</share-tools>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment