2010-05-03 4 views
36

После добавления новой кнопки facebook, как на моей странице, она больше не проверяет использование строгого стандарта XHTML. Две ошибки я сталкиваюсь являются:Новая функция Facebook как кнопка Проверка HTML

  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>

+0

У меня есть решение. Просто оберните теги в JS и document.write. http://nerdramblings.tumblr.com/post/3213578636/html5-and-facebooks-fbml J. – user1137834

ответ

43

Вот решение не обменивать доктайп:

Как было предложено zerkms, добавив «фб» пространства имен применяется только для «Флавио Бриаторе:» атрибутов. Атрибут «свойство» метатега остается недопустимым XHTML.

Как вы знаете, Facebook основывается на соблюдении RDFa, так что вы можете использовать следующую доктайп:

<!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 является разбор FB-бота целевой страницы «share» или «i like» (страница действия) для предоставления пользовательских названий, изображений и ярлыков привязки для автобизнеса facebok wall post. Учитывая этот факт и учитывая тот факт, что 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" /> 
--> 
+0

Вы уверены, что facebook разбирает код между комментариями? – user478419

+1

Я только что протестировал решение для мета-комментариев Facebook на своем сайте, и это сработало. Facebook все еще читает метатеги, даже если они были прокомментированы. Теперь моя страница проверяется с помощью W3C. Хорошее решение. – mitchf

+3

Я только что протестировал это, и Facebook проигнорировал комментарии и вернулся к захвату данных из DOM. Для всех, кто хочет проверить, где они получают данные, здесь [FB's Linter] (https://developers.facebook.com/tools/lint). – patridge

2

FBML не будет проверять, так как это не является действительным XHTML. Валидатор W3C не знает, что с ним делать. Ошибки могут быть безопасно проигнорированы.

Если вы должны иметь проверку, вы можете использовать тег <script> для вывода FBML вместо прямого его включения в HTML-код страницы.

+4

XHTML - это ** X ** HTML, потому что это e ** X **. Валидатор w3c может получить описание 'fb:' тегов с надлежащей спецификацией 'xmlns' – zerkms

+0

Мне было трудно получить валидатор для сбора расширенных пространств имен, таких как FBML, но это было давно. – ceejayoz

1

Вы пытались добавить xmlns:fb="http://www.facebook.com/2008/fbml"?

1

вы можете вставлять теги html в скрипт через document.write. http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin/ здесь, как это сделать с примером.

+0

это не очень хорошая идея, потому что подобная кнопка будет работать, но когда facebook приходит, чтобы индексировать вашу страницу, он не будет запускать javascript 'document.write', поэтому он не увидит теги – rtpHarry

4

Просто последующие действия в случае, если кто-либо использует метод комментариев. Facebook в настоящее время соблюдает комментарии, поэтому обтекание мета-тегами свойств в комментариях заставит Facebook игнорировать их. Если вы проверяете свои страницы с помощью URL-адреса Facebook, вы можете увидеть, что они не используют метатеги с комментариями.

2

@ Эрик Надеюсь, вы в конечном итоге нашли то, что искали.

Интеграция в Twitter имеет свои трудности, если вы хотите дать возможность разработчикам проверять независимо от XHTML Strict 1.0 или HTML5. С другой стороны, Facebook не имеет права использовать свои собственные теги FBML.

На нашем последнем проекте мой друг Джейсон, и я знал, что две вещи точно:

  1. Мы подтвердим XHTML Strict 1.0 с помощью Like Button на Facebook
  2. Мы не собирались добавить технический долг по жульничество наш DOCTYPE или xmlns

Решение состоит в использовании гибкого асинхронного модуля JavaScript. К счастью, мы имели некоторую помощь и руководство по пути: http://techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button

0

Я недавно использовавшийся:

<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> 

и, кажется, работает хорошо, даже если это немного вонючий.

0

Хорошо, перейдя буквально сотни этих сообщений, я наконец нашел быстрый и простой способ получить действительную страницу с помощью кнопки Like (или любого другого виджета facebook).

Всего fewlines кода на самом деле, посмотрите на http://www.liormark.com/develop/development-articles/facebook-fbml-w3c-validation-solved

+0

Для будущей проверки код на этой странице: jsims281

1

Для дозы, которые используют "<javascript... document.write... "document.write не действует процедура DOM так в Fire Fox и Chrome, если вы используете его в XML/XHTML Strict с содержанием типа как текст/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> 

Надежда эту работу для других

Welch

1

RE: Welcho

Найдено тип скрипт вызывает ошибку для меня (XHTML 1.0 Transitional). Также добавляется для тех, кому это может не хватать.

Ваш лучший и простой в использовании я видел онлайн на сегодняшний день. Посмотрев снова - ха! вы лучшие :)

Приветствия и Thnks :)

<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> 
26

начиная с сегодняшнего дня вы можете также использовать разметку HTML5-совместимый

например вместо

<fb:like href="example.org"> 

вы можете сделать

<div class="fb-like" data-href="example.org"> 

Поскольку data- * атрибуты действительны в HTML5

0

Вот хорошие решения. Если вы собираетесь использовать документ.напишите, используйте это, как показано ниже, и оно будет корректно проверяться

<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> 
1

Всегда комментируйте это.

для фб: как

<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 тега добавить типа = "текст/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

0

Я использовал этот код и он действителен для 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> 
0

Вот чистое решение (трюк) для принятия любых тегов или не распознанных кодов!

Я использую smarty как шаблонный движок, но это можно сделать так же, если вы этого не сделаете!

Я придумал скорее трюк, чем решение (потому что его пока нет), и только что сделал W3C Validator, чтобы пройти проверку, просто НЕ показывая эти мета строки.

Когда валидатор ссылается на мою страницу, используя PHP, я не представляю контент, который не распознается W3C Validator. Я просто делаю это путем извлечения информации заголовков, которая отправляется W3C Validator, которая является пользовательским агентом и является W3C_Validator/version.

  1. Создать функцию 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; 
        } 
    } 
    
  2. Тогда давайте проверить агента пользователя:

    if (User_Agent_Check("W3C_Validator")) { 
        $smarty->assign('W3C', "1"); 
    } else { 
        $smarty->assign('W3C', "0"); 
    } 
    
  3. Затем в шаблоне Smarty вы используете (если вы не» t использовать 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} 
    

Когда валидатор пытается проверить вашу страницу, те метатеги просто не выводятся на страницу! Когда какой-либо другой пользовательский агент видит вашу страницу, эти коды выводятся как обычно! Вы можете сделать это для Facebook Like Button или для любых OG Metatags - фактически для чего-нибудь еще.

Это оказалось для меня правильным решением для zeitgeist!

+0

В чем смысл? – Ashe

+0

Точка очевидна - большинство людей хотят проверить не поддерживаемые теги. Так вот в чем смысл и мое решение. Легко и полезно. Не идеальный, хотя, но здесь нет идеального решения, я думаю! –

+0

Но почему вы хотите проверить, действительно ли страница, которую все действительно видят, не действительна? Единственная причина, по которой я буду заботиться о действительном HTML, - это если я беспокоюсь о переходе браузера в режим причуд или что-то в этом роде, и они собираются сделать это с этим. – Ashe

Смежные вопросы