☰

新しい Facebook のいいねボタン HTML 検証 質問する

tag-icon • tag-icon html facebook
新しい Facebook のいいねボタン HTML 検証 質問する

ページに新しい Facebook の「いいね！」ボタンを追加した後、XHTML の厳格な標準を使用して検証されなくなりました。発生したエラーは次の 2 つです。

  1. すべてのメタプロパティタグには属性がないと書かれている財産;

  2. いいねボタン行で使用されるすべての変数がリストされていますが、属性はありません。行は次のとおりです。

    <fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>

ベストアンサー1

doctype を交換しない解決策は次のとおりです。

zerkms が示唆したように、「fb」名前空間の追加は「fb:」属性にのみ適用されます。メタ タグの「property」属性は無効な XHTML のままです。

ご存知のとおり、Facebook は RDFa 準拠に基づいて構築されているため、次の doctype を使用できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

ただし、ほとんどの場合、RDFa を使用すると、単純な FB の問題の修正よりも多くの問題が発生します。

_timm が示唆したように、メタ タグを DOM に動的に書き込むことは意味がありません。これらの FB メタ タグの主な用途の 1 つは、FB ボットが「共有」または「いいね」ターゲット ページ (アクション ページ) を解析して、Facebook ウォール投稿の自動入力用にカスタム タイトル、画像、アンカー ラベルを提供することです。この事実と、Facebook が、JavaScript によって挿入された関連メタ タグを解析する機能なしに、配信された HTML 応答を読み込むために単純なページ フェッチを使用していることはほぼ確実であるという事実を考慮すると、意図した機能は単に失敗することになります。

現在、XHTML 検証と Facebook による正常な解析との間の妥協点を提供する非常に簡単な修正方法があります。Facebook のメタを HTML コメントで囲むことです。これにより、W3C パーサーがバイパスされ、Facebook はコメントを無視するため、メタ タグを認識し続けます。

<!--
<meta property="og:image" content="myimage.jpg" />
<meta property="og:title" content="my custom title for facebook" />
-->

おすすめ記事