Botones sociales en plantillas modificadas | Oloblogger Hace ya un tiempo que Blogger puso un sistema "de serie" para poder mostrar fácilmente botones socia...

6 de octubre de 2010


34☆
Botones sociales en plantillas modificadas

Hace ya un tiempo que Blogger puso un sistema "de serie" para poder mostrar fácilmente botones sociales con enlaces a Twitter, Facebook, Buzz... que permiten que un visitante pueda enviar fácilmente tus entradas a cualquiera de esos servicios, por correo o incluso publicar una referencia en otro blog Blogger.

La forma de que se muestren es simple. Hay que entrar por Diseño > Elementos de página > Entradas del blog > Editar y allí marcar la opción "Mostrar botones para compartir".


Sin embargo, como en otras ocasiones, las plantillas modificadas se pueden ver afectadas negativamente por estas innovaciones. No es que fastidien nada, no. Simplemente es que las novedades no se incorporan debidamente y los nuevos cacharritos pueden no funcionar.

El motivo es que estas nuevas líneas de código (no son otra cosa mas que eso, líneas de código) se añaden automáticamente al código general de una plantilla. Para ello, Blogger toma unas referencias que existen en las plantillas estándar que nos regala, pero que pueden no estar en otras que hemos modificado sustancialmente o que incluso hemos tomado de otros sitios. Así, cuando no encuentra esas referencias, no se inserta todo el código necesario y es cuando la cosa no termina bien.

La solución es entonces, incorporar manualmente lo que Blogger se haya podido comer y que en este caso concreto, suele ser la llamada mediante un include al correspondiente includable (o rutina) que realmente tiene el código del artilugio. En este caso...

<b:include data='post' name='shareButtons'/>


Este tipo de botones van normalmente en el pie del post, por lo que habrá que insertar el código dentro del DIV formateado con la clase post-footer, aunque realmente podeis poder la llamada en cualquier otro sitio que seais capaces de identificar en vuestra plantilla.



En la mayor parte de los casos, con insertar esa simple línea los problemas se solucionan, pero si aún así los botones siguen sin verse en tu blog, todavía puedes intentar algo más. Se trataría de insertar, además del anterior, también el código completo del artilugio, o sea, el includable que contiene la rutina.

Sería este y puede ir detrás o delante de cualquier otro includable. Como referencia, en las plantillas clásicas viene justo antes de <b:includable id='backlinks' var='post'>. Suerte.


<b:includable id='shareButtons' var='post'>
<b:if cond='data:post.sharePostUrl'>
<a class='share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.emailThisMsg/></span></a>
<a class='share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=270,width=475&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'>
<span class='share-button-link-text'><data:top.blogThisMsg/></span></a>
<a class='share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a>
<a class='share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=430,width=640&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a>
<a class='share-button sb-buzz' expr:href='data:post.sharePostUrl + &quot;&amp;target=buzz&quot;' expr:onclick='&quot;window.open(this.href, &quot;_blank&quot;, &quot;height=415,width=690&quot;); return false;&quot;' expr:title='data:top.shareToBuzzMsg' target='_blank'>
<span class='share-button-link-text'><data:top.shareToBuzzMsg/></span></a>
</b:if>
</b:includable>

¿Vemos otro post al azar por si le encuentras utilidad?

Otras entradas que te podrían interesar:


34 comentarios:

  1. Gracias Oloman.
    No los tenia puestos.
    Saludos

    ResponderSuprimir
  2. Hola Oloman :D

    Precisamente eso estaba viendo ayer, pues en algunas de las plantillas no aperece, lo que hicé es mover manulamnete el código completo, a partir de las clases de los botones <a class='share-button sb-email'.......y si se ven perfectamente, lo puse en el post-fotter en la segunda linea, mi duda es si no habrá algún inconveniente ya que eliminé el identificador (id='shareButtons') y la condición, qué piensas?

    Hice la prueba aquí: http://cuentosdenochess.blogspot.com/

    ResponderSuprimir
  3. ¡Gracias Oloman! Con la primera opción ha sido suficiente. :)

    Una pregunta sobre estos artilugios: ¿se puede hacer algo similar con "Enlaces a esta entrada"? Ya sé que Blogger en ésto va cuando quiere, pero he visto en algunos blogs que últimamente sí les funciona.

    Mil gracias y saludos. :D

    ResponderSuprimir
  4. Gildo, me ha hecho gracia tu frase. Sólo le ha faltado un adjetivo para que significara otra cosa ¿No los tenías BIEN PUESTOS?!! :D

    Karla, lo más "estético" para la plantilla es dejar el código dónde estaba (en los includables) y luego poner la "llamada" en dónde dices (post-footer). Pero aparte de eso, creo que no te debería dar más problemas que el siguiente que comento. En ese sitio, los botones se verán siempre en cualquier tipo de página (Inicio, navegación por etiquetas, etc.). Si lo compruebas, verás que en esos casos los botones te enlazan con la URL del navegador, que será la correspondiente al tipo de páginas mencionado, cuando lo que se pretende es enlazar con determinado post. Aunque por facilidad dije que se pusiera en el post-footer, en mi opinión es casi mejor ponerlo antes de los comentarios y, en cualquier caso, dentro de un condicional que sólo ejecute cuando estamos en entradas individuales (item).

    Olvido, estás teniendo mala suerte conmigo, porque desconozco las respuestas a tus preguntas. En este caso, nunca me he metido a ver como funcionan los backlinks. Particularmente me funcionan y por eso no he tenido la necesidad de averiguar nada sobre ellos. Además me parece un código algo complicado. Lo siento.

    ResponderSuprimir
  5. Oh, ningún problema, gracias igualmente. Se me ocurrió porque ya es la segunda vez que se me soluciona algo añadiendo la "llamada" a uno de estos objetos, por lo que pensé que quizás sea un problema común a los artilugios que aparecen en "Opciones de la página de entrada". Tendré que mirar.

    Saludos. :D

    ResponderSuprimir
  6. Muy util el articulo, dejame decirle que me gusta mucho el blog , es de mucha utilidad, Saludos y que sigan los exitos!!!!!

    ResponderSuprimir
  7. HOLA.. LA VERDAD A MI NO ME FUNCIONO.. ES QUE TENGO UNA PLANTILLA QUE BAJE DE BLOGERTEMPLATES Y NO PUEDO MODIFICARLA

    ResponderSuprimir
  8. Hmm... todas las plantillas Blogger pueden ser modificadas desde Diseño > Edición de HTML... que yo sepa.

    ResponderSuprimir
  9. hola!
    antes de nada, quería felicitarte por el blog, me encanta!
    estoy un poco perdida, porque estoy haciendo un blog,pero no se nada de informática, y he puesto lo de los botones sociales, pero no se como debo indicar cúal es el enlace..porque, tendré que ponerlo,no?
    Gracias!

    ResponderSuprimir
  10. No es necesario Sara. Al insertar los botones, el código se ajusta para que vayan a los correspondientes sitios con la dirección de la entrada en que se encuentran.

    ResponderSuprimir
  11. Hola Oloman, no he tenido suerte. Esta plantilla (Aspire) es de las duras. He seguido tus instrucciones e incluso he experimentado un poco, pero no consigo ningún resultado. Buscaré otras variantes. Gracias!
    http://www.laedadeoro.org/

    ResponderSuprimir
  12. En un principio, si introduces los dos trozos de código que aporto, no deberías tener problemas. Sin embargo, no puedo comprobar nada porque en tu plantilla no están ninguno de los dos actualmente. Suerte con las variantes :D

    ResponderSuprimir
  13. Gracias, Oloman. Seguiré intentándolo.

    ResponderSuprimir
  14. Hola. Lo tenía pendiente, pues lo intenté hace tiempo y no se mostraban de manera automática. Siguiendo tus instrucciones ya están visible. Gracias por compartir.
    Una pregunta. Aunque es aspecto no me disgusta ¿se pueden dar formato o cambiar de aspecto a los iconos? Un saludo.

    ResponderSuprimir
  15. Creo que sí amador. Podrías intentarlo incluyendo la clase de cada botón en la parte CSS y forzando un background nuevo. Por ejemplo, para el primer botón que lleva class='share-button sb-email', tendrías que incluir esto:

    .share-button sb-email {background:url(DIRECCION_NUEVO_BOTON) !important;}

    Por defecto esa clase tiene asignado un fondo que es el que forma el dibujo del botón y por eso hay que incluir !important.

    ResponderSuprimir
  16. Muy bueno, aunque me encantaría que si pudieras explicaras como agregar los botones de Facebook y Twitter, tal como aparecen al pie de tus post.
    Estoy intentando hacerlo pero no hay manera... días llevo con ello y el de facebook no me va y el de Twitter no logro colocarlo donde quiero :-(
    Un saludo, gracias.

    ResponderSuprimir
  17. Gracias. Lo intentaré en cuanto tenga más claro lo que quiero. Un saludo.

    ResponderSuprimir
  18. El Cholija, como no eres el primero que tiene problemas con eso, en unos días publico algo al respecto. Espero que sea lo que necesitas.

    ResponderSuprimir
  19. Hola Oloman. Yo tengo un problema. No los tengo marcados en la opción que mostraste arriba, y sin embargo aparecen debajo de cada post. Cómo hago para sacarlos?
    Muchas gracias!

    ResponderSuprimir
  20. Roma, es posible que te falte un condicional que comprueba si la opción está marcada o no. En ese caso, puede ocurrir lo que comentas de que salga siempre.

    Para eliminarlos definitivamente, puedes borrar todas las líneas de código que aquí se muestran, aunque sería suficiente con eliminar la que se ofrece sola en primer lugar:
    <b:include data='post' name='shareButtons'/&gtr;

    ResponderSuprimir
  21. Bien, ¿qué ocurre si todavía conservas la plantilla antigua de Blogger? ¿Cómo se colocan esos malditos botones?

    Estoy harta de buscar.

    Gracias.

    ResponderSuprimir
  22. Mara tienes que buscar el código que los desarrolla y dónde venga "data:post.url", lo cambias por "$BlogItemPermalinkURL$". No tengas en cuenta las comillas.

    No sé si te valdrá para estos botones en concreto pero sí te vale para cualquiera de los otros que te proporcionan directamente los distintos servicios. Aquí un ejemplo.

    ResponderSuprimir
  23. Hola oloman,
    queria saber si me puedes ayudar con algo relacionado a esto. yo quiero que en esos enlaces a la hora de que la gente publique en facebook se vea el titulo del post y el inicio del post. Es que a mi se me ve el titulo del post y la descripcion que tengo en mi blog. Sabes si se puede hacer lo que digo??Saludos y gracias

    ResponderSuprimir
  24. Pues seguro que tiene que haber alguna forma Baul Extremeño, pero no controlo yo el tema ese de Facebook. Incluso puede ser cosa de las plantillas del nuevo diseñador... Lo siento, pero eso no sé solucionarlo.

    ResponderSuprimir
  25. Hola Oloman
    He utilizado el código html que nos proporcinas para los botones, ya que activandolos estos no aparecían. El problema es que he estado probando si funcionaban y me temo que el boton de facebook no va bien. ¿Cual puede ser el problema?
    Te dejo el blog para que puedas comprobarlo.
    http://yournewenglishteacher.blogspot.com/

    ResponderSuprimir
  26. Laura, probando en tu blog, a mi me funcionaron bien todos. Quizás no estabas logueada en Facebook o algo así...

    ResponderSuprimir
  27. Muchas gracias, pero no logro entender, soy novato en esto, pero no logro integrarlo

    ResponderSuprimir
  28. Junior, preferiría que lo entendieras, pero si no es así, intenta seguir al menos las instrucciones.

    ResponderSuprimir
  29. Hola Oloman,
    Tengo un blog y cuando quiero compartirlo en facebook, en vez de salir la descripción, sale un comentario de la entrada. Si no hay comentario no sale nada. Me gustaría que saliese la descripción de mi blog
    ¿Me puedes ayudar? Gracias
    El blog es mnati.blogspot.com

    ResponderSuprimir
  30. Lo he estado viendo Nati, pero no sé cual es el problema. Pienso que es cosa del propio sistema de Blogger para enviar entradas a Facebook, ya que en mis pruebas, con el botón "Me gusta" y el de "Compartir" (originales de FB), sí que sale la descripción.

    ResponderSuprimir
  31. todo esta perfecto,pero no explicas donde hay que poner los codigos o k hay que hacer!! Mal post!! :(

    ResponderSuprimir
  32. Puede Marco Antonio, pero lo explico lo mejor que puedo... Y sí he indicado el sitio dónde se debe incorporar cada uno de los dos trozos de código que componen este artilugio. Sólo hay que leer despacio lo que escribí. Otra cosa es que no pueda concretar más para decir la línea exacta para cada una de las miles de plantillas que existen.

    ResponderSuprimir