Easily add sharing icons to my blog

AddThis have a great sign-up flow and configuration, but the instructions for adding the gadget to your page are a little out of date and missing a couple of optimizations. This article provides your one-stop click-and-install shop for adding sharing icons to your blog after you've signed up with AddThis.

Register for an AddThis account

• Follow the above link, and sign in / sign up. 
• Click 'Explore Tools'
• Click 'Share Buttons'
• Configure your options, and save.

You'll be prompted with some instructions. Follow them if you wish - there's a full help article which is Blogger-specific, and will get the job done, but I'd recommend ignoring them and carrying on with these instructions, of course.

The only important piece you'll need is the pubid component from the code it tells you to copy-paste, after you've configured it the way you want. It looks something like this:

<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript"
    src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xx-xxxxxxxxxxxxxxxx">
</script>

Grab the xx-xxxxxxxxxxxxxxxx part, and copy it to the clipboard.

Add an HTML gadget

• Make sure you have the pubid copied (see above)
• Click the button below to add a ready-to-go sharing gadget.
• Expand the 'Content' section
• Replace the xx-xxxxxxxxxxxxxxxx part with your copied id.

The code in the HTML gadget is:

<script>
  var sharethisid = 'xx-xxxxxxxxxxxxxxxx';
  if (sharethisid.startsWith('xx-')) {
    alert('You have not put your AddThis id in'
          + ' - go back to so-how-do-i.blogspot.com for instructions!');
  }
  var shareScript = document.createElement('script');
  shareScript.setAttribute(
      'src',
      '//s7.addthis.com/js/300/addthis_widget.js#pubid='
          + sharethisid.trim());
  shareScript.setAttribute('async', 'async');
  document.body.appendChild(shareScript);

  var handler = function(e) {
    if (e.type == 'addthis.menu.share' && typeof(ga) !== 'undefined') {
      console.log('Logging share event to analytics.');
      ga('send', 'social', e.data.service, 'Share', e.data.url);
    }
  }
  // Let's set the events listener for addthis API 
  var setup = function() {
    if (typeof(addthis) !== 'undefined') {
      addthis.addEventListener('addthis.menu.share', handler);
    }
  }
  // Wait a sec before firing
  window.setTimeout(setup, 1000);
</script>

Shoutout to thyngster.com for the tip on how to hook in to the addthis share event.

There is also some custom markup, to set the correct sharing URLs and featured image, which you can see in the template area of the dialog.

<b:includable id='main'>
  <script>
    var addthis_share = {
      url: '<data:view.url.canonical.jsEscaped />',
      title: '<data:view.title.jsEscaped />',
      description: '<data:view.description.jsEscaped />'
    };
    <b:if cond='data:view.featuredImage'>
      addthis_share.media = '<data:view.featuredImage.jsEscaped />';
    </b:if>
  </script>
  <style>
    /* Hide this gadget's container. */
    #<data:widget.instanceId /> { display: none; }
  </style>
  <b:include name='super.main' />
</b:includable>

Happy Sharing!