Google+ の +1 ボタンのタグが HTML バリデータでおこられる場合はこうするといいみたい

ウェブサイトに Google プラスの +1 ボタンをつけることができますね。
このブログにもつけてます。

押してもいいですよ。

最近 Google Plus おもしろいなと思い始めてて
このボタンも置いておきたいんだけど
でもひとつ、ちょっとだけ困ったことがあります。

上のボタンのソースコードはこうなっていて

<g:plusone size="tall"></g:plusone>

これをそのまま置くと HTML5 のバリデータなんかでおこられます。
まあ <g> も、ましてや <g:plusone> も
定義されてないし宣言されてない。

もちろんこのままでも動くし
バリデータで100点とることにはこだわってないんだけど
IDE にもおこられ続けるので何とかしようと思って探してみたら
公式に解決方法が提示されてました。

上記のコードはだいぶ前に発行したものなんですけど、
いま Google から提供されてるものはもう
今回対応したのと同じものになってるんですね。

@msng 今日新サイト用にボタン突っ込んでたんだけど、スニペットはdivタグになってました。

— takenori matsuura (@tmatsuur) 2014, 11月 18

ご指摘ありがとうございます！

こちらで確認できました。

確かにそうなってる。ようするにうちのコードが古いだけでした。

まあ古いコードをそのまま使ってる人も多いと思うので
その場合は更新するといいかもね、ということで続けます。

HTML5 対応の +1 タグを使用するには、クラス属性を g-plusone に設定し、すべてのボタン属性の接頭辞に data- を指定する方法もあります。

要するに、こう書いてたものを

<g:plusone size="tall"></g:plusone>

こうするということ。


<div class="g-plusone" data-size="tall"></div>

ルールとしては

ということですね。

もちろん上記の size だけじゃなくて他の属性も同じように使えます。
よく使うのは href ですかね。これも data-href にするだけ。

上のボタンをこのやり方で実際に置き換えてみたのがこれ。

ちゃんと表示される。されてますよね。

押してもいいんですよ。