22 March 2012

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 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 the old code for the sharing button was this – you may notice the custom code for 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 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.

3 comments:

  1. finally find the reason why fb like can't work
    thanks a lot~

    ReplyDelete
  2. if you ever - ever visit Greece come and find me... I will offer you tons of beer... tnx a lot

    ReplyDelete