Botones para 21 redes sociales con contador | Oloblogger Juan Martín de CheckApps nos hizo conocer hace unos días la existencia de un servicio gratuito que ...

5 de febrero de 2014

Botones para 21 redes sociales con contador

Juan Martín de CheckApps nos hizo conocer hace unos días la existencia de un servicio gratuito que permite crear botones sociales personalizados. Así dicho no es nada del otro jueves, pero cuando descubrimos que admite ahora mismo 21 redes distintas, que incluye contadores de las veces que se ha compartido una dirección o de los seguidores que tiene una página y sobre todo, lo fácil que resulta añadirlos a nuestro sitio, la cosa se empieza a poner más interesante.

El sitio en cuestión es GetShares y dispone de un instalador para generar el código de cualquier botón con tres opciones de estilo, pero lo más interesante a mi parecer es aprovechar su API para poder crear una andanada de botones. Es lo que veremos en esta entrada.

Botones sociales GetShares. Blogger


En la página de getshar.es está el generador de botones, una utilidad para ver los contadores de cualquier dirección web en varias redes de una sola vez y unos apuntes sobre la API algo más intuitivos que los del proyecto. Este último lo podéis encontrar completo en GitHub.

El servicio funciona gracias a un fichero js que junto con jQuery desarrolla todo el sistema de botones y adicionalmente hay un .css para que sea fácil configurar el estilo de los mismos. Ambos ficheros podéis descargarlos y alojarlos bajo vuestro control (respetando la licencia) por si el servicio llegara a saturarse alguna vez, cosa que de momento parece que no ocurre. Al contrario, de momento van bastante rápido.

Eso sí, el JavaScript no es autosuficiente y si algún día GetShar.es deja de ofrecer el servicio, aunque tengas el control del código los botones dejarán de funcionar.



La forma de añadirlos a Blogger es un poco diferente de lo allí explicado, porque para poder usar los botones con direcciones dinámicas tendremos que echar mano de las variables data y para que estas funcionen como parte de un JavaScript, tenemos que hacer adicionalmente una chapucilla que consiste básicamente en "medio-convertir" el código en texto plano.

De esta manera, esto es lo que habría que poner en vuestra plantilla, tal cual, dentro de la zona de generación de posts y quizás los mejores sitios serían dentro de la caja post-header o de la post-footer.

Aunque no es muy ortodoxo poner todo esto seguido en la parte HTML, lo he hecho así para que sea más fácil poner o quitar de una vez. Además he añadido una regla de estilo para que en cualquier caso los botones queden centrados... como estos que siguen que son ya reales y la demostración palpable de cómo funcionan.




<!-- BOTONES SOCIALES GETSHARES -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='buttons'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/>
<script src='http://cdn.getshar.es/lib/0.8.0.min.js' type='text/javascript'/>
<link href='http://cdn.getshar.es/lib/0.8.0.min.css' rel='stylesheet' type='text/css'/>
<style>#buttons{text-align:center; margin:10px auto;font-weight:normal;}</style>
<script type='text/javascript'>
(function(){
var settings;
settings = {
root: $(&quot;#buttons&quot;),
counter: {
position: &quot;inside&quot;
},
share: {
url: &quot;<data:post.canonicalUrl/>&quot;,
imageUrl: &quot;<data:post.firstImageUrl/>&quot;,
message: &quot;<data:post.title/>&quot; + &quot; <data:post.canonicalUrl/> Vía: @oloman&quot;
}
};
new GetShare($.extend(settings, {network: &quot;googleplus&quot;}));
new GetShare($.extend(settings, {network: &quot;twitter&quot;}));
new GetShare($.extend(settings, {network: &quot;facebook&quot;}));
new GetShare($.extend(settings, {network: &quot;linkedin&quot;}));
new GetShare($.extend(settings, {network: &quot;pinterest&quot;}));
new GetShare($.extend(settings, {network: &quot;pocket&quot;}));
//Más redes en http://getshar.es/
}).call(this);
</script>
</b:if>


En todo eso lo único que debemos cambiar es el apartado del message si es que queremos que salga algo distinto de título-dirección-vía y, evidentemente, el usuario Twitter porque el que figura es el mío.


Para presentarlos con otro aspecto (muy parecido realmente) se puede cambiar el valor de position eligiendo entre inside (dentro del botón) y split (como añadido al botón). También se puede añadir un parámetro adicional en settings para que el botón muestre un texto a la derecha del icono de la red. Por ejemplo: button: {text:'Compartir'}.

La última parte del código es la que que genera cada uno de los botones (new GetShare...) y ahí debemos incluir tantas líneas como botones, indicando en network el nombre de la red correspondiente. La lista completa está en esta página de GetShares.


Un inconveniente es que los botones se añaden a una caja vacía mediante una ID (#buttons, en el ejemplo), lo que provoca que no se pueda colocar más de una tanda de botones por página. Por ese motivo le he añadido ese condicional que visteis, para que no se muestre mas que en páginas de entradas dónde los posts son únicos.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

44 comentarios :

  1. Genial, muchas gracias por el tuto :)

    ResponderEliminar
  2. Me gusta mucho el sistema y es rápido. Aunque supongo que no es posible poner los botones con los logos originales. Algunos no son fácilmente identificables. ¿Se puede cambiar eso? Un saludo.

    ResponderEliminar
  3. Sí que es posible. El original usa una fuente que tiene logos asociados a las letras, pero tú puedes editar el CSS (http://cdn.getshar.es/lib/0.8.0.min.css) y cambiar lo que quieras.

    ResponderEliminar
    Respuestas
    1. El caso es que sin hacer ni un cambio, los logos aparecen si el navegador no es Mozilla. Si es éste, te aparecen en texto plano.

      Eliminar
    2. Cierto. Debe ser que Mozilla no soporta esa fuente o el formato en el que viene en el CSS. En ese caso y con más razón, lo mejor sería incorporar al CSS los iconos como imágenes.

      Eliminar
  4. Campeon, hace meses que la foto de perfil de mis comentarios no se ve, no se si tiene que ver con que la borre desde google plus y ahora no me reconoce la que pongo. Que puede ser... fijate en los comentarios de mi blog, http://abran-cancha.blogspot.com.ar/2013/08/nueva-tabla-historica-del-futbol.html

    Saludos desde Buenos Aires.
    Bocha
    Abran Cancha

    ResponderEliminar
    Respuestas
    1. No hace falta que te fijes en mi blog, aca tampoco anda... que puede ser?

      Eliminar
    2. Casi seguro que es lo que dices, que la borraste de Google+ (Picasa). Lo compruebas fácil poniendo otra de nuevo en tu perfil.

      Eliminar
    3. Gracias campeon, lo solucione! :D

      Eliminar
  5. Hola Oloman una vez más :) Como siempre que te pregunto algo es porque me estoy volviendo loca intentando localizar una cosa en mi plantilla. Ya sé que no tiene mucho que ver con la entrada (espero me perdones) pero creo que, como siempre, eres el unico que me puede ayudar. Ya te comente hace tiempo que por un problema de blogger no puedo tocar los colores y tipos de letra desde Avanzado, y hasta ahora me he desenvuelto bien con el HTLM de la plantilla, pero esta vez no hay manera de localizar donde encontrar el color que tengo de fondo en las páginas desplegables que tengo en la cabecera del blog. Quiero cambiar ese tono azul tan fuerte pero ya no sé como encontrarlo... Busco en Tabs dentro de la plantilla, que es donde creo que puede estar, pero no hay ningun código de color que coincida con el que se ve. Es más solo he encontrado el color blanco de las letras y el color dorado de cuando se pasa el ratón por encima de cada pestaña. Lo mismo no me he explicado bien, aunque siempre me entiendes, jajaja.... Te agradezco de antemano tu ayuda¡¡ Muchas gracias Olo¡¡ ;)

    ResponderEliminar
  6. Hola Oloman, que pena que no me hayas leído aún... Sigo sin poder solucionar el problemilla con el color en mi HTML, duda que te expuse en el anterior comentario... Bueno, pues espero que me leas :(
    Gracias¡¡¡

    ResponderEliminar
    Respuestas
    1. Como voy a toda pastilla recuperando un poco el atraso...
      #menu a, #menu li, #menu li li {
      background-color: #4C829A;
      }

      Eliminar
    2. Hola Oloman, he buscado ese codigo de color y en mi plantilla solo aparecen dos background-color y ninguno de los dos concuerda con ese color. Te he dejado comentario en este mismo post.
      En fin, espero que este misterio se resuelva... Gracias y muchos saludos :)

      Eliminar
    3. Ya está ¡¡¡conseguido¡¡¡ No tenía que modificar el color en la plantilla. Lo que yo tengo es un gadget de menú con submenús y desde que se quedó pillado el Avanzado para modificar colores y letras, no me había dejado modificarlo desde ahí, y hoy se me encendió la bombilla y lo intenté directamente desde el gadget e voilà, CONSEGUIDO¡¡¡ jeje... Muchas gracias Olo por todo. Besos¡¡ ;)

      Eliminar
  7. Hola Karmela,
    Yo también estoy esperando por Oloman. Igual esta de vacaciones o estará liado con un montón de cosas. Yo no tengo ni idea de blogs, pero me esta gustando el mundillo de HTML. Si sirve de algo mi ayuda, aunque ya te digo que yo estoy como tu, te la ofrezco de corazón. El color azul que tu quieres cambiar según he entendido en tu comentario es este: #4C829A. Has probado a hacer control F en PLANTILLA/HTML y pegar ese código?.. Te llevara a menú li, li.. Yo que tu, intentaría cambiar donde dice background: #4C829A por otro código (color) que te guste más. Para saber a que color equivale un código puedes ir a esta pagina que esta súper bien: http://html-color-codes.info/codigos-de-colores-hexadecimales/
    Echale un vistazo para que veas las gamas de colores y sus códigos. Supongo que cambiando ese código, conseguirás cambiar ese color que no te gusta.
    Por cierto Karmela, he visto que en tu blog tu puedes subir fotos sin problemas..A mi desde picasa, ni de USB, no me deja hacerlo de ninguna manera!.. Tu como lo haces?.. Las almacenas primero en google + o facebook?.. Y de ahí copiar y pegar?. Que es lo que hace la gente ahora para publicar las fotos en el blog?.. Yo también me estoy volviendo loco con eso.. Saludos y que todo vaya bien… Jose
    PD: Si mis consejos sobre el color no te resuelven nada, esperemos que Oloman nos ilumine y ayude lo mas rápidamente posible..

    ResponderEliminar
    Respuestas
    1. Vi tu comentario después de contestar yo, pero de todas formas aprovecho que has explicado algo más sobre lo tuyo para ampliar aquí algo que te contesté por otro hilo.
      Lo que no falla es teniendo la imagen en tu disco duro (se es de Internet, bajándola primero) y luego subiéndola desde el editor. Así quedará en el post para siempre (no dependerás de que la borre el sitio de dónde la sacas) y también se almacenará en Picasa e incluso en Google+ Fotos si estás en ese servicio.

      Eliminar
    2. Muchas gracias por contestar a ambos¡¡ He buscado ese código de color y no aparece en mi plantilla¡¡
      No existe en ella, y eso que ambos habéis coincidido en el mismo, pero me la he mirado y remirado y he buscado como hago siempre por Control F y no aparece... La verdad me estoy volviendo majareta... :(
      Y contestando a Jose, yo las fotos las subo como siempre, directamente desde mi ordenador al blog. Menos mal que en eso, de momento, no me da problemas, porque solo me faltaba eso...
      Oloman, ¿qué puede ser lo que haga que en mi plantilla no aparezca ese color??. La tendría que buscar en la parte de Tabs o donde. Porque imposible mirármela entera sin tener alguna referencia. Espero me ayudes Oloman, más que nada por cabezonería... Muchas gracias como siempre :)

      Eliminar
    3. CONSEGUIDO¡¡¡ Gracias wapos¡¡ ;)

      Eliminar
    4. Eso debe ir por tí, Jose Francés :)

      Eliminar
  8. Yo estoy completamente seguro que se refiere a ti, Oloman. :)

    ResponderEliminar
  9. Anda que vaya dos¡¡¡.... jajaja :)

    ResponderEliminar
  10. gracias a migo perfecto tutorial anduve buscando eso y pus me queda decir gracias sigue asiendo buenos tutos que gracias a eso llegamos a tu pagina :)

    ResponderEliminar
  11. OLoman, he puesto este código en mi blog pero solo me sale si accedo por el movil, debo tenerlo capado pero no se como. Podrias ayudarme?
    http://opositandoquenoespoco.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Sí y no... No puedo ver tu plantilla, pero sospecho que pudieras haber puesto el código en la parte que no debías y por eso sólo ves los botones es esos dispositivos.

      Casi todas las secciones están duplicadas en la plantilla Blogger, pero es porque una parte es para web y otra para móviles. Revisa si hay un equivalente antes o después de dónde insertaste el código y duplica lo que pusiste también allí.

      Eliminar
  12. Hola Oloman, he de decir que agradezco mucho este espacio que ha sido de gran ayuda para mi y mi blog, tengo una gran duda: implementé estos botones en mi blog y funcionan bien, sólo que quiero hacerlos un poco más grandes o agregarles un botón personalizado, ya he visto el CSS que aparece en el código (cdn.getshar.es/lib/0.8.0.min.css) y no sé por donde empezar a meter mano, agradecería muchísimo tu ayuda al respecto.

    ¡Gracias de antemano! :D

    ResponderEliminar
    Respuestas
    1. Hola. En un principio el tamaño lo controlas en los selectores .getshare .getshare-button y .getshare .getshare-button:before. Todos los demás son prácticamente para personalizar los iconos de cada red.

      Eliminar
  13. (Perdona no se si envíe bien el anterior comentario, por si acaso te lo vuelvo a enviar) :S

    Hola que tal. Añadí los botones en la web y quedan muy bien, pero a veces dan un problema. Resulta que algunos botones, por ejemplo el de Google, se queda cargando durante muchisimo tiempo, y a su vez la web que contiene el botón (arriba en el navegador) también se queda cargando.

    En mi caso además esto hace, que hasta que no terminen de cargar los botones, no se me carga una zona de arriba donde va pasando en vertical un texto con las ultimas noticias.

    Me he fijado, y cuando sucede en mi web, tambien sucede en esta entrada tuya, con lo que creo que es algo generalizado, imagino que es algo relacionado con el sitio que alberga los botones. ¿Te haces una idea de porque puede ser y si tiene alguna situación?

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola Isaki. Pues entre las pistas que me das y lo que yo podía imaginar, se conoce que alojamiento del script principal va algo saturado y cuando hay muchas peticiones se demora. Lo mismo ocurre con los botones oficiales de Twitter y Google+ con contador, pero se ve que bastante menos. Como dependemos de él para este sistema no hay más arreglo si es que ese tema te preocupa, que poner otro tipo de botones. Hace tiempo que quiero hacer un post sobre cómo poner botones que no demoran nada, pero claro, son sin contador. Es la única manera de que sean rápidos siempre.

      Eliminar
  14. Excelente post ... he colocado este tipo de botones en mi ventana popup de mi radio, pero la verdad es que se demora mucho en cargar ... creo que una posible solución sería descargar los ficheros mim.js y min.css en un servidor personal ... sabes si es así ? .... y como lo haría? ... gracias ... te dejo con mi página ... saludos :) !!! http://player.radionline.co

    ResponderEliminar
  15. Hola Oloman ... quiero comentarte que descargue las librerías de los archivos min.js y min.css del servidor de getshar a un servidor personal ... pero sigue la demora en la descarga del contador en los botones (solo se puede ver en Mozilla, aunque los logos de las redes sociales desaparecen a cambio de las letras f, T y el símbolo + ). Si me puedes dar una mano te lo agradezco - http://player.radionline.co

    ResponderEliminar
    Respuestas
    1. No lo recuerdo del todo bien Robinson, pero en este caso me suena que esos botones no funcionaban sólo con JavaScript y que por eso no basta con descargar los ficheros que dices. Pienso que tenían además PHP.

      Eliminar
  16. por mas que luche no pude poner eso

    ResponderEliminar
    Respuestas
    1. No hay que luchar Emerflow. Sólo tienes que copiar ese código y pegarlo en tu plantilla. Nada más.

      Eliminar
  17. Realmente muy estético Oloman, pero estaría teniendo un problema: donde se pone el código? Ya eh probado en distintos lugares dentro de la planilla pero no me aparecen en ningún lado :/

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Prueba dentro del DIV con clase "post-header" que casi seguro que lo tienes y es un buen sitio. Tienes que insertarlo entre el DIV de apertura y el de cierre (/DIV)

      Eliminar
  18. Buenas!! Una preguntita. ¿Se podría poner esos botones pero sin ningún numero? Que no te indicase cuantas veces le han dado. Un saludo.

    ResponderEliminar
  19. hola amigo no quiero que aparezca solo la t de twitter si no que tambien diga twitter ya intente como mencionas en el ejemplo que puedo hacer ?

    ResponderEliminar
    Respuestas
    1. Realmente sólo tenían la opción de letra o icono, pero por lo que he visto hoy mismo en la página de los proveedores de estos botones, ya no sacan los iconos de las redes (pienso que quizás por temas de copyright), así que sólo hay opción de letras.
      Si quieres unos similares, pero sin contadores, quizás te interesen estos

      Eliminar
    2. (se me fue el dedo)
      En ese otro sistema, como tú los diseñas a tu antojo, podrías incluir iconos o lo que fuere, tal y como cita alguien en los comentarios, que pensaba usar la fuente Awesome

      Eliminar
    3. el caso aqui y esque solo quiero que salga por ejemplo en lugar de la t del icono de twitter que diga twitter es posible hacer esto ?

      Eliminar
    4. Ya lo dije: "Sólo tenían la opción de letra o icono". Ahora ya ni el icono.

      Eliminar
  20. ok entonces probare los otros botones gracias

    ResponderEliminar