mk-mode BLOG

このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。
PC・サーバ構築等の話題を中心に公開しております。(クローンサイト: GitHub Pages

ブログ開設日2009-01-05
サーバ連続稼働時間
Reading...
Page View 合計
Reading...
今日
Reading...
昨日
Reading...

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

[ サーバ構築, ブログ ] [ 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アカウントです。ご自分のものに訂正してください。

参考にしたサイト


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

以上。

Comments