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.

Up to now, I’ve used an old plug-in to GraffitiCMS to serve up a set of sharing buttons on this blog. Old as in the code used to have (until I took it out) a link for Furl – remember that? No, I don’t either.

photo © 2011 R. M. Calamar | more info (via: Wylio)Prompted by a blog post by Nick Hodges, I signed up to AddThis and have now added their sharing toolbar to my posts.

It wasn’t quite as simple as it made out though. I have two main type of pages where I want the sharing toolbar to appear: the index page and the individual pages for each post. The index page (http://blog.boyet.com/) contains the last 10 blog posts in their entirety, and by paging backwards through history, the previous 10, and the 10 prior to that, all the way to the beginning of time (some 3 years ago). Individual blog post pages just contain, well, the individual blog posts.

By default the AddThis html code you add to your pages assumes you want to share the URL of the page itself. That’s fine for the individual blog posts – clicking on a sharing button will grab the correct URL and page title – but it is hopeless for the index page. Clicking on a sharing button for one of the posts on the main page will share the URL for the main page, not the URL for the blog post in question. Fortunately the change is simple, you add some special attributes to the main div for the toolbar:

  <div class="addthis_toolbox addthis_default_style "
    addthis:url="$macros.FullUrl($post.Url)"
    addthis:title="$post.Title"
  >
  ...button declarations...

where $post is the GraffitiCMS identifier for details about the post object. I added this to the layout code for each blog post (this code is repeated for each post on the index page). After this change, each blog post’s sharing buttons reference the proper URL rather than the index page’s URL.

After that, it was simplicity itself to add Google’s +1 button to each post as well. The element needs an href attribute in the same manner:

<g:plusone href="$macros.FullUrl($post.Url)" size="small"></g:plusone>

Now you can properly share individual blog posts, if you so wish.

Despite the simplicity of the solution, there is still one big issue: my pages no longer validate with the XHTML validator. The special attributes are throwing the validation off. I need to investigate the JavaScript access.

UPDATE: JavaScript investigated. JavaScript written. XHTML validation passes. Another post tomorrow about how I did it.