Aligned row of native Social Sharing buttons with counts (and robust Accessibility)

README.md

Demo here.

Shows a row of native social sharing buttons with counts, for Twitter, Facebook, Google+ and LinkedIn. Sharing is still possible without JavaScript and also in text-only modes, via url APIs. Uses Bootstrap for column placement.

On mobile phone screens (xs), the row becomes two rows with one button on each.

On UNIX, see the text-only experience with terminal command lynx http://eusebius.tech/#social-share-buttons

Replace EusebiusTech in Twitter with your own hashtags. %23 is the url encoding of #. See docs for more info.

On Jekyll (with Liquid) use:

• {{ page.title | url_encode }}
• {{ site.url }}{{ page.url }}

social-share-buttons.html

<!-- Requires Bootstrap for column placement -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
  <!-- Row should be in container -->
  <div class="row social-share">
    <div class="twitter col-sm-3 col-xs-6">
      <a href="https://twitter.com/intent/tweet?text={{ page.title }}+{{ page.url }}+%23EusebiusTech+" class="twitter-share-button" data-hashtags="EusebiusTech" data-show-count="true">Tweet</a>
      <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>  
    </div>
    <div class="facebook col-sm-3 col-xs-6">
      <iframe src="https://www.facebook.com/plugins/like.php?href={{ page.url }}&amp;show_faces=false&amp;layout=button_count&amp;share=true" scrolling="no" frameborder="0" style="height: 21px; width: 160px;" allowTransparency="true"></iframe>
    </div>
    <div class="google col-sm-3 col-xs-6">
      <script src="https://apis.google.com/js/platform.js" async defer>{lang: 'en-GB'}</script>
      <g:plusone size="medium" href="{{ page.url }}"></g:plusone>
      <noscript>
        <a href="https://plus.google.com/share?url={{ page.url }}" title="Share on Google+">
          <span>Google+ share</span>
        </a>
      </noscript>
    </div>
    <div class="linkedin col-sm-3 col-xs-6">
      <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
      <script type="IN/Share" data-url="{{ page.url }}" data-counter="right"></script>
      <noscript>
        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ page.url }}" title="Share on LinkedIn">
          <span>LinkedIn share</span>
        </a>
      </noscript>
    </div>
  </div>
</div>

social-share.css

/* --- Social share buttons --- 
Derived from https://gist.github.com/thebigreason/1296097 */

.social-share {
  margin: 30px 0;

  /* This gets Google to fall into place */
  font-size: 1px;
}
/* This gets Twitter text to body size when there's no rendered button */
.social-share a.twitter-share-button,
.social-share noscript {
  font-size: 14px; /* DIRTY fallback for Internet Explorer 11 and earlier; set to match body */
  font-size: initial;
}

/* This gets Facebook to fall into place */
.social-share iframe {
  vertical-align: middle;
}
/* Set an optional width for your button wrappers */
.social-share div,
.social-share span {
  display: inline-block;
  padding-bottom: 10px;
  vertical-align: middle;
}

.social-share .twitter {
  padding-right: 30px;
}
.social-share .facebook {
  padding-right: 40px;
}
.social-share .linkedin {
  text-align: left;
}