16 jun. 2014

Cómo poner botones para redes sociales al final de tus entradas

portada botones redes sociales al pie de entrada
Muchos Bloggers prefieren añadir botones para redes sociales al pie de sus entradas para que los usuarios puedan compartir el contenido que ha sido de su agrado.

Vamos a aprender a colocar en el pie de entradas botones para compartir en Facebook, Twitter y Google+ nuestras creaciones.

¿Qué son los botones para las redes sociales en un Blog?: 

  • Los componentes oficiales o no oficiales de las distintas marcas de redes sociales que permiten difundir nuestros contenidos por las mismas gracias a la interacción con ellos de nuestros usuarios.
  • Los botones de distintas redes sociales exigen la utilización de unos "scripts" que permiten introducir en nuestro Blog los mecanismos necesarios, a través de código fuente para que nuestros usuarios puedan compartir el contenido de la entrada que visualizan o incluso para que nuevos visitantes se hagan seguidores nuestros.
  • Estas posibilidades son revolucionarias, pues permiten a nuestros clientes interactuar, propagar, difundir nuestras creaciones más allá del círculo social en el que nosotros nos movamos para pasar a incluirlo dentro de otros que nos son ajenos.

¿Qué inconvenientes pueden tener a nivel de rendimiento el uso de scripts?

  • El inconveniente que tiene añadir "scripts" es que requieren "incrustar" código fuente, que normalmente se conecta a servidores externos a nuestro Blog. La descarga de dichos componentes en los navegadores de nuestros usuarios y la toma de datos por parte de sus marcas redunda en una relativa "carga" para el dibujado de nuestra web.
  • Mientras descargamos los contenidos de nuestro Blog, los scripts para botones de redes sociales "postergan" de una manera u otra el avance en el dibujado de la página. Esto es debido a que deben conectarse al servidor del cual han sido extraídos para dibujar sus botones y realizar las operaciones para las cuales fueron creados.

¿Cómo conseguir un buen rendimiento al utilizar botones para redes sociales?

  • Los navegadores modernos se encargan de realizar cálculos y "balanceos" de carga que permiten "dibujar" lo fundamental de la página en primer lugar para después centrarse en aquello que pueda ir más despacio.
  • La carga asíncrona de scripts es algo con lo que también, poco a poco, los propios scripts descargados de las redes sociales trabajan. Cuando el navegador lee una página HTML descargada de un servidor, va leyendo línea a línea, cuando llega a un script si "espera" a que termine por completo, hace que la web entera  no se dibuje completamente hasta que dicho script finalice. La carga "asíncrona" impide que el navegador espere a que el "script" termine para completar el dibujado de la página.
  • Podemos utilizar "scripts" pero siempre controlando que no nos estamos "cargando" la experiencia de usuario con una velocidad inferior a la esperada, que no estamos incurriendo en un uso indiscriminado "de cosas" que añadimos a nuestro Blog para añadir una funcionalidad determinada que ni siquiera utilizan nuestros usuarios.

¿Cómo y dónde se crean los botones para redes sociales de Facebook, Twitter y Google+?

Si eres de los que les gusta hacerse él mismo las cosas y ver de dónde provienen, te dejo las principales guías de Diarios de la nube para crearte y ponerte los botones para las principales redes sociales del mundo.

¿Qué aspecto tendrá la botonera?

Será una botonera sencilla y funcional donde tendrás todo lo que necesitas para que tus usuarios puedan seguirte o compartir tu contenido en Facebook, Twitter y Google+.


Introduce los botones para redes sociales en tu Blog

1) Realiza una copia de seguridad antes de cualquier cambios para poder volver atrás en caso de error.

2) Dentro de Blogger, dirígete a "Plantilla" y pulsa el botón "Editar HTML" para realizar los siguientes pasos.

3) Como vamos a poner el botón de redes sociales de facebook, entre otros, será necesario que justo después del <body> añadas este código (para encontrar el comienzo del body pulsa CONTROL + F dentro del recuadro de código y busca: body. Asegúrate que no tenga / delante de body).

 <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/sdk.js#xfbml=1&amp;version=v2.0";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

4) Pulsa CONTROL + F dentro del recuadro de código y busca: <b:includable id='shareButtons' var='post'>

Si encuentras shareButtons dos veces, es porque una de ellas pertenece al móvil. Haz los cambios sobre la zona donde encuentres <b:includable id='shareButtons' var='post'> por segunda vez.

En esa zona se encuentran todos los botones para compartir que por defecto Blogger añade en tu plantilla a tus entradas. Es a partir de esta zona donde vamos a añadir los botones para redes sociales que precisemos.

Cambia el código que se encuentra bajo el <b:includable id='shareButtons' var='post'> por este otro. Así sustituirás uno por otro:

<b:includable id='shareButtons' var='post'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table cellspacing='0' width='100%'>
<tr>

<td align='left'>
<div class='fb-like' data-href='http://DIRECCIÓN_DE_TU_BLOG/' data-layout='button_count' data-show-faces='false' data-width='450'/>
<div class='fb-send' data-href='http://DIRECCIÓN_DE_TU_BLOG'/>
</td>

<td>
<!-- Inserta esta etiqueta donde quieras que aparezca Botón +1. -->
<div class="g-plusone" data-size="medium" data-annotation="none"></div>

<!-- Inserta esta etiqueta después de la última etiqueta de Botón +1. -->
<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/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>

<td align='left'>

<a class='twitter-follow-button' data-lang='es' data-show-count='false' href='https://DIRECCIÓN_TWITTER'>Seguir a @NOMBRE_EN_TWITTER</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</td>

<td align='left'>
<a class='twitter-share-button' data-lang='es' data-via='NOMBRE_EN_TWITTER' href='https://twitter.com/share'>Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);</script>
</td>

</tr>
</table>
</b:if>    
</b:includable>

El código en rojo lleva todos mis botones metidos en una tabla. el código <b:if cond='data:blog.pageType == &quot;item&quot;'> que al final de todo el añadido con mi tabla se cierra con un </b:if>  es el encargado de conseguir que SÓLO se dibujen los botones de las redes sociales cuando el usuario acceda a leer la entrada. Es decir, impedirás que se dibujen en la página principal haciendo que sólo se vean cuando tus visitantes hagan "clic" en más información. Simplemente rellena los textos en azul con los datos de tus redes sociales y ¡ya lo tienes!.

¿Problemas, alguna duda?

Te añado un enlace para que te descargues un ejemplo de plantilla simple con todo el código que va bajo los <b:includable id='shareButtons' var='post'> preparado y funcionando para que te pueda servir de referencia. Pulsa "Save to Drive" y se almacenará automáticamente en tu propio Google Drive para que lo descargues donde necesites (en tu casa, en tu móvil, etc...).



Verás que el código va marcado con el texto <!--AQUÍ EL CÓDIGO PARA PONER EN EL PIE DE BLOGGER BOTONES PARA REDES SOCIALES--> hasta <!--FIN DEL CÓDIGO PARA PONER EN EL PIE DE BLOGGER BOTONES PARA REDES SOCIALES--> como puedes ver en la pantalla inferior.


Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

36comentarios:

  1. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  2. Excelente Miguel, he estado buscando unos botones que además que me compartan contenido, me sigan en las redes sociales.

    Gracias por compartirlo ;-)

    ResponderEliminar
    Respuestas
    1. Hombre Jonathan, me alegro que te sirvan. Cualquier cosa aquí me tienes. Un abrazo!

      Eliminar
  3. A mi no me salen... no sé que hacer porque lo he probado ya todo...

    ResponderEliminar
    Respuestas
    1. Hola Carlos,
      no desesperes, ¿qué lo que no sale?. Quizás puedes probar esta otra forma de ponerlos: http://www.diariosdelanube.com/2013/07/la-guia-para-anadir-botones-sociales-tu.html con esto es prácticamente automático y si no te funciona, me comentas.

      Un saludo!

      Eliminar
  4. Saludos, será que todos estos botones sirven para un sitio web de google sites?

    ResponderEliminar
    Respuestas
    1. Uf!, ahí me pillas... en teoría, si te deja tocar en Google Sites el HTML, no veo porqué no funcionarían... pero claro, no he probado en sites. Un saludo!

      Eliminar
  5. Hola! Saludos cordiales Miguel.
    Actualmente estoy creando un nuevo blog, por lo que soy poco experta en el campo y la configuración de algunas cosas. Sin embargo he seguido los pasos que mencionas, pero no encuentro dentro de la configuración html el apartado que mencionas. En mi búsqueda no aparece nada.
    De hecho me gusta la manera en que distribuiste los 3 botones debajo de tus entradas y me gustaria saber como le hiciste.

    ResponderEliminar
  6. Hola Ana, la manera más sencilla de añadir botones para redes sociales a tu blog es esta: http://www.diariosdelanube.com/2013/07/la-guia-para-anadir-botones-sociales-tu.html

    No obstante, si quieres añadir estos y no encuentras en tu código dónde corresponde, me escribes en contacto (opción del menú de arriba a la derecha) y me pasas tu código (el de tu plantilla) para que pueda ayudarte y encontrar dónde ponerlo.

    Un saludo!!!

    ResponderEliminar
    Respuestas
    1. Hola, muchas gracias. En un momento más envió mi código, espero te llegue.

      Eliminar
  7. Hola Miguel!! en los botones de compartir en mi blog no salen los datos correctos, en la pantalla de inicio salen los mismos me gusta para todas las entras, mientras que dentro de la entrada tengo por ejemplo 3 me gusta en facebook y a la hora tengo cero. No se cual puede ser el error, mi blog es http://iconosdecine.blogspot.com.es/

    ResponderEliminar
  8. Buenas Jose,
    es porque tienes sobreescrita la URL canónica de tu Blog o porque has puesto la URL de tu Blog en los propios botones.

    La URL canónica en Blogger se carga por defecto (sin meter ningún meta-dato). En ella está la URL de la entrada desde la que se comparte tu contenido. Tienes más detalle aquí: http://www.diariosdelanube.com/2014/06/como-evitar-el-contenido-duplicado-en.html Se utiliza para identificar de manera unívoca una URL.

    Según he visto en tu Blog, la tienes sobreescrita y es siempre la misma, con lo que tus marcadores de Facebook, Google+ y de más, siempre apuntan a la misma dirección (la "global" del Blog) y dan siempre los mismos valores.

    Mi recomendación es que hagas exactamente esto: http://www.diariosdelanube.com/2014/05/como-debe-ser-la-estructura-de-un-blog.html oberva el punto 2).

    Es necesario que para que se ajusten bien esos marcadores de puntuación social, quites la meta-etiqueta que pone como URL canónica la dirección de tu Blog (está en el head). Para gestionar bien las etiquetas en Blogger (sin duplicidades ni problemas) te recomiendo esta entrada: http://www.diariosdelanube.com/2014/02/las-meta-etiquetas-imprescindibles-en.html

    Como mínimo quita del head de tu plantilla la referencia que tienes a la URL canónica (quito < y > porque en los comentarios no deja escribir código) link href='http://iconosdecine.blogspot.com/' rel='canonical'/

    Cualquier duda pregunta sin problemas, aquí estaré.

    ResponderEliminar
    Respuestas
    1. Hola de nuevo Miguel, antes que nada darte las gracias por haberme respondido. He estado mirando todo lo que me comentas pero no logro entender bien lo que tengo que hacer, en el head no encuentro la meta etiqueta que pone como URL canónica la dirección de mi Blog.
      Un saludo y gracias de nuevo.

      Eliminar
    2. Hola Jose,
      está en tu plantilla de Blogger. Si buscas dentro de la plantilla pulsando CONTROL y la tecla F simultáneamente, te saldrá la cajita de búsqueda, ahí dentro escribe canonical y verás que sale la URL de tu Blog. Haz una copia de seguridad del código y prueba después a quitar sólo esa línea donde pone canonical y la url de tu Blog. De esa manera los marcadores sociales te darán sólo los datos de puntuación de la entrada en cuestión (no los de todo el Blog). En caso de error siempre puedes recuperar la copia de seguridad o simplemente volver a añadir esa línea que eliminaras.

      Un saludo!,

      Eliminar
    3. Hola Miguel, gracias de nuevo. La operación que me indicas ya la he realizado y el resultado de la búsqueda de la palabra canonical me da varios resultados y ninguno acompañado de mi URL, éste es el primero que me encuentra (el meta junto que separado no deja escribirlo). No sé si hay algún error...

      Un saludo.

      Eliminar
    4. expr:content='data:post.canonicalUrl' itemprop='url'/>

      Eliminar
    5. ¿Ese que te aparece está antes de esta etiqueta? /head> Si es así, prueba a quitarlo (córtalo) y guarda y pruebas. Si te falla cualquier cosa lo vuelves a pegar donde estaba y listos. La idea es que tienes una referencia a la URL canónica que está sobreescrita y por ello no te funcionan bien los contadores sociales.

      Prueba y me dices (haz copia de seguridad).

      Un saludo!

      Eliminar
    6. Saludos Miguel, he probado lo que me dices y no está antes del /head>, incluso he mirado si antes de esa etiqueta sale algo de la URL canónica y nada...

      Eliminar
    7. Es que si le das a ver código fuente de tu página (clic derecho del ratón en algún sitio de tu página) y buscas dentro del código en una entrada, verás que se sobreescribe la URL canónica. Compruébalo, es buscar en la plantilla dónde se está haciendo.

      Blogger por defecto utiliza la URL canónica, por ello si hay una metaetiqueta o similar sobreescribiéndola, los marcadores sociales sólo marcan los de la URL sobreescrita.

      Eliminar
  9. saludos amigo ami me sale es la opciones de tiwitter de seguir y compartir y el boton de google + pero los botonoes de facebook de compartir y me gusta no me salen.digame como puedo hacer para que me aparezcan

    ResponderEliminar
    Respuestas
    1. Hola Jose, pasa la URL y lo miro para ver qué podría ser. Un saludo.

      Eliminar
  10. men el de face no aparece haber si me ayudas te dejo mi blogg http://clubanimehd.blogspot.com.ar/

    ResponderEliminar
    Respuestas
    1. Hola!,
      muy buen blog sobre anime, lo tienes muy bien organizado. Pues, no veo dónde has puesto los botones, pero tienes por defecto puestos los de Blogger que servirán para que el usuario también pueda hacerlo. Si no te salía le de facebook puede ser desde que el div (contenedor) no lo tenías bien puesto, hasta que no pusiste el código necesario en el head para facebook.

      Cualquier cosa aquí me tienes si quieres que vayamos viendo... es que no los he visto colocados.

      Un saludo!,

      Eliminar
  11. Hola! muy buen post te cuento mi problema a ver si me podes ayudar.. yo tengo una plantilla que me descargue y la personalice hasta donde me dio mi conocimiento en las entradas tengo ya por defecto de la plantilla los botones de share pero por alguna razon cuando se tocan me dirije a mi propio blog y me dice que no encuentra la entrada.. he estado investiga y probando diversos codigos y no encuentro la forma de hacer que funcionen esos botones =/
    te dejo mi blog si queres fijarte lo de los botones y disculpa si tenes una idea de como arreglaro te bajo el cielo ! mundoletroso.blogspot.com
    Saludos !

    ResponderEliminar
  12. Hola!,
    caray, eso si es modificar un blog, tienes aplicados cientos de cambios pero además con muy buen tino en tu temática, te felicito. En cuanto a los botones, he visto que son de AddThis. Es como si no hubieras establecido correctamente la URL de cada botón. Mi recomendación es que sigas este tutorial sobre botones con AddThis: http://www.diariosdelanube.com/2014/12/como-anadir-botones-para-redes-sociales.html

    Un saludo!

    ResponderEliminar
  13. Respuestas
    1. Hola, prueba a poner en la caja de búsqueda <body y darle a buscar, está seguro en tu plantilla.

      Un saludo!

      Eliminar
  14. Hola soy un blogger y la verdad me ha funcionado tus pasos! Muchas Graicas :D visita mi blog www.jhosesaro.blogspot.com

    ResponderEliminar
  15. Hola Miguel, primero desearte un feliz nuevo año 2016!

    Valoro mucho tu trabajo y realmente me es de gran utilidad. Quería decirte que no tengo ningún problema con las entradas miniaturas, ni con el "leer más"; sin embargo, hay un espacio precisamente debajo que lo quiero aprovechar.

    Lo que quiero hacer es poner una barra sencilla (que no me cargue el blog) de botones de redes sociales (si me podrías recomendar uno) pero que sólo aparezca en el inicio (home) de cada entrada no al ingresar, ya que cuento tengo otra barra mas elaborada.

    Espero haberme explicado correctamente y quedo a la espera de tu respuesta.

    Saludos!

    ResponderEliminar
  16. Hola Miguel, primero desearte un feliz nuevo año 2016!

    Valoro mucho tu trabajo y realmente me es de gran utilidad. Quería decirte que no tengo ningún problema con las entradas miniaturas, ni con el "leer más"; sin embargo, hay un espacio precisamente debajo que lo quiero aprovechar.

    Lo que quiero hacer es poner una barra sencilla (que no me cargue el blog) de botones de redes sociales (si me podrías recomendar uno) pero que sólo aparezca en el inicio (home) de cada entrada no al ingresar, ya que cuento tengo otra barra mas elaborada.

    Espero haberme explicado correctamente y quedo a la espera de tu respuesta.

    Saludos!

    ResponderEliminar
    Respuestas
    1. Utiliza este tutorial para localizar las clases de la hoja de estilo donde se encuentre la zona que quiere aprovechar: http://www.diariosdelanube.com/2013/07/guia-para-trabajar-con-hojas-de-estilo.html y sigue las instrucciones para cambiar los parámetros de las mismas.

      También puedes utilizar este otro tutorial de AddThis que puede ayudarte para añadir botones para redes sociales: http://www.diariosdelanube.com/2014/12/como-anadir-botones-para-redes-sociales.html

      Lo fundamental es que aprendas a buscar dentro de blog el nombre de la clase de la hoja de estilos o de tu plantilla que te sirve para poner lo que necesitas.

      Cualquier duda por aquí ando.

      Muchas gracias.

      Eliminar
    2. Muchas gracias a vos Miguel, por tu trabajo, por responder y la explicación, pronto los pondre en practica.

      Un saludo y lo mejor para vos.

      Eliminar
  17. Hola Miguel, ante todo que tengas un año repletos de salud y grandes éxitos.
    Recpecto de botonos de redes: Los tengo en la barra lateral derecha pero quiero ponerlos al final de las entradas. Me parece que quedan más a la mano.
    Los hice con un mapa de imagen y luego un gadget de Html/Java script. Todo muy bien y me funcionan. En vista que hice un cambio, sé que debo hacer otro mapa de imagen pero, como irán al final de las entradas, cómo hago?, dónde los inserto?. Con mapa de imagen creo que me da la posibilidad de colocarle unos avisos cuando colocas el cursor: sígueme, leéme, etc en cada red social. Podrás ayudarme por favor? Y por último, sabes que hace meses estoy con ésto, me faltan unos pequeños ajustes de letra y de títulos para empezar a publicar (supuestamente lo iba a hacer el 1º de enero), le he cacharreado arañando aquí y allá. Podrás ayudarme, por favor?. Mi blog es:
    http://pintandoletrasconvictoria.blogspot.com.co/
    Mil y mil gracias.

    ResponderEliminar
  18. Hola,
    tienes la plantilla de ejemplo libre para descarga junto a las instrucciones de cómo hacerlo en el tutorial. La idea es que busques id='shareButtons' y pongas justo debajo tu código para botones de redes sociales.

    Un saludo y muchas gracias a ti por participar.

    ResponderEliminar
  19. Estimado Miguel, he estado leyendo varias páginas buscando como colocar el botón de compartir en facebook para cada publicación. Estoy utilizando una plantilla de vista dinámica ya que me parece más apropiada para los contenidos, aprendiendo y revisando cómo poner el tiro blog he visto que los códicos de html son distintos si la plantilla es dinámica. En mis entradas sólo sale el botón de compartir en twitter y el de "me gusta" de facebook sin embargo no puedo colocar el de compartir como he indicado. Reviso esta publicación tuya pero los códigos que indicas no los localizo al buscar con control f no se si será que como es la plantilla dinámica es distinto.
    te dejo la dirección, está en contrucción: miradaycritica.blogspot.com

    ResponderEliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.