Como validar los botones de compartir de Twitter, Linkedin y Google + en W3C

Si usáis los botones de compartir de las pricipales redes sociales, como Twitter, Facebook, Linkedin o Google + en vuestra página web, seguramente os hayais encontrado con este inconveniente, el cual seguramente os ha hecho llegar hasta aquí.

Los errores de validación suelen provocar problemas en el renderizado de una página, fallos en la indexación, etc. Y siendo así, resulta sorprendente que en todas las Redes Sociales: Facebook, Twitter, Linkedin y sobre todo en Google no lo tengan en cuenta a la hora de desarrollar sus “apps”.

La mayoría de las API de compartir de esas Redes Sociales están escritas pensando en HTML5 y por tanto aún no validan en la herramienta de validación de código HTML del W3C (World Wide Consortium).

Dicha herramienta se encuentra disponible en esta dirección: http://validator.w3.org/

Para Twitter el formato más habitual del botón es este:

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="AUTOR" data-lang="es">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Yo te propongo esta otra opción que soluciona el asunto de la validación:

<a href="http://twitter.com/share?url=URL&text=TEXTO&via=AUTOR&related=BLOG">Twittear</a>

Deben reemplazar URL y TEXTO, por la dirección a compartir y el texto por defecto para el tweet, respectivamente.
Para que se muestren correctamente y no muestren errores, es necesario codificarlas, algo que podeis hacer aquí con este conversor.
Por otra parte, BLOG y AUTOR son las cuentas en Twitter a recomendar tras la publicación, sin la @habitual. En caso de no contar con una específica para el blog, puedes poner la del autor del post.

De esta manera, el siguiente código:

<a href="http://twitter.com/share?url=URL&text=Leyendo%20Como%20validar%20botones%20de%20compartir&via=AUTOR&related=BLOG">Twittear</a>

Genera un vínculo como este:

Twittear

Si te resulta poco atractivo, puedes reemplazar Twittear por otros términos o una imagen. Ese caso supone renunciar a mostrar el contador de publicaciones.

Quienes usamos WordPress podemos usar el siguiente código para incluirlo bien en los archivos single.php o page.php, donde solamente habrá que reemplazar el nombre del perfil de Twitter del Autor y el nombre de la web referenciada:

<a href="http://twitter.com/share?url=<?php echo urlencode(the_permalink()); ?>&text=<?php echo urlencode(the_title()); ?>&via=AUTOR&related=BLOG">Twittear</a>

Lo mismo pueden aplicar los que poseen una bitácora en Blogger, que deberán buscar la clase post-footer en la plantilla y copiar allí lo siguiente:

<a expr:href='"http://twitter.com/share?text=" + data:post.title + "&url=" + data:post.url + "&via=AUTOR&related=BLOG"'>Twittear</a>

En el caso de la red profesional Linkedin el código que proporcionan desde su API para compartir es este:

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-url="URL" data-counter="right"></script>

Podeis conseguir el vuestro en esta dirección: https://developer.linkedin.com/plugins/share-button

Si implantas ese botón funcionará perfectamente, el problema es que a la hora de validar la web con la herramienta del W3C nos mostrará dos errores: there is no attribute “dara-url” y there is no attribute “data-counter”.

Esto es debido a que los atributos data-url y data-counter no son reconocidos todavía como atributos válidos bajo la vigente especificación HTML 4.01 o XHTML.
En HTML5 si que están reconocidos, pero la herramienta de validación aún no los tiene en cuenta, por lo que si tu página no está directamente escrita para tal versión del código HTML la herramienta de validación  mostrará los citados errores.

Y te preguntarás, ¿Como solucionar este problema de validación? Pues sencillo, debes cambiar el código del script que proporciona Linkedin por su versión alternativa, pasando las variables a través de la url.

Este sería un ejemplo del código alternativo para vuestra web:

<a href="http://www.linkedin.com/shareArticle?url=URL&amp;counter=right" title="Compartir en Linkedin" target="_blank" rel="external nofollow">
<img src="URL/images/linkedin-share.gif" alt="Botón de compartir en Linkedin" />
</a>

Fijate en donde pone URL  y cambialo por la dirección de tu web y acuerdate de subir a tu directorio de imagenes la del botón de Linkedin.
Para conseguir esa imagen simplemente pincha en este enlace y guardala en tu disco duro como linkedin-share.gif para subirla al directorio correspondiente.
Si tu objetivo es usar el botón de compartir en Linkedin en un gestor de contenidos como WordPress entonces debes sustituir la url por su correspondiente llamada a la URL en php, resultando entonces:

<a href="http://www.linkedin.com/shareArticle?url=<?php the_permalink() ?>&amp;counter=right" title="Compartir en Linkedin" target="_blank" rel="external nofollow">
<img src="<?php echo get_template_directory_uri() ?>/images/linkedin-share.gif" alt="Botón de compartir en Linkedin" /></a>

Ahora tu web validará según los estandares del W3C tal y como podeis comprobar vosotros mismos si haceis todo lo aquí indicado.

Tampoco se libra Google de facilitarnos un botón +1 que cumpla los requisitos del validador del W3C.

El código del botón que Google nos facilita es el siguiente:

<!-- Coloca esta petición de presentación donde creas oportuno, te recomendamos al final del head o a final del body. -->
<script type="text/javascript">
window.___gcfg = {lang: 'es'};

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();

</script>

<!– Coloca esta etiqueta donde quieras que se muestre el botón +1. –>
<div class=”g-plusone” data-size=”medium” data-annotation=”inline”></div>

Si lo instalas y lo revisas con la herramienta de validación del W3C verás que falla. Asi pues después de probar varias cosas, finalmente me decidí a adaptarlo mediante javascript.
Si bien esto no es estrictamente válido, por lo menos el validador nos dará el mensaje correcto al interpretarlo.
Hay algunas variaciones que están descritas en su web oficial, pero básicamente el código podría quedar en algo así:

<!-- Este codigo va al final del <head> de tu web. -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">{lang: 'es'}</script>

<!– Pon este codigo donde quieras mostrar el boton. –>
<script type=”text/javascript”> document.write(‘<g:plusone size=”medium” href=”URL“></g:plusone>’);  </script>

Otra alternativa con menos complicaciones e igualmente válida sería usar simplemente esto en donde quieras mostrar el botón:

<div class="g-plusone"></div>

Lo malo de esta 2ª opción es que te insertará el botón en un tamaño que seguramente rompa con la estética de tu web. Recuerda que para que el botón se muestre correctamente y funcione debes tener el mencionado javascript insertado entre las etiquetas <head>…</head> de tu web, preferentemente al final por motivos de optimización de tiempos de carga y demás.

Como truco final dedicado para los que usan WordPress como su gestor de contenidos puedes incluir el siguiente código en tu archivo functions.php para que aparezca bajo todas las publicaciones, así te evitas el uso de las famosas barras y plugins de compartir que tanto pueden llegar a ralentizar la carga de tu web:

//botones de compartir en Facebook, Twitter, Linkedin y Google + integrados en el theme
function share_this($content){
if(!is_feed() && !is_home()) {
$content .= '<div class="share-this">
<div class="facebook-share-button">
<iframe src="http://www.facebook.com/plugins/like.php?href='.urlencode(get_permalink($post->ID)).'&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=recommend&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:90px; height:21px;"></iframe>
<span style="vertical-align: top;margin: 2px 0 0 0;display: inline-block;display: -moz-inline-stack;"><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php" rel="external nofollow">Compartir</a></span><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
<a href="http://twitter.com/share?via=AUTOR&amp;count=horizontal" class="twitter-share-button" rel="external nofollow">Twitter</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<a href="http://www.linkedin.com/shareArticle?url='.urlencode(get_permalink($post->ID)).'&amp;counter=right" title="Compartir en Linkedin" target="_blank" rel="external nofollow">
<img src="'.get_option('home').'/images/linkedin-share.png" width="54" height="20" alt="Boton de compartir en Linkedin" /></a><div class="g-plusone"></div></div>
</div>';
}
return $content;
}
add_action('the_content', 'share_this');

Debes recordar que el carácter ampersand “&” se debe incluir como “&amp;”  en el código fuente de todo lo visto aquí para que tu web cumpla con la validación famosa del W3C.

Para este artículo aparte de mi aportación personal me he basado en 3 fuentes según las Redes Sociales mencionadas:

• Twitter: http://bitelia.com/2010/08/alternativas-insertar-botones-twitter
• Linkedin: http://www.tagsistemes.com/en/news/guias-y-trucos-web/97-como-validar-un-boton-de-compartir-de-linkedin-en-w3c
• Google +: http://www.colorkey.es/blog/development/internet/el-boton-de-google-plus-y-su-validacion/ y http://jamesingham.me/blog/google-plusone-w3c-valid

Si te ha resultado útil este artículo, dejame tu opinión en los comentarios o compártelo con tus amigos y compañeros en tus redes sociales favoritas.

10-febrero-2012 | Categories: Facebook, Posicionamiento SEO, Twitter, Wordpress | Tags: blogger, codificar, data-counter, data-url, facebook, google, HTML5, linkedin, twitter, W3C | Deja un Comentario »