Twitterの公式ツイートボタンを(X)HTML validにする方法

Twitterの公式ツイートボタンを(X)HTML validにする方法

Posted at October 28,2010 3:17 AM
Tag:[HTML5, Twitter]

Twitter公式ツイートボタンのページで作成したボタン(下)を、ブログなどに表示しているサイトが増えてきました。当サイトも表示しています。公式ツイートボタンの設置方法は「WordPress/Movable Typeに公式ツイートボタンを設置する」で詳しく紹介しています。

公式ツイートボタン

ところで、このボタンを表示するコードをページに貼り付けると、XHTML1.xやHTML4.01のページがvalidにならなくなる場合があります。

本エントリーでは、問題点の簡単な解説と、設置したTwitterの公式ツイートボタンを(X)HTML validにする方法を紹介します。

1.問題点

公式ツイートボタンのページでは、公式ツイートボタンを表示するために、次のようなコードを生成します。

公式ツイートボタン

このコードを埋め込んだ、DOCTYPEがXHTML1.0のページをThe W3C Markup Validation Serviceでチェックすると、次のようなエラーが表示されます。

The W3C Markup Validation Service

Another HTML-lint gatewayでも、次のようなエラーになります。

Another HTML-lint gateway

エラーになる理由は、貼り付けたコードのa要素に含まれる「data-*」という属性が、不明な属性として扱われるためです。

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

この「data-*」という属性は、HTML5のCustom Data Attributeに該当します。つまり、HTML5ではvalidとなりますが、それ以外のDOCTYPEではエラーとなります。

2.対処方法

HTML5以外のページで公式ツイートボタンのコードを埋め込む場合、コードに含まれている「data-*」属性をすべて削除し、その属性値をa要素のhref属性のクエリーに設定し直すことで、(X)HTML validになり、変更前と同じボタンを表示することができます。変更前後のサンプルは3項をご覧ください。

「data-*」属性名とクエリーのマッピングは下表の通りです。Movable Typeのテンプレートタグを設定する場合は、escapeモディファイアを使って出力内容をURLエンコードします。

「data-*」属性名クエリークエリーの記述例
data-urlurlurl=<$mt:EntryPermalink escape="url"$>
data-viaviavia=yujiro
data-texttexttext=<$mt:EntryTitle escape="url"$>
data-countcountcount=horizontal
data-langlanglang=ja
data-relatedrelatedrelated=foo
data-counturlcounturlcounturl=<$mt:EntryPermalink escape="url"$>

クエリー(あるいは属性名)とボタンの機能の対応は次の通りです。

クエリークエリーの意味設定値/備考
urlポストに埋め込みたいURLページのURL
(省略時は表示ページのURLを適用)
viaフォローを促すTwitterアカウントアカウント名(省略可)
textツイート内テキスト省略時はページタイトルを適用
countボタンの形式なし:none
垂直方向に表示:vertical
水平方向に表示:horizontal
lang言語日本語:ja
フランス語:fr
ドイツ語:de
スペイン語:es
英語:(省略)
related関連アカウントアカウント名(省略可)
counturl短縮前の(本当の)URLカウントが正しく表示されないとき等に設定

3.対処サンプル

2項のマッピング表に従って変換したサンプルを示します。

変換前

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

変換後

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

4.参考

参考サイトは下記です。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)