Fixing sharing buttons for country-specific Blogger URLs

A couple of days ago I noticed at the office the my blog loaded on a different domain (.de in this case) than the normal .com. I knew, of course, the reason behind the change: it’s a recent Blogger change aimed at protecting content from country-specific laws and regulations that would require some blogs to be taken down. I don’t really have a problem with the idea, but what annoyed me instead was that the sharing buttons built in to my articles no longer showed the correct number of tweets / likes. Moreover, anyone landing on a country-specific domain and using the buttons would be sharing that particular domain instead of the main address. This also seems to affect the way Facebook previews content when a Blogger link is shared there, as one of my readers reported in a comment to a previous article. Blogger’s own native sharing buttons have been tweaked in the background to prevent the issues mentioned above, as they already default to the canonical URL.

Fortunately the problem with custom sharing buttons can be solved relatively easy, if you know your way around the variables used in Blogger templates. It’s a simple matter of replacing data:blog.url and data:post.url, which return the country-specific URL, with data:blog.canonicalUrl and data:post.canonicalUrl, respectively, which return the blogspot.com domain. If you already added custom code for these buttons to the template I am assuming you already know a bit about editing the default template (including how to back-up it before making the changes) and I’m simply going to share two examples that I have on individual articles now:

• For Twitter the old code for the sharing button was this – you may notice the custom code for Google Analytics I have explained a while back:

  <a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title + &quot; by @EXDE601E&quot;' expr:data-url='data:post.Url + &quot;?utm_source=TweetButton&amp;utm_medium=Twitter&quot;' href='http://twitter.com/share'>Tweet</a>

  I have replaced it with this (new /updated code is bold):

  <a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title + &quot; by @EXDE601E&quot;' expr:data-url='data:post.canonicalUrl + &quot;?utm_source=TweetButton&amp;utm_medium=Twitter&quot;' href='http://twitter.com/share'>Tweet</a>

• For Facebook the old code for the Like button was:

  <div class='fb-like' data-font='trebuchet ms' data-layout='button_count' data-send='false' data-show-faces='false' data-width='80'/>

  I have replaced it with this:

  <div class='fb-like' data-font='trebuchet ms' data-layout='button_count' data-send='false' data-show-faces='false' data-width='80' expr:data-href='data:post.canonicalUrl'/>

This change should also be effective with any other sharing / social buttons or scripts and it’s generally a better practice than using the post URL straight up.