Nouvelle validation HTML du bouton J'aime de Facebook
Après avoir ajouté le nouveau bouton Facebook Like sur ma page, il ne valide plus en utilisant la norme stricte XHTML. Les deux erreurs que je rencontre sont:
- Toutes les balises meta property indiquent qu'il n'y a pas d'attribut property;
Toutes les variables utilisées dans la ligne de bouton similaire sont répertoriées sans attribut. La ligne est la suivante:
<fb:like href="http://www.pampamanta.org" layout="button_count" show_faces="false" width="120" action="like" font="arial" colorscheme="light"></fb:like>
Voici une solution pour ne pas échanger doctype:
Comme l'a suggéré zerkms, l'ajout de l'espace de noms "fb" ne s'applique qu'aux attributs "fb:". L'attribut "propriété" de la balise META reste XHTML non valide.
Comme vous le savez, Facebook s'appuie sur la conformité RDFa, vous pouvez donc utiliser le doctype suivant:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Cependant, l'utilisation de RDFa pose plus de problèmes que la simple correction de problème FB dans la plupart des cas.
comme l'a suggéré _timm, l'écriture dynamique des balises META dans le dom n'a aucun sens. L'une des principales utilisations de ces balises meta fb est l'analyse par le FB-bot d'une page cible "partager" ou "j'aime" (page d'action) pour fournir des titres, des images et une étiquette d'ancrage personnalisés pour la population automatique de post-mur facebok. Compte tenu de ce fait et du fait que Facebook utilise très certainement une simple extraction de page pour lire la réponse HTML livrée sans aucune capacité d'analyser une méta-balise associée injectée par javascript, la fonctionnalité prévue échouera tout simplement.
Maintenant, il existe un correctif assez simple pour fournir un compromis entre une validation XHTML et une analyse réussie par Facebook: encapsulez la méta Facebook dans des commentaires HTML. Cela contourne l'analyseur w3c et Facebook reconnaît toujours les balises META, car il ignore le commentaire.
<!--
<meta property="og:image" content="myimage.jpg" />
<meta property="og:title" content="my custom title for facebook" />
-->
à partir d'aujourd'hui, vous pouvez également utiliser un balisage compatible HTML5
par exemple. au lieu de
<fb:like href="example.org">
tu peux faire
<div class="fb-like" data-href="example.org">
Étant donné que les attributs data- * sont valides en HTML5
Juste un suivi au cas où quelqu'un utiliserait la méthode des commentaires. Facebook honore actuellement les commentaires, donc l'encapsulation de balises de propriété meta dans les commentaires obligera Facebook à les ignorer. Si vous consultez vos pages avec le Linter URL Facebook, vous pouvez voir qu'elles n'utilisent pas de balises META commentées.
@Eric J'espère que vous avez finalement trouvé ce que vous cherchiez.
L'intégration de Twitter a ses difficultés si vous voulez permettre aux développeurs de valider indépendamment de XHTML Strict 1.0 ou HTML5. Facebook, d'autre part, est en bas impossible avec ses balises FBML personnalisées.
Lors de notre dernier projet, mon ami Jason et moi savions deux choses avec certitude:
- Nous allions valider XHTML Strict 1.0 en utilisant le bouton Like de Facebook
- Nous n'allions pas ajouter de dette technique en falsifiant notre DOCTYPE ou xmlns
La solution consiste à utiliser un module JavaScript asynchrone flexible. Heureusement, nous avons eu de l'aide et des conseils en cours de route: http://techoctave.com/c7/posts/40-xhtml-strict-Tweet-button-and-facebook-like-button
FBML ne sera pas validé, car ce n'est pas du XHTML valide. Le validateur W3C ne sait pas quoi en faire. Les erreurs peuvent être ignorées en toute sécurité.
Si vous devez avoir une validation, vous pouvez utiliser un <script> tag pour afficher le FBML au lieu de l'inclure directement dans le code HTML de la page.
vous pouvez incorporer des balises html dans le script via document.write .. http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/ ici comment pour ce faire avec un exemple.
RE: Welcho
J'ai trouvé que le type de script provoquait une erreur pour moi (XHTML 1.0 Transitional). Également ajouté pour ceux qui pourraient manquer cela.
Le vôtre est le meilleur et le plus facile à utiliser que j'ai vu en ligne à ce jour. Après avoir regardé à nouveau - ha! tu es le meilleur :)
Bravo et merci :)
<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>
Pour la dose qui utilise "<javascript... document.write... "document.write n'est pas une procédure DOM valide, donc dans Fire Fox et Chrome si vous l'utilisez dans un XML/XHTML Strict avec un type de contenu comme texte/xml ne fonctionne pas.
Une approche DOM valide qui fonctionne pour moi:
<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>
J'espère que ce travail pour les autres.
Welch
Toujours commenter.
pour le fb: comme
<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>
également les métadonnées dans l'en-tête
<!--
<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" />
-->
réparer la balise javascript 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>
et pour la version 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>
cela fonctionne sur mon site web http://c-p-p.net
as-tu essayé d'ajouter xmlns:fb="http://www.facebook.com/2008/fbml"?
J'ai récemment utilisé:
<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>
et cela semble bien fonctionner, même si c'est un peu malodorant.
J'ai utilisé ce code et il est valide pour le validateur W3C.
<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>
Voici une bonne solution. Si vous allez utiliser document.write, utilisez-le comme indiqué ci-dessous et cela se validera parfaitement
<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>
Voici la solution pure (astuce) pour faire valider TOUT tag ou code non reconnu!
J'utilise smarty comme moteur de modèle, mais cela peut être fait de la même manière si vous ne le faites pas!
J'ai pensé plus à une astuce qu'à une solution (car il n'y en a pas jusqu'à présent) et j'ai juste fait le validateur W3C pour passer la validation simplement en ne lui montrant pas ces méta-chaînes.
Lorsque Validator fait référence à ma page, en utilisant PHP, je ne rend pas le contenu qui n'est pas reconnu par W3C Validator. Je fais simplement cela en extrayant les informations des en-têtes qui sont envoyées par le validateur W3C, qui est user-agent et qui est W3C_Validator/version.
Créez PHP et affectez-la à 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; } }Vérifions ensuite l'agent utilisateur:
if (User_Agent_Check("W3C_Validator")) { $smarty->assign('W3C', "1"); } else { $smarty->assign('W3C', "0"); }Ensuite, dans le modèle Smarty que vous utilisez (si vous n'utilisez pas Smarty, faites simplement "écho" le contenu avec 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}
Lorsque Validator essaie de vérifier votre page, ces balises META ne sont tout simplement pas sorties sur la page! Lorsqu'un autre agent utilisateur voit votre page, ces codes sont simplement sortis comme d'habitude! Vous pouvez le faire pour Facebook Like Button ou pour tout méta-tag OG - en fait pour toute autre chose.
Il s'est avéré que c'était la bonne solution pour moi!
Ok, après avoir parcouru littéralement des centaines de ces messages, j'ai finalement trouvé un moyen rapide et facile d'obtenir une page valide avec un bouton J'aime (ou tout autre widget Facebook).
Juste quelques lignes de code, jetez un œil à http://www.liormark.com/develop/development-articles/facebook-fbml-w3c-validation-solved