ボタンのHTML検証のような新しいFacebook
新しいFacebookのようなボタンをページに追加した後、XHTMLの厳格な標準を使用して検証されなくなりました。私が遭遇した2つのエラーは次のとおりです。
- すべてのメタプロパティタグは、属性がないことを示していますプロパティ;
「いいね」ボタンの行で使用されるすべての変数がリストされ、その属性はありません。行は次のとおりです。
<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>
これはDoctypeを交換しないための解決策です：
Zerkmsが示唆したように、「fb」名前空間の追加は「fb：」属性にのみ適用されます。メタタグの「プロパティ」属性は無効な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つは、自動共有後のfacebokウォールのカスタムタイトル、画像、アンカーラベルを提供するための「共有」または「iのような」ターゲットページ（アクションページ）のFB-bot解析です。その事実と、facebookが単純なページフェッチを使用して配信されたhtml応答を読み取り、javascriptによって関連するメタタグインジェクションを解析する機能がないことを考えると、意図した機能は単純に失敗します。
現在、XHTML検証とfacebookによる解析の成功との間の妥協点を提供するための非常に簡単な修正があります。facebookメタをHTMLコメントでラップします。 w3cパーサーをバイパスし、facebookはまだメタタグを認識しているため、コメントは無視されます。
<!--
<meta property="og:image" content="myimage.jpg" />
<meta property="og:title" content="my custom title for facebook" />
-->
今日から、HTML5準拠のマークアップも使用できます
例えばの代わりに
<fb:like href="example.org">
できるよ
<div class="fb-like" data-href="example.org">
Data- *属性はHTML5で有効であるため
コメントメソッドを使用する場合のフォローアップです。 Facebookは現在コメントを尊重しているため、コメントでメタプロパティタグをラップすると、Facebookはそれらを無視します。 Facebook URL Linterでページをチェックすると、コメントアウトされたメタタグを使用していないことがわかります。
@Ericあなたが最終的にあなたが探していたものを見つけられることを望みます。
開発者がXHTML Strict 1.0またはHTML5に関係なく検証できるようにする場合、Twitterの統合には困難が伴います。一方、FacebookはそのカスタムFBMLタグではまったく不可能です。
私たちの最後のプロジェクトで、友人のジェイソンと私は確かに2つのことを知っていました。
- FacebookのLikeボタンを使用してXHTML Strict 1.0を検証するつもりでした
- DOCTYPEまたはxmlnsをごまかして技術的負債を追加するつもりはありませんでした
解決策は、柔軟な非同期JavaScriptモジュールを使用することです。ありがたいことに、途中でいくつかのヘルプとガイダンスがありました： http://techoctave.com/c7/posts/40-xhtml-strict-Tweet-button-and-facebook-like-button
FBMLは有効なXHTMLではないため、検証しません。 W3Cバリデーターは、それをどうするかを知りません。エラーは無視しても問題ありません。
検証が必要な場合は、<script>タグは、ページのHTMLに直接含めるのではなく、FBMLを出力します。
document.write経由でhtmlタグをスクリプトに埋め込むことができます。 http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/ here how例でこれを行うには。
RE：ウェルチョ
スクリプトタイプがエラーを引き起こしていることがわかりました（XHTML 1.0 Transitional）。また、それを見逃しているかもしれない人のために追加されました。
あなたのは、私がこれまでにオンラインで見た中で最高で最も使いやすいです。もう一度見た後-ハ！あなたは最高です ：）
乾杯と：
<div id="fb-root"></div>
<div id="FbCont">
<script type="text/javascript"
src="http://connect.facebook.net/en_US/all.js#appId=XYOURIDXyourapID=1">
</script>
<script type="text/javascript">
<!--//--><![CDATA[//>
<!--
var fb = document.createElement('fb:like');
fb.setAttribute("href","http://www.wakawakblahblah.com");
// fb.setAttribute("layout","button_count");
fb.setAttribute("send","true");
fb.setAttribute("action","recommended");
fb.setAttribute("show_faces","false");
fb.setAttribute("width","280");
fb.setAttribute("font","trebuchet ms");
document.getElementById("FbCont").appendChild(fb);
//--><!]]>
</script>
</div>
"<javascript... document.write... "document.writeを使用している人は、有効なDOMプロシージャではないので、Fire FoxではChrome content-typeがXML/XHTML Strictで使用する場合text/xmlは機能しません。
私のために働く有効なDOMアプローチ：
<div id="FbCont">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
var fb = document.createElement('fb:like');
fb.setAttribute("href","http://www.cirugia-obesidad.mx");
fb.setAttribute("layout","button_count");
fb.setAttribute("show_faces","true");
fb.setAttribute("width","100");
fb.setAttribute("font","arial");
document.getElementById("FbCont").appendChild(fb);
//--><!]]>
</script>
</div>
他の人のためにこの作品を願っています。
ウェルチ
常にコメントアウトしてください。
fb：like
<script language="javascript" type="text/javascript">
//<![CDATA[
document.write('<fb:like href="http://www.c-p-p.net" layout="button_count" show_faces="false" width="90" action="like" font="arial" colorscheme="light"></fb:like>');
//]]>
</script>
ヘッダーのメタデータ
<!--
<meta property="og:title" content=" some title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://c-p-p.net/" />
<meta property="og:image" content="site image" />
<meta property="og:site_name" content="site name" />
<meta property="og:description" content="description text" />
<meta property="fb:admins" content="some number" />
-->
javascript tag add type = "text/javascript"を修復します
<script type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_EN/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
およびiframeバージョン
<script language="javascript" type="text/javascript">
//<![CDATA[
document.write('<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%..... allowTransparency="true"></iframe>');
//]]>
</script>
それは私のウェブサイトで動作します http://c-p-p.net
xmlns:fb="http://www.facebook.com/2008/fbml"を追加しようとしましたか？
私は最近使用しました：
<script type="text/javascript">
document.write('<fb:like href="http://www.mywebsite.co.uk" layout="button_count" show_faces="true" width="100"></fb:like>');
</script>
少し臭いがあったとしても、うまくいくようです。
このコードを使用しましたが、W3C Validatorで有効です。
<script type="text/javascript">
<!--//--><![CDATA[//><!--
document.write('<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>');
//--><!]]>
</script>
これが良い解決策です。 document.writeを使用する場合は、以下に示すように使用すると完全に検証されます
<script type="text/javascript">
//<![CDATA[
(function() {
document.write('<a href="https://Twitter.com/share" data-count="vertical" data-via="siteripe">Tweet</a>');
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://platform.Twitter.com/widgets.js';
s1.parentNode.insertBefore(s, s1);
})();
//]]>
</script>
これは、任意のタグまたは認識されないコードを検証するための純粋なソリューション（トリック）です！
テンプレートエンジンとしてsmartyを使用していますが、使用していなくても同じように実行できます。
解決策というよりもトリックを考えました（これまで誰もいないため）。メタ文字列を表示しないだけでW3C Validatorに検証を渡すようにしました。
バリデーターがPHPを使用してページを参照するとき、W3Cバリデーターによって認識されないコンテンツをレンダリングしません。これは、ユーザーエージェントでありW3C_Validator/versionであるW3C Validatorによって送信されるヘッダーの情報を抽出することによってこれを行うだけです。
PHP関数を作成し、Smartyに割り当てます。
function User_Agent_Check($user_agent) { $user_agent_check = strpos($_SERVER['HTTP_USER_AGENT'], $user_agent); if ($user_agent_check === false) { return false; } else { return true; } }次に、ユーザーエージェントを確認しましょう。
if (User_Agent_Check("W3C_Validator")) { $smarty->assign('W3C', "1"); } else { $smarty->assign('W3C', "0"); }次に、Smartyテンプレートで使用します（Smartyを使用しない場合は、PHPでコンテンツを「エコー」するだけです）：
{if $W3C == 0} <meta property="og:url" content=""> <meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:type" content="video"> <meta property="og:image" content=""> <meta property="og:video" content=""> <meta property="og:video:type" content="application/x-shockwave-flash"> <meta property="og:video:width" content="1920"> <meta property="og:video:height" content="1080"> <meta property="og:site_name" content=""> <meta property="fb:app_id" content=""> <meta name="Twitter:card" content=""> <meta name="Twitter:site" content=""> <meta name="Twitter:player" content=""> <meta property="Twitter:player:width" content="1920"> <meta property="Twitter:player:height" content="1080"> {/if}
Validatorがページをチェックしようとすると、これらのメタタグはページに出力されません。他のユーザーエージェントがページを表示している場合、これらのコードは通常どおり出力されます！ Facebook LikeボタンまたはOGメタタグに対してこれを行うことができます-実際には他のことに対して。
私にとっては、まさにツァイトガイストの正しい解決策でした！
OK、文字通り何百ものこれらの投稿を調べた後、いいねボタン（または他のFacebookウィジェット）を含む有効なページをすばやく簡単に取得する方法を見つけました。
ほんの数行のコードを実際に見てください http://www.liormark.com/develop/development-articles/facebook-fbml-w3c-validation-solved