Adding sharing links to the blog

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 © 2006 MyEyeSees | more info 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 (https://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.

  Loading links to posts on similar topics...