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

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

押してもいいですよ。

ひとつ困ったこと

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

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

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

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

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

追記

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

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

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

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

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

解決方法

+1 ボタン – Google+ Platform — Google Developers

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

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

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

こうするということ。

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

ルールとしては

  • g ではなく div を使う
  • g-plusone というクラスをつける
  • その他の属性の頭に data- をつける

ということですね。

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

やってみた

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

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

押してもいいんですよ。

  • このエントリーをはてなブックマークに追加