Nowy przycisk Facebook like HTML Walidacja

Od dziś możesz również używać znaczników zgodnych z HTML5

Np. zamiast

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

You can do

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

Ponieważ atrybuty data - * są ważne w HTML5

Po prostu kontynuacja w przypadku, gdy ktoś używa metody komentarza. Facebook Facebook obecnie honoruje komentarze, więc owijanie tagów właściwości meta w komentarzach spowoduje, że Facebook je zignoruje. Jeśli sprawdzisz swoje strony za pomocą Lintera Url Facebook, zobaczysz, że nie używają one komentowanych metatagów.

FBML nie będzie sprawdzał poprawności, ponieważ nie jest poprawny XHTML. Walidator W3C nie wie, co z nim zrobić. Błędy można bezpiecznie zignorować.

Jeśli musisz mieć walidację, możesz użyć znacznika <script> do wypisania FBML zamiast umieszczania go bezpośrednio w HTML strony.

@Eric mam nadzieję, że w końcu znalazłeś to, czego szukałeś.

Integracja z Twitterem ma swoje problemy, jeśli chcesz upoważnić programistów do walidacji niezależnie od XHTML Strict 1.0 lub HTML5. Z drugiej strony Facebook jest niemożliwy dzięki niestandardowym tagom FBML.

W naszym ostatnim projekcie mój przyjaciel Jason i ja wiedzieliśmy dwie rzeczy na pewno:

1. zamierzaliśmy zweryfikować XHTML Strict 1.0 za pomocą przycisku Facebook ' a Like
2. nie zamierzaliśmy dodawać Dług techniczny przez fudging naszego DOCTYPE lub xmlns

Rozwiązaniem jest użycie elastycznego, asynchronicznego modułu JavaScript. Na szczęście mieliśmy trochę pomocy i wskazówek po drodze: http://techoctave.com/c7/posts/40-xhtml-strict-tweet-button-and-facebook-like-button

Próbowałeś dodać xmlns:fb="http://www.facebook.com/2008/fbml"?

Znaczniki html można osadzać w skrypcie za pomocą dokumentu.pisz.. http://www.tymsh.com/2010/06/25/sitenize-facebook-like-begen-butonu-ekleyin / Tutaj Jak to zrobić na przykładzie.

Dla osób stosujących "<javascript... document.write..." document.write nie jest poprawną procedurą DOM, więc w Fire Foxie i Chrome jeśli używasz jej w XML / XHTML Strict z content-type as text / xml nie działa.

A valid DOM aproach that works for me:

<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

Okazało się, że typ skryptu powodował dla mnie błąd (XHTML 1.0 Transitional). Dodano również dla tych, którym może to brakować.

Twój jest najlepszy i najłatwiejszy w użyciu, jaki widziałem online do tej pory. Po obejrzeniu go ponownie-ha! jesteś the best:)

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

Zawsze komentuj.

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

Również Meta Dane w nagłówku

<!--
<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" />
-->

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

I dla iframe wersja

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

To działa na mojej stronie http://c-p-p.net

Ostatnio używałem:

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

Ok, po przejrzeniu dosłownie setek tych postów, w końcu znalazłem szybki i łatwy sposób, aby uzyskać poprawną stronę z przyciskiem Lubię to (lub innym widżetem facebook) na nim.

Tylko kilka linii kodu naprawdę, spójrz na http://www.liormark.com/develop/development-articles/facebook-fbml-w3c-validation-solved

Oto dobre rozwiązanie. Jeśli zamierzasz użyć document.napisz użyj go, jak pokazano poniżej, a potwierdzi to doskonale

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

Użyłem tego kodu i jest on ważny dla walidatora 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> 

Oto czyste rozwiązanie (trick) do dokonywania żadnych tagów lub nie rozpoznanych kodów zwalidowanych!

Używam smarty jako silnika szablonów, ale można to zrobić w ten sam sposób, jeśli nie!

Wymyśliłem bardziej sztuczkę niż rozwiązanie (ponieważ do tej pory nikogo nie ma) i po prostu zrobiłem walidator W3C, aby przejść walidację, po prostu nie pokazując do niego tych meta łańcuchów.

Gdy walidator odwołujący się do mojej strony, używając PHP, nie renderuję zawartości, która nie jest rozpoznawana przez W3C Walidator. Po prostu robię to, wyodrębniając informacje nagłówków, które są wysyłane przez walidator W3C, który jest user-agent i który jest W3C_Validator / version.

1. Utwórz funkcję PHP i przypisz ją do 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. Następnie sprawdźmy user agent:

   if (User_Agent_Check("W3C_Validator")) {
      $smarty->assign('W3C', "1");
    } else {
      $smarty->assign('W3C', "0");
   }
   

3. Następnie w szablonie Smarty używasz (jeśli nie używasz Smarty tylko 'echo' zawartości w 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}
   

Gdy walidator próbuje sprawdzić Twoją stronę, meta tagi są tylko nie wyjście na stronę! Gdy jakikolwiek inny agent użytkownika widzi Twoją stronę, te kody są po prostu wypisywane jak zwykle! Możesz to zrobić dla przycisku Facebook Like lub dla dowolnych metatagów OG-właściwie dla czegokolwiek innego.

To akurat dla mnie dobre rozwiązanie!