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のプラスワンボタンのエラーを回避する方法
そこで、このエラーを回避する方法を模索していました。次のグーグルのページが参考になりそうに思いました。
http://code.google.com/intl/ja/apis/+1button/#example-explicit-render
プラスワンボタンの明示的な表示のところにあるスクリプトを参考に試行錯誤しました。
<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のプラスワンボタンのエラーを回避する方法の結論
結局、ヘッドタグ内の最後に次のスクリプトを記述しました。
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</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はうまく動作しないようです。
