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!

Comments

  1. Hi there - I've tried add this, app sumo, and share this, to implement sharing buttons in blogger. I've found that 'ShareThis' is the easiest to install and uses the least amount of system resources. You might want to check them out. https://www.sharethis.com/

    Cheers!

    Roy
    jiveinthe415.com

    ReplyDelete
    Replies
    1. I actually originally wrote this with ShareThis! However, they have an issue with not allowing for sharing the canonicalized url, so your shares are sharded across all the local blogspot urls (.com, .com.au, etc), which is a pain.

      Delete
  2. Thank you so much for this! I follwed all yoyr instructions but the share buttons only appear in the side bar and the homeoage and not on the blog posts . Pkease help. Thank you so much!

    ReplyDelete
    Replies
    1. Unfortunately that's how they're designed - to share the 'current url', not individual posts. They can be combined with the sharing bylines, though, if you really want to be able to share individual posts from the feed too.

      Delete

Post a Comment

Popular posts from this blog

Make my background image responsive

Filter out certain labels from my Blog Homepage

Change the landing page of my blog