Новая функция Facebook как кнопка HTML-проверка

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

Все теги мета-свойств говорят, что свойства атрибута отсутствуют;
Все переменные, используемые в подобной кнопке, перечислены, что для этого нет атрибутов. Строка выглядит следующим образом:

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

Ответ 1

Вот решение для необмена типа документа:

Как было предложено 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 является разбор 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" />
-->

Ответ 2

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

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

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

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

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

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

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

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

Для доз, которые используют "<javascript... document.write... "document.write не является допустимой процедурой DOM, поэтому в Fire Fox и Chrome, если вы используете ее в XML/XHTML Strict с типом контента, поскольку text/xml не работают.

Действительный DOM aproach, который работает для меня:

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

Надеюсь, что эта работа для других.

Велч

Ответ 9

RE: Welcho

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

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

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

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

Ответ 10

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

для fb: например

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

Ответ 11

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

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

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

Ответ 12

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

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

Ответ 13

Вот хорошие решения. Если вы собираетесь использовать 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>

Ответ 14

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

Ответ 15

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

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

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

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

Создайте функцию 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 Button или для любых метаданных OG - фактически для чего-либо еще.

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