Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube
JC Mouse Bolivia
Index / Desarrollo Web / Validar etiquetas facebook en standar w3c

Validar etiquetas facebook en standar w3c

Autor jc mouse viernes, agosto 10, 2012

Cuando se diseñan paginas web es recomendable hacer uso de standares como una de las buenas practicas de programación, pero eso no quiere decir que si obviamos ese paso nuestras web estén mal hechas, es solo un formalismo, nuestras web igual funcionan y eso es lo que importa, sin embargo hay personas que les gustan los standares y en la mayoría de los casos esas personas son las que nos pagan 🙂 así que debemos regirnos por esos standares, el W3C ( World Wide Web Consortium ) es quien rige las normas para establecer si una web esta bien hecha o no, o mejor dicho, si una web cumple las reglas del W3C, para ello cuenta en su pagina con una herramienta on-line para validar sitios HTML.

Cumplir sus reglas no es complicado, sin embargo la tecnología web crece día a día y grandes empresas como Google, Facebook o Twitter entre muchos otros, desarrollan sus propias etiquetas para implementar sus botones sociales en diferentes sitios web y es ahí donde surgen problemas con los standares del w3c, con páginas de tipo TRANSITIONAL no hay mucho problema, pero con web del tipo STRICT si los hay, pues bien, después de varios intentos fallidos  me puse a buscar una solución y entre los muchos resultados obtenidos que no funcionaban, me encontré con la solución en la pagina de “markmediagroup“, la cual resulto ser muy sencilla LOL 🙂 , no pretendo robar credito a nadie asi que dejo el enlace de donde saque la info markmediagroup.

Para los que no saben ingles, aunque no es necesario se entiende perfectamente, la solución para validar etiquetas de facebook es la siguiente:

1.Ingresa a la página de desarrolladores de facebook,a la sección de plugin LIKE BUTTON y sigue los pasos para obtener el código, cuando termine presiona el boton GET CODE, facebook te muestra las opciones:

  • XHTML5
  • XFBML
  • IFRAME
  • URL

Utilizaremos el código de la opción XFBML, con los primeros códigos no hay problema de validación así que los colocamos como estan:

1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.

<div id="fb-root"></div>
<script>(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/es_LA/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2. Add an XML namespace to the <html> tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer.

<html xmlns:fb="http://ogp.me/ns/fb#">

El código del paso 3 viene de la siguiente forma:

<fb:like href="http://www.jc-mouse.net/" send="false" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>

Esas etiquetas propias de facebook FB: , send, etc, son las que no reconoce el w3c, así que para validarlas se hara uso de javascript, dejando todo de la siguiente forma:

<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="http://www.jc-mouse.net/" send="false" layout="button_count" width="450" show_faces="false" font="arial"></fb:like>');
/]]>
</script>

este código es el que debemos colocar en nuestras paginas donde queramos colocar el plugin de facebook y cuando validemos con la herramienta del wc3 obtendremos la validación correcta.

This document was successfully checked as XHTML 1.0 Strict!

w3c

¿Y a todo esto para que sirve validar una página?

Bueno, la principal razón creo yo 🙂 es para dar gusto a quienes adoren tener todo en regla, analistas como los odio 😉 , y la otra razón es que al tener un código validado, digamos LIMPIO, los programas spider de los buscadores como Google, aceptan mucho mejor nuestros sitios web y los indexan en mejor posición, una buena practica SEO , aunque como dije en un principio, todo cambia y es muy difícil comprobar si una pagina validada tiene mejores resultados de indexación que otra que no lo está, al fin y al cabo es una buena practica de programación y a nadie le hace daño seguirla.

Eso es todo 🙂

Tags

Si te ha gustado podrías compartirlo o dejar un comentario. ¡Muchas gracias!
Autor: JC Mouse

Yo soy yo :) JC Mouse, Soy orgullosamente boliviano soy fundador y CEO de la web jc-Mouse.net uno de las pocas web en emprendimiento y tecnología en Bolivia.

Toda la información que encuentres en este sitio es y sera completamente gratis siempre, puedes copiar, descargar y re-publicar si así lo deseas en otros blogs o sitios web, solo te pido a cambio que dejes una referencia a esta web. Esto nos ayuda a crecer y seguir aportando. Bye

Enjoy! :)

También Te Podría Interesar

Búsqueda dinámica en JList

Búsqueda dinámica en JList

Un JList nos permite almacenar objetos en una lista y mostrarlos gráficamente en una serie vertical en el cual el usuari...

Cambiar icono de aplicación en IDE Eclipse

Cambiar icono de aplicación en IDE Eclipse

Si tenemos una aplicación android que estemos desarrollando en el IDE Eclipse y queremos cambiar el icono de la aplicaci...

Configura tu smartphone y PC para testear aplicaciones

Configura tu smartphone y PC para testear aplicaciones

Cuando desarrollamos aplicaciones para android como programadores nos interesa la velocidad al tiempo de depurar el códi...

Compartir conexión de base de datos

Compartir conexión de base de datos

Cuando utilizamos aplicaciones web con conexión a base de datos MYSQL, se suele crear una clase que gestione la interacc...

Material Design: Paleta de Colores

Material Design: Paleta de Colores

“Material Design es una guía integral para el diseño visual, de movimientos y de interacción en distintas platafor...

Listar dispositivos de impresión

Listar dispositivos de impresión

El siguiente código te muestra una lista de los dispositivos de impresión que tenemos instalado en el sistema import jav...

Comparte lo que sabes

Categorias

Últimas entradas

Blockly proyecto de Google for Education, es una biblioteca en JavaScript que agrega un editor de código visual a aplica...

j2html es una biblioteca para java que permite generar código html seguro desde código java utilizando sus propias etiqu...

En este post haremos uso de PanoramaImageView para agregar a una aplicación android, una vista panorámica de 180° y 360°...

¿Que es una infografia? “Una infografía es una representación visual informativa o diagrama de textos escritos que...

Android Bolivia

MAUS