TopTwitter > 2010年10月
2010年10月28日

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

October 28,2010 3:17 AM
Tag:[, ]
Permalink

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.参考

参考サイトは下記です。

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3