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

Botones o enlaces para compartir los artículos en las distintas redes sociales creados con código nativo de Blogger. No necesitan ni javascript ni dependencias de código ajeno o de terceros.

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

Por Kseso ✎ 19
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?

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

Comentarios: 19

  1. He creado todo por ahora: http://simplesmenteresponsive.blogspot.com.br/

    ResponderEliminar
  2. es muy buen post, una excelente idea estoy un poco harta de tantos botoncitos y mas pijadas, siempre dependiendo de cualquier plataforma que te los regale y a veces recargan la edición un monton, lo voy a implantar en cuanto pueda en mis blogs, excelente explicación gracias por compartir y por tu tiempo.

    ResponderEliminar
  3. Hola, buenas tardes

    He probado este método y similares y me he dado cuenta de que la fórmula no admite algunos caracteres como comillas o el separador | ¿Tiene alguna solución? Muchas gracias.

    ResponderEliminar
    Respuestas
    1. En cualquier lenguaje, Emilio, las comillas encadenadas (unas dentro de otras) hay que o bien "escaparlas" según el lenguaje o usar caracteres diferentes, como en los ejemplos de este post.

      Además Blogger (también en este aspecto) es un tanto puñetero y quisquilloso.

      Fíjate que toda la expresión que generará el valor del atributo href está encerrada entre comillas simples y que cada una de las subpartes textuales están entre comillas dobles:
      [code]
      <a expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " por @Kseso"'>Tweet</a>
      [/code]

      Aunque por las particularidades de este CMS él solito se encargará de cambiar las comillas dobles por su entidad html correspondiente al guardar la plantilla:

      [code]
      expr:href='&quot;https://twitter.com/share?url=&quot; + ...'
      [/code]

      Respecto al carácter textual | o cualquier que no sea visto como código (como < > ... apertura o cierre de elementos principalmente) nunca tuve problemas.
      Y en última instancia usa su entidad html.

      Un saludo

      Eliminar
    2. El caso es que los títulos de los post que contengan tanto la comilla simple como la barra vertical no permiten que salga la aplicación de la red social en cuestión: twitter ni comilla simple ni barra; facebook la comilla simple.

      Eliminar
    3. ah! que estás hablando del token data:post.title
      Date cuenta que ese token lo "computa" blogger para obtener el valor del título del post y dicho valor le es pasado a la red social de la que se trate que lo usará según las características propias de su código.

      Así que si algo de lo generado por esa data (o por el resto de la expresión) entra en colisión con la programación de una red social desde el blog sólo podremos actuar para suprimir las colisiones, nunca para "reconvertirlas".

      Si te fijas, en todos los enlaces se le pasa el valor del título del post en el href excepto para facebook que su boot esnifará datos en función del marcado usado en el post (schema, cards...).

      Para evitarte problemas (y no sólo en estos botones) es conveniente no usar caracteres "especiales" o marcado html en el título pues podrían entrar en colisión al usarse en otras aplicaciones (botones, lectores feeds,..) por interpretarlas como código en vez de texto.

      Un saludo

      Eliminar
    4. Hola, buenos días,

      He seguido dándole vueltas. Pero no he conseguido nada. Hay algunos símbolos (|, las comillas simples...) no permitidos. Sin embargo si que navegadores en el móvil lo permiten. La pregunta es... ¿podría combinar un botón de fontawesome con un javascript (el twitter u otro servicio externo) para que saliera siempre el título de la entrada con este símbolo?

      El código que estoy usando es este: a class='hs-icon fa fa-twitter' expr:onclick='"window.open('http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl + " vía: ','','width=500,height=500');"'

      Un saludo.

      Eliminar
  4. Rectifico. Con tu método sólo es en twitter y con la barra vertical

    ResponderEliminar
  5. Si el problema lo tienes al incluir en el título el carácter | al pasarlo en la cadena textual del título estás ante una incompatibilidad con la programación de Twitter.
    Y es un detalle con el que nunca me topé.
    Añade a ello que desconozco la api de Twitter.
    Sinceramente, creo que deberías investigar en ella y ver si cuenta con mecanismos de resolución de este tipo de conflictos.

    Un saludo

    ResponderEliminar
    Respuestas
    1. Yo tampoco tengo tuita, y estoy de acuerdo en que hay una incompatibilidad.
      Puede que sea un caracter que usa para control o para alguna instrucción dentro de la cadena, y por lo tanto no te lo va a aceptar sin un escape. Que debería estar previsto por sus mismos desarrolladores.

      Como tengo un poco más de fe que el amigo Kseso en la especie casi humana que puebla las webs, quiero creer que ya investigaste en el sitio de Twitter antes de preguntar, y que no te dieron información.
      Así que vamos a deducir como se haría con cualquier problema del que no sabemos la causa.

      Dudo que tenga una limitación con el unicode, como dije, supongo que lo rebota por ser uno de sus caracteres reservados, así que si solamente captura el texto del título, con cambiar ese caracter por otro tendrías una salida de compromiso.

      http://unicode-table.com/es/007C/

      Si no reconoce el contenido por ser título, sino por un atributo agregado, le ponés ese atributo a un elemento que no sea título y que esté oculto, con un texto que represente a tu sitio pero no contenga la barra vertical, mientras que a tu verdadero título visible lo escribís como se te ocurra.

      Bueno, no sé, son ideas.

      Eliminar
    2. Hola Furoya. Llevo ya unas cuantas vueltas. No he obtenido respuesta de ningún lado. He comprobado que solo sucede en los navegadores de un pc; en móvil, en cambio, no da ningún problema. En la red no he encontrado nada. Tan solo un par de casos similares sin respuesta. Creo que la única forma es mezclar, si se pudiera el javascript del botón oficial de twitter con la clase de la estructura en html que tengo. ¿Cómo? Ni idea. El problema no son los textos futuros, son los pasados... cambiarlos todo sería muy molesto. El caso es que esa barra se usa bastante, no sé cómo puede afectar tanto su traslación del data:post.title al navegador. No es el único carácter que da problemas. También las comillas simples lo hacen con facebook, por ejemplo. Me temo que es hora de claudicar. O bien cambiar los títulos o resignarse a no tener post title en las comparticiones. Gracias.

      Eliminar
    3. Por partes, como Dexter nos enseñó ;-)

      Furoya y su literalidad y linealidad, de la que a menudo me olvido xD
      "creo que deberías investigar en ella y ver si cuenta con mecanismos de resolución de este tipo de conflictos."
      Creo que me expresé mal.
      Me refería a investigar ese aspecto en concreto.

      Vamos a ceñirnos al botón de Twitter y el caracter de la barra vertical Emilio

      De entrada comentarte que en el código de la plantilla no puedes actuar, ya que las exp: y data: y demás código nativo de Blogger en la plantilla es eso, código, que sólo al ser computado para enviar al navegador genera el valor concreto para cada post.
      Y por lo tanto en el código que recibe el navegador ya no existen dichos exp: y data: si no su valor computado.
      Por otra parte, aunque el navegador los recibiese como tales (exp:.data:... étc) no le serviría de nada. No es código que sus motores puedan procesar (como el código html, css, js...). Se necesita del servidor de Blogger.

      Te comento lo anterior como base para entrar en el código que tú estás utilizando:
      [code]
      expr:onclick='
      "window.open('http://twitter.com/home?status="
      + data:post.title
      + " "
      + data:post.canonicalUrl
      + " vía: ','','width=500,height=500');"
      '
      [/code]

      Abro paréntesis:
      1º: Advierto ciertas inconsistencias en el uso de los pares de comillas, como por ejemplo que usas comilla simple al inicio del valor :onclick y también en el valor de "window.open(') así como la comilla doble previa a éste la cierras tras el signo =
      2º: veo que intercambias los data: poniendo antes el título que la url cuando en la api de Twitter es al revés.

      No se hasta qué punto estos dos detalles (comillas y orden de datas) influirán o no en el funcionamiento.

      Cierro paréntesis.

      Este código que tú escribes tal cual en tu plantilla es computado por Blogger y las cadenas data: ya no son tales sino que el navegador recibe el valor textual de ellas.
      Así que si en algún título se encuentra el caracter de la barra lo inserta tal cual.

      A nivel del código nativo de blogger en la plantilla no puedes actuar para evitar ese grafo o cualquier otro que esté presente en el título de tus posts.

      Sólo puedes actuar en el código que recibe el navegador. Esto es, el HTML generado por Blogger donde ya existe la barra o cualquier otro.

      Si fuese mi problema ¿qué haría yo?

      Volvamos al código que muestro en el post para el botón de Twitter:
      [code]
      <a expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " por @Kseso"'>
      [/code]

      Supongamos que el título de post sea algo como:
      CSS Intrinsic Sizes | tamaños en función del contenido
      como ves hay una barra vertical que efectivamente colisiona con Twitter (lo probé ;-)

      El resultado de computar el código anterior (el generado en el html por Blogger) es el siguiente:
      [code]
      href="https://twitter.com/share?url=https://escss.blogspot.com/2016/07/Intrinsic-Sizes-min-content-max-content.html&text=CSS%20Intrinsic%20Sizes%20|%20tama%C3%B1os%20en%20funci%C3%B3n%20del%20contenido%20@Kseso"
      [/code]
      Donde ya existe y donde hay que actuar.

      Ahora ya puedes mediante javascript crear un función que busque en el atributo href del botón de twitter si existe dicho caracter (o cualquier otro) y que lo reemplace por nada o por cualquier otro que no colisione con Twitter (quizás su entidad html o caracter ascii si lo admitiese).

      Creo que es la única solución, ya que la incompatibilidad es del grafo presente en la cadena textual que le pasas como url a Twitter con independencia de la forma en que se genera (que Twitter desconoce y tampoco le importa).

      Un saludo, Emilio.

      P.D.: Posíblemente todo se deba a que el | sea un caracter no permitido o con alguna función especial en la composición de las urls:
      URL standard

      Eliminar
    4. Creo detectar otro tipo de problema en la URL que habéis pasado por alto.

      Para indicar el título a Twitter lo estamos haciento directamente en el parámetro, aunque quizás sería conveniente escaparlo.
      En algunos casos es innecesario, ya que el navegador cambia los espacios por %20 automáticamente, pero si el título contiene, por ejemplo, un ampersand (&), el navegador interpretaría que estamos añadiendo otro parámetro a la URL cuando en realidad no quereremos eso.

      Como el data: de Blogger no se puede modificar, la única solución que se me ocurre es envolver cada parámetro con la función JavaScript encodeURIComponent. Aprovecho las posibilidades de los atributos de autor HTML5 para simplificar el código.
      [code]
      <a href='#' <-- si no hay JS, ¿link al perfil de Twitter? -->
      expr:data-title='data:post.title'
      expr:data-url='data:post.url'
      onclick='window.open("http://twitter.com/share?url="
      + encodeURIComponent(this.getAttribute("data-url"))
      + "&text="
      + encodeURIComponent(
      this.getAttribute("data-title") + " vía: @usuario"
      ),"","width=500,height=500");'
      > Twittear </a>
      [/code]

      Este código aún tiene una pequeña pega: si el título contiene comillas simples (') -cosa que yo considero poco probable- interferirá con el atributo data-title. En ese caso, el título se cortaría justo antes de la primera comilla. De todas formas, el usuario puede leer el título completo haciendo click en el link, por lo que no resultaría problemático.

      Si pongo el caracter | de esta forma (%7C), Twitter lo elimina junto con todo lo que va después, así que esto ya es un problema de la plataforma que no podemos solucionar, pero un .replace(/\|/g, "-") nos puede hacer un apaño para evitar cambiar todos los títulos. Además, de esta forma solo lo aplicamos a Twitter y no a otras redes sociales que sí aceptan la barra vertical.

      Eliminar
    5. ¡Qué bueno verte por estos lares, Jorge!
      Estuve jugando con tu propuesta (borando el comentario condicional ;-) y a parte de tener que reemplazar el & de la cadena &text= por su entidad &text= por esas cosas que tiene Blogger me topé con un escollo insalvable:
      Bogger ignora el atributo href='#' y genera su propio href insertandole el valor de la dirección de la página en la que está.
      Así que al hacer click sobre él recarga la página.

      Probé diferentes cosas, incluido el sustituir el enlace por un button sin que ninguna fuese efectiva.

      Así que con más tiempo esta tarde lo que hice fue un "invento" para probar mi idea de reemplazar el | una vez generado el html.

      Lo hago a semejanza de un script que utilizo para cambiar en los hrefs de los enlaces del cuerpo de los artículos la cadena ksesocss por escss tras en cambio de url del blog.

      [code]
      <script type="text/javascript">
      //<![CDATA[
      (function(){var ltv=document.querySelectorAll(".post-body-footer a.demo");for(i=0;ltv[i];i++){var lto=ltv[i].href;ltn=lto.replace(/\|/g,'-');ltv[i].href=ltn;}})();
      //]]>
      </script>
      [/code]
      Ni que decir tiene que el selector .post-body-footer a.demo se corresponde con el código particular usado en mi blog.

      Tras probarlo el reemplazo del | se realiza y Twitter no da problemas como se puede apreciarse en la imagen inferior

      [img]https://3.bp.blogspot.com/-6oraGIojYjI/V4-i9EgojTI/AAAAAAAANFo/djY_OvKhyU438lhwtCVi89hKOXmgJYLRQCLcB/s900/nuevo-4.JPG[/img]

      Un saludo y espero que esto sea de utilidad a Emilio hasta que encuentre otra forma más "profesional".

      Eliminar
    6. ¡Genial! El caso es encontrar una vía. Lo que no entendí es el selector que le pusiste. ¿Cuál debería poner yo? Muchas gracias.

      Eliminar
    7. He estado probando y cambiando el selector, pero no logro que funcione. En el caso de que lo hiciera, ¿se podría sustituir ese elemento por otro, por ejemplo por dos puntos? Un saludo.

      Eliminar
    8. Creo, Emilio, que para esas dos dudas, el selector js querySelectorAll() y la función replace(), es mejor que hagas una búsqueda sobre ellas.
      Hay páginas de reconocido prestigio, como developer.mozilla.org o stackoverflow.com, en las que encontrarás una ayuda infinitamente mejor que la que yo pueda darte al respecto.

      Un saludo

      Eliminar
    9. Gracias Kseso. Buscaré información en el segundo caso. Sobre el primero me refería a .post-body-footer a.demo ¿Qué tendría que poner yo?

      Eliminar
  6. Lo he intentado por esa vía Jorge, gracias, pero me da error en algún parámetro.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap