Новая кнопка Facebook, как проверка HTML - PullRequest
Новая
       46

Новая кнопка Facebook, как проверка HTML

36 голосов
/ 04 мая 2010

После добавления новой кнопки «Мне нравится в Facebook» на моей странице она больше не проверяется с использованием строгого стандарта XHTML. Я сталкиваюсь с двумя ошибками:

  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>

Ответы [ 15 ]

43 голосов
/ 11 июля 2010

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

Как предложено zerkms, добавление пространства имен "fb" применимо только к атрибутам "fb:". Атрибут «свойство» метатега остается недействительным 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-ботом целевой страницы «Поделиться» или «Мне нравится» (страница действий) для предоставления настраиваемых заголовков, изображений и меток привязки для автопопуляции постов в фейсбок. Учитывая этот факт и тот факт, что 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" />
-->
25 голосов
/ 08 сентября 2011

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

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

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

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

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

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

4 голосов
/ 06 октября 2010

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

2 голосов
/ 14 декабря 2010

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

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

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

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

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

2 голосов
/ 04 мая 2010

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

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

1 голос
/ 22 марта 2012

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

для 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

1 голос
/ 16 июля 2011

RE: Welcho

Обнаружил, что тип сценария вызывает у меня ошибку (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>
1 голос
/ 04 апреля 2011

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

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

Welch

1 голос
/ 26 июня 2010

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

1 голос
/ 04 мая 2010

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

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...