2011年8月28日 17:39

XHTML5でMIME Typeをapplication/xml+xhtmlで出力したらGoogle+1ボタンが表示されなくなった

スポンサードリンク

HTML5ではなくて、XHTML5をちょっとやってみているのですけれども、本物のXHTMLは、レスポンスヘッダ内でContent-Type: application/xml もしくは Content-Type: application/xml+xhtml とMIME Typeを出さないといけないということで、.htaccessでこんな風にしてみました。

AddType "application/xhtml+xml" .html
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} "MSIE 5" [OR]
RewriteCond %{HTTP_USER_AGENT} "MSIE 6" [OR]
RewriteCond %{HTTP_USER_AGENT} "MSIE 7" [OR]
RewriteCond %{HTTP_USER_AGENT} "MSIE 8"
RewriteCond %{REQUEST_URI} \.html$
RewriteRule .* - [T=text/html]

（参考：.htaccessを使ってapplication/xhtml+xmlとtext/htmlに振り分ける。　[www.garunimo.com]
参照先は、.xhtmlをUAによってContent-Type差し替えるやつで、今回のは、.htmlで同様のことをするものです。404エラーすらXHTMLで書く必要があるので、お勧めしません）

これで、拡張子htmlのコンテンツに関して、IE5～8の時は、text/html、それ以外の時は、application/xml+xhtml を出すことになります。

んで、これにしたときは問題があって、Google +1ボタンや、TwitterのTweetボタンなど、JavaScriptからiframeを生成して表示するタイプのソーシャルボタンが動作しなくなります。

たとえば、Google +1のHTML5 ValidなHTMLはこんな感じ。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:g="http://base.google.com/ns/1.0" xml:lang="ja" lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Google+1 テスト</title>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <g:plusone annotation="inline"></g:plusone>
  </body>
</html>

これだと、IEにtext/htmlとして読み込ませた場合でも表示されないので、こっちのコードが普段使い。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Google+1 テスト</title>
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    </script>
  </head>
  <body>
    <div class="g-plusone" data-size="standard" data-count="true">
    </div>
  </body>
</html>

これらが、Webkit系だと表示されなく、Operaだと表示されます。

正直言って、そこまでしてXHTML5をXMLとして評価するモードは必要ないかもとか思います。なので、普通に text/html で出せばいいんじゃね？ていうことに……

XHTMLは、XML操作でいじれるので個人的には作業しやすいのですが、XML操作しない人にとっては使わないよね……

2011.08.28 17:39 投稿　大野義貴 [XHTML/XHTML5] | 固定リンク |