Googleの+1ボタンをつける(W3Cエラーを回避する方法)

Googleのプラスワンボタン(+1ボタン)を付けてみました。しかし、W3C Markup Validation Service のチェックでエラーとなってしまいます。これを回避する方法を見つけましたので紹介します。

Googleのプラスワンボタンとは

Googleがプラスワンボタンのサービスを始めました。検索や SEO楽天にも良さそうなので、早速ウェブページに付けてみました。やり方は簡単です。ヘッドタグの最後に次のスクリプトを追加します。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

次にボディタグ内のプラスワンボタンを表示したい位置に次のタグを貼り付けます。

<g:plusone></g:plusone>

することはこれだけで、とても簡単なのですが、g:plusone の部分で、W3C Markup Validation Service のチェックで「element "g:plusone" undefined 」というエラーになります。

Googleのプラスワンボタンのエラーを回避する方法

そこで、このエラーを回避する方法を探していました。グーグルの参考ページを元に模索しました。

<html>
<head>
<title>+1 デモ: 明示的な表示</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>

<script type="text/javascript">
function renderPlusone() {
gapi.plusone.render("plusone-div");
}
</script>

</head>
<body>
<a href="#" onClick="renderPlusone();">+1 ボタンを表示</a>
<div id="plusone-div"></div>
</body>
</html>

これをそのまま使っても、onclick のところでエラーになります。onclick を使わずに次のようにボディタグにonload で呼び出してやればエラーにはなりません。

<body onload="renderPlusone();">

しかし、既にonload は他で使っているので、他のonload 動作がうまくいきません。

複数のJavascriptイベントを動作させる方法

複数のJavaScriptライブラリを利用している場合、正常に動作しなかったり、どちらか一方しか動作しなかったりすることがあります。これは、JavaScriptのonloadは、ブラウザがすべてを読み込んでから実行するので、最後に記述した命令しか実行しないからです。

複数のonloadを利用する場合、次のような関数を作成してonloadの際の記述を書き換える方法を見つけました。

http://blog.webcreativepark.net/2008/02/26-185844.html

function addEvent(elm,listener,fn){
	try{
		elm.addEventListener(listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}

これは、addEventListenerという機能を利用して、イベントに対して命令を追加していく関数になるようです。

IEではaddEventListenerが利用できないので、attachEventという関数で代用しているようです。

Googleのプラスワンボタンのエラーを回避する方法の結論

結局、ヘッドタグ内の最後あたりに次のスクリプトを記述しました。記述はHTML5で、非同期で読み込んでいます。

<script src="https://apis.google.com/js/plusone.js" async="async"></script>

そして、呼び出すjs ファイルの内容は次のようになりました。

// addEvent
function addEvent(elm,listener,fn){
	try{
		elm.addEventListener(listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}

// google plusone
function renderPlusone() {
gapi.plusone.render("plusone-div");
}

addEvent(window,"load",renderPlusone);

ボディタグ内のプラスワンボタンを表示するところには、次のタグを記述しました。

<div id="plusone-div"> </div>

これで、プラスワンボタンをつけても、W3C Markup Validation Service でもエラーにならずに表示させることができるようになりました。

複数のJavascriptイベントを動作させる方法のメリット

上記の複数のJavascriptイベントを動作させる方法では、onload のみを紹介しましたが、onclickでもIE7、Firefox6,7共うまく動作することを確認しました。IE8ではonclickはうまく動作しないようです。