Facebook XHTML valid gomb

Most, hogy végre elkészültünk új honlapunkkal, gondoltuk mi is felteszünk egy Facebook like gombot. Ez elsőre nem is tűnik olyan nehéznek, csak felmegyünk a Facebook Developers oldalára, ahol csak egy egyszerű kis űrlap kitöltése után már adja is a kódot, amit már csak be kell illeszteni a kívánt helyre.

Facebook kétféle kódot kínál fel: iframe és XFBML

Ez eddig mind szép s jó, a buktató csak akkor jön mikor kedves honlapkészítő szeretné, hogy oldala megfeleljen a XHTML előírásainak és szigorú követeléseinek.

iframe

Az iframe-t egészen könnyen XHTML valid-á tehetjük, csak a alloweTransparency="true" tulajdonságot kell belőle törölni. Mi nem találtunk változást amikor ezt kivettük belőle, de azt megjegyzem, hogy mi csak egy egyszerű 'Like' gombot próbáltunk egy egyszerű számlálóval.

XFBML

Ez volt a mi választásunk és nehézségek okozója. Az XFBML kóddal nem csak az egyszerű 'Like' gombot kapjuk. Ezzel már jönnek az extrák, úgy mint a kedvelés kommentálása és a megosztás gomb is. Így azért ez az opció mégis csak csábítóbb.

Az XFBML kód a következőképpen alakul:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=225961594086752&amp;xfbml=1"></script>
<fb:like href="http://google.com/" send="true" layout="button_count"  width="450" show_faces="true" colorscheme="dark"  font=""></fb:like>

No is igen, itt jön a gond. XHTML-ben nincs olyan tag, hogy "<fb…..></fb>"…
Egy ilyen kóddal oldalunk nem lesz szabványos. Ehelyett a következő kódot kell alkalmaznunk:

<div id="fb-root"></div>
<div id="fb-button"></div>
<script type="text/javascript">
 //<![CDATA[
  //yess facebook valid xhml like button
  var newcontent = document.createElement('fb:like');
  newcontent.setAttribute("href", "google.hu");
  newcontent.setAttribute("send", "true");
  newcontent.setAttribute("layout","button_count");
  newcontent.setAttribute("width","165");
  newcontent.setAttribute("show_faces","false");
  newcontent.setAttribute("action","like");
  newcontent.setAttribute("colorscheme","dark");
  newcontent.setAttribute("font","");
  var scr = document.getElementById('fb-button');
  scr.parentNode.appendChild(newcontent, scr);
 //]]>
</script>
<script type="text/javascript"  src="http://connect.facebook.net/en_US/all.js#appId=103223549767924&amp;xfbml=1"></script>

- Ez aztán gyönyörű, nem de?
- NEM! De ez már XHTML szabványnak megfelelő kód és a Facebook tetszik gombja is jól fog működni vele.

Magyarázat a megoldáshoz

Egy kis beágyazott JavaScript-tel oldottuk meg a kérdéses problémát. A JavaScript teszi be a Facebook-os XFBML elemet, így az XHTML szabványt ellenőrző program már nem fogja értelmezni a kódot, csak átugorja.

Persze azért a <script> elemet is meg kell feleltetni az ellenőrzőnek. Kell legyen type tulajdonsága és mivel nem fájlból olvassuk be a scriptet, így a

/* <![CDATA[ */
 <script type="text/javascript">
 </script>
/* ]]> */

sorok sem maradhatnak el.

Ha ez a cikk a segítségére volt akkor kérjük bátran klikkeljen a Facebook like gombra az oldal tetején. :)

Köszönöm figyemét:
Szabolcs