Twitter - ツイートボタンでW3Cエラー！

当方のWordPressのブログ記事にTweetボタンを設置しようと思い、手っ取り早くプラグインで導入していました。

しかし、Twitterの公式サイトにTweetボタン用HTMLソース作成サービスがあることを知り、早速こちらを試してみました。（公式に公開されているもを使わない理由もないので）

簡単な手順でHTMLソースが作成されます。このソースを好みの場所に貼り付ければ完了です。

しかし、W3C（XHTML1.0）のチェック（XHTML1.0）でValid（正当）にならない。

1
2
3

there is no attribute "data-count"
there is no attribute "data-via"
there is no attribute "data-lang"

のようなエラーとなります。

どうやら、「data-*」という属性はHTML5の Custom Data Attribute（リンク切れ）というもので、HTML5ならValidになるが、それ以外ではValidにならないようです。

以下にW3C（XHTML1.0）でValidにするための対応方法を記録しておきます。

対応方法

標準のHTMLソース作成

Twitterの公式サイトのTweetボタン作成ページにて、HTMLソースを作成する。

HTMLソース修正

「data-*」という属性をクエリストリングに変換する。 ●修正前

1
2
3
4
5
6

<a href="http://twitter.com/share"
    class="twitter-share-button"
    data-count="none"
    data-via="ko_masaru"
    data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

●修正後

1
2
3

<a href="http://twitter.com/share?count=none&via=ko_masaru&lang=ja"
    class="twitter-share-button">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

（注）「ko_masaru」は私のTwitterアカウントです。ご自分のものに訂正してください。

参考にしたサイト

• Tweet Button | dev.twitter.com
• Twitterの公式ツイートボタンを(X)HTML validにする方法: 小粋空間

これで、W3Cチェック（XHTML1.0）がValid（正当）となりました。 ※当ページの右サイドバーのW3C（XHTML1.0）バナーをクリックして確認できます。

以上。