Adding sharing links to the blog–JavaScript edition

The story so far: in essence I’ve added AddThis and Google +1 support to this blog using their “simple” markup. Unfortunately, the simple way breaks XHTML validation using the W3C validator because of the non-standard attributes (addthis:url, addthis:title) and elements (g:plusone). As I said previously, time to break out the JavaScript.

Let’s do this in reverse order, starting with the +1 button. The reason for doing it this way round is that Google’s documentation was easier to follow, and I wanted to make sure that the trick I’d decided on was going to work before starting on the AddThis code.

Since the problem with the +1 code is the non-standard element, I decided to use a named span instead and then modify it with jQuery. I needed to pass in (somehow) the url of the post to that span. Here’s the markup for GraffitiCMS’ template I used, added at the end of the post view:

<span class="googleplusone">
  <a href="$macros.FullUrl($post.Url)"></a>
</span>

So, a named span (named via class rather than id, since there will be 10 of them on the index page, remember) and that named span contains an anchor tag with the post’s URL. The post’s URL must be a fully qualified URL, not a relative one, hence the call to $macros.FullUrl. The plan I had was to find each span, extract the URL from the anchor, delete the anchor element (I don’t need it), and then call gapi.plusone.render on the span element.

var wireUpPlusOne = function () {
  $(".googleplusone").each(function () {
    var $this = $(this),
          url = $this.children("a").attr("href");
    $this.empty();
    gapi.plusone.render(this, {
      size: "small",
      count: "true",
      href: url
    });
  });
};

With jQuery, it’s pretty much a piece of cake. I find all elements with the relevant class name and call each on the returned collection to process them individually. For each of them, I grab the DOM element as a jQuery object, call children on it (in particular, I find those children that are anchor elements), and grab the href attribute value of the first (and only) one. After that I can empty the span element (bye-bye anchor element), and then call the Google API to render the button. Simple, eh? And, after I added it to the document ready function I have, it worked just fine as well.

Now for the AddThis toolbox. Here I will admit to being completely bamboozled by the documentation. The problem was, I think, is that there was not a complete example like with the Google documentation, but instead it relied on code snippets. In particular, I was confused with what happens explicitly versus implicitly. You see, you can just define the AddThis toolbox as I had before, and some JavaScript gets run automatically to set up the toolbar. Or, you can define the AddThis toolbox and explicitly call addthis.toolbox() on it. What happens to the implicit call then, I’ve no idea. Or, you can dynamically create the div with the anchor links inside it, and then explicitly call addthis.toolbox() on that newly created bit of DOM.

I decided to not even bother trying to work it all out. I decided to add a span as with the +1 markup, but this time with the post’s title for the anchor’s text.

<div class="addthis_toolbox addthis_default_style">
  <span class="addthisurlcontainer">
    <a href="$macros.FullUrl($post.Url)">
      $post.Title
    </a>
  </span> 
  <a class="addthis_button_preferred_1"></a>
  <a class="addthis_button_preferred_2"></a>
  ...etc...

The plan of attack here was to find the divs, get the named span, retrieve the URL and title, remove the span, and then add the qualified attributes that AddThis needs. If I did all this before the implicit AddThis code executes I should be fine.

var wireUpAddThis = function () {
  $(".addthis_toolbox").each(function () {
    var $this = $(this),
        $urlContainer = $this.children(".addthisurlcontainer"),
        $anchor = $urlContainer.children("a"),
        title = $anchor.html(),
        url = $anchor.attr("href");
    $urlContainer.remove();
    $this.attr("addthis:url", url);
    $this.attr("addthis:title", title);
  });
};

My utility JavaScript file is loaded well before the AddThis code, and it adds the attributes just fine in the document ready function well before the implicit AddThis code gets a chance to run.

  Loading links to posts on similar topics...