soy Kseso y esto EsCSS

Botones para compartir sólo con código nativo de Blogger. Cero dependencias

Botones para compartir sólo con código nativo de Blogger. Cero dependencias

·Por Kseso ✎ 25
Botones para compartir con sólo código nativo de Blogger. Cero Javascript

Cada día que pasa la web se vuelve más pesada y menos anónima a cuenta de tantos y tantos recursos que parece sean imprescindibles.

Y en este engorde de las páginas y venta a terceros de lo que sucede en ellas juega un papel muy importante la comodidad de sus creadores.

No hace tanto el pago por esta comodidad de usar aquello que se daba ya hecho y regalado para sólo copiar y pegar solía manifestarse en bichos que colonizaban los blogs haciendo de las suyas.

Hoy el pago es a costa de los visitantes: tanto todo lo relativo a su actividad como a costa de su tráfico y consumo de datos.

Uno de tantos recursos de estos son los inevitables botones de redes sociales para compartir el contenido. Es mucha la literatura ya publicada sobre la incidencia que suponen en las páginas si no se extrema el cuidado en la forma y método de implementarlos.

También es cierto que no son pocos los autores que han compartido diferentes formas para minimizar los contras de su uso. Pero todos los que he ido conociendo traían consigo algo más que se traducía en aumento de peso, consumo de recursos (peticiones, tráfico, transferencia) o incremento en la dependencia

Botones sociales para Blogger con data´s nativos

Fruto de lo anterior y por el respeto que siento por quienes visitáis mi blog es por lo que hace ya tiempo que no los hay en estas páginas.

Y aquí aprovecho a agradecer públicamente el detalle de algún usuario que al ver la leyenda del pie del artículo se tomó el trabajo de codear un poco. Si no hago público su trabajo y nombre es por falta de autorización.

¡Céntrate, Kseso! y al grano, que nos come la tarde el canto ;-)

Pero hoy jugando un poco con alguna de las data´s nativas de Blogger vi que es posible tener los botones para compartir los contenidos en las redes sin necesidad de nada más. Ni llamada a recursos ajenos ni tampoco de pendencia de otros lenguajes como javascript.

Todo se reduce a un simple enlace <a... al que le agregamos en el valor de su atributo href los parámetros necesarios de cada red. Valores que son introducidos gracias a las data para automatizarlo.

Botón para Twitter

<a expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " por @Kseso"'> Tweet </a>

Botón para Google+

<a expr:href='"https://plus.google.com/share?url=" + data:post.url + "&text=" + data:post.title'> Google+ </a>

Botón para Facebook

<a expr:href='"https://www.facebook.com/sharer/sharer.php?u="+data:post.url'> Facebook </a>

Botón para Pinterest

<a expr:href='"https://www.pinterest.com/pin/create/button/?url=" + data:post.url + "&media=" + data:post.firstImageUrl + "&description=" + data:blog.metaDescription'> Pinterest </a>

Botón para Menéame

<a expr:href='"https://www.meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title'> Meneame </a>

Botón para LinkedIn

<a expr:href='"https://www.linkedin.com/shareArticle?mini=true&" + data:post.url + "&title=" + data:post.title + "&source=" + data:post.author + "&summary=" + data:blog.metaDescription'> LinkedIn </a>

Notas a tener presentes

  • Como Blogger es muy quisquilloso con el tema de las comillas encadenas y el grafo et o ampersand & a continuación de estas notas tienes un archivo de texto plano con el código tal cual ha de ser incluido.
  • En el botón de Twitter has de cambiar el nombre de mi usuario por el tuyo.
  • En los botones que admiten un resumen o descripción del post yo utilizo el texto introducido en el campo Descripción de búsqueda del editor de entradas que es la data data:blog.metaDescription. Si tú no lo cumplimentas o prefieres puedes sustituirla por data:post.snippet
  • Los tres primeros sí he verificado su correcto funcionamiento. No así en los restantes por no tener cuenta en esas redes. Si lo pruebas y notas algún malfuncionamiento házmelo saber en los comentarios.
  • He observado que si tienes las twitter cards, etiquetas para facebook o marcado schema.org también son funcionales con estos enlaces.

  • Si lo deseas puedes añadir otros atributos a cada enlace, como <a class='mi-clase' target='_X' expr:href='... '> para aplicar estilos personalizados o abrir en una pestaña nueva.

Descargar códigos en texto plano

También puedes verificar su funcionamiento con los que tienes justo después de este párrafo, y de paso se lo das a conocer a tus seguidores ;-) ¿Te atreves?

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso