9/18/2012

Estrellas para votar en tu blog en español

En el antiguo "Balcón de Jaime", que ya crecidito ha abandonado, he encontrado una adaptación a un gadget que existía solamente en inglés pero que Jaime me ha ahorrado la laboriosa tarea de modificar para que se vea en español.

Un gadget algo admirado por muchos bloggers con las típicas estrellas de valoración que un gran número de sitios web poseen al final de sus artículos, vídeos o imágenes.

Es sin duda un artilugio muy atractivo que permite a los lectores de un espacio dar su opinión sobre el contenido publicado.

El mismo Jaime había publicado una entrada anterior en la que introducía un script proporcionado por el servicio Outbrain y con el que conseguíamos esto mismo. Desafortunadamente, las estrellitas tardaban algo en cargar e incluso mostraban publicidad ajena al blog.

Por ello decidió hacer uso de JS Kit, un script cuya creación está en inglés y por tanto poco reconocido en los blogs de lengua latina o castellana. Además, pensó que mostrar el widget en inglés sería una desventaja para muchos por lo que tradujo enteramente el script y obtuvo un resultado como el que se muestra a continuación:


estrellas blogger, valorar estrellas blogger entradas, estrellas valoracion blogger, blogger rating widget, post blogger tips, blogger help


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta <data:post.body/> en tu plantilla y justo debajo añade lo siguiente:

<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>

De esta forma, las estrellas aparecerán en todo momento al pie de tus artículos.

Si prefieres mostrar las estrellas justo debajo del título de tus posts, añade el código bajo esta otra línea:

<div class='post-header-line-1'/>

Para hacer que únicamente se vean al abrir una entrada individualmente utiliza este otro código (en lugar del primero):

<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:3px;'/>
<div class='js-kit-rating' expr:path='data:post.url' expr:permalink='data:post.url' expr:title='data:post.title'>
</div>
</b:if>

Ahora encuentra la etiqueta </body> y encima agrega este bloque:

<div id='blEstrellasartic' style='padding-right: 6px;text-align: right;'><a href='http://goo.gl/VHSIZ'><img src='http://2.bp.blogspot.com/_Bvhqq3YFEx4/TQUlVDRWxpI/AAAAAAAAAjM/RPzpn7qR5uM/s320/blestrellas.png'/><script src='https://sites.google.com/site/scriptsbalcon/b/blestrellas%282%29.js'/></a></div>

Guarda la plantilla para terminar.

Si quieres puedes bajar el archivo Javascrip marcado en azul y alojarlo en tu servidior personal o en todo caso recurrir a esta otra dirección donde yo alojo mi propio archivo personal.

https://dl.dropbox.com/u/14895124/Javascript/blestrellas%282%29.js

 Actualización:

El amigo lector Leolux no acerca el siguiente código que solucionaría la falla de este gadget cuando el navegador es Explorer.

Comparto pues el código para colocar estrellas de valoración en blogger resolviendo el problema de que éstas no se visualicen al utilizar Internet Explorer.
Simplemente añadiendo la URL del archivo "js" en dos etiquetas diferentes a modo que una de ellas sea funcional con el navegador de Microsoft.
El bloque quedaría de la siguiente manera:


<div id='blEstrellasartic' style='padding-right: 6px;text-align: right;'><a href='http://goo.gl/VHSIZ'><img src='http://2.bp.blogspot.com/_Bvhqq3YFEx4/TQUlVDRWxpI/AAAAAAAAAjM/RPzpn7qR5uM/s320/blestrellas.png'/><script src='https://sites.google.com/site/scriptsbalcon/b/blestrellas%282%29.js'/>
<param name='js-kit-rating' value='https://dl.dropbox.com/u/102995454/EstrellasValoracion.js'/>
</a></div>

12 comentarios:

  1. Hola! Gracias por tu aporte.
    Hace tiempo que utilizo ese mismo sistema en mi blog pero con alojamiento propio del archivo .js.
    El problema reside en que las estrellas no son visibles con Internet Explorer, o al menos yo y varias personas a las que he preguntado no las ven cuando utilizan ese navegador.
    Habría algún método para corregir ese problema?

    Muchas gracias!

    ResponderEliminar
  2. Gracias Leolux por tu comentario. Lamentablemente hace tiempo este sistema de estrellas era nativo en Blogger pero fue desplazado por las expresiones de agrado, desagrado que hoy se usan y al final terminaron eliminándolas.
    Hace tiempo que Explorer no acuerda en la implementación de parámetros que hacen a los estilos CCS o funcionalidades que consideran innecesarias. Incluso en mis templates aclaro que los pruebo con todo MENOS Explorer.
    Si llego a encontrar alguna solución la incluiré en este post, pero dudo que exista.

    Un abrazo.

    ResponderEliminar
  3. http://www.thesimplexdesign.com/2012/09/graddit-star-rating-for-blogger.html

    ResponderEliminar
  4. Hola de nuevo Opin!
    He encontrado la solución. Del mismo modo que necesitamos dos etiquetas diferentes con la dirección del archivo js para poner una presentación flash, una para mozilla y otra para explorer, yo he hecho lo mismo y he añadido debajo de (escribo mal scrip porque sino no me deja publicar el comentario sale eso de "Su HTML no es aceptable: Etiqueta no permitida: SCRIP" y lo mismo con "para m".



    esto otro:



    Lo mejor de todo es que funciona!

    Un saludo!

    ResponderEliminar
  5. Leolux. Me alegra mucho que hayas encontrado una solución a este problema. Si así lo prefieres te agregamos al post, pero para poder dar una mejor idea te recomiendo leer la entrada
    http://generacionopin.blogspot.com.ar/2011/11/poner-codigo-html-en-un-post.html
    donde con una simple aplicación se genera el código para poder publicar en los post o en comentarios sin que el sistema se enoje ;) y mande un "Su HTML no es aceptable".

    Un abrazo.

    ResponderEliminar
  6. Para la próxima vez ya sé que debo hacer si quiero insertar un código html. Gracias Opin!
    Sigo teniéndo un problema con la valoración con estrellas, hace unos meses de repente se resetearon las votaciones y se pusieron todas a cero. Decidí entonces descargar el archivo js y alojarlo personalmente puesto que no era yo quien lo alojaba. Al hacer esto ahora resulta que cuando hago la vista previa de la plantilla están las votaciones correctas, con el número de personas que habían votado cada entrada, pero cuando entro al blog de manera normal siguen a cero.
    La verdad es que es algo extraño. Si se te ocurre alguna idea por favor házmela saber.
    Respecto a agregarme al post, lo dejo a tu elección.

    Un saludo y muchas gracias!

    ResponderEliminar
  7. Leolux, mis conocimientos no llegan a tanto, pero creo que en el archivo js no se acumulan datos de ningún tipo y por ello todos pueden usar el mismo archivo desde una misma locación.
    Lo más probable es que los votos se guarden en un área de memoria del mismo blog y que la misma tenga similares características (o use lo mismo) que la funcionalidad "Reacciones"

    Un abrazo y si puedes comparte tu código modificado

    ResponderEliminar
  8. Hola de nuevo Opin!
    Comparto pues el código para colocar estrellas de valoración en blogger resolviendo el problema de que éstas no se visualicen al utilizar Internet Explorer.
    Simplemente añadiendo la URL del archivo "js" en dos etiquetas diferentes a modo que una de ellas sea funcional con el navegador de Microsoft.
    El bloque quedaría de la siguiente manera:
    <div id='blEstrellasartic' style='padding-right: 6px;text-align: right;'><a href='http://goo.gl/VHSIZ'><img src='http://2.bp.blogspot.com/_Bvhqq3YFEx4/TQUlVDRWxpI/AAAAAAAAAjM/RPzpn7qR5uM/s320/blestrellas.png'/><script src='https://sites.google.com/site/scriptsbalcon/b/blestrellas%282%29.js'/>
    <param name='js-kit-rating' value='https://dl.dropbox.com/u/102995454/EstrellasValoracion.js'/>
    </a></div>

    Espero que sea de ayuda para los demás.
    Opin, muchas gracias por todo.
    Un saludo!

    ResponderEliminar
  9. Hola, he seguido todos los pasos pero nada, hace un par de meses lo hice tal cual lo indican en el balcon de jaime y me salio sin problemas, pero un dia desaparecieron de mis entradas. He conmprobado que los codigos siguen tal cual, de hecho, lo volvi a hacer todo. Hoy os he encontrado y he copiado la acualización que indicais por si es problema de que no se vea con mi explorador (uso el chrome) y nada de nada. Me sabriais decir si hay solución. Gracias

    ResponderEliminar
  10. Hola María. Lamentablemente me ha ocurrido lo mismo. Verifique los archivos y el tema no pasa por allí, es Blogger o los navegadores que han cambiado algo y nos ha dejado sin esta implementación.
    Yo la he cambiado por otra que funciona muy bien y que posiblemente postee dentro de poco. Fíjate en esta dirección:

    http://www.thesimplexdesign.com/2012/09/graddit-star-rating-for-blogger.html

    Graddit funciona muy bien y una parte puede ser modificada para que figure en castellano.

    Puede verla en el blog donde la he aplicado:
    http://nosomosescritores.blogspot.com.ar/

    Saludos

    ResponderEliminar
  11. Respuestas
    1. Siempre ha dado problemas, así que he tachado el post pero hay recomendaciones en los comentarios que pueden servirle a alguien.

      Eliminar

Nota: solo los miembros de este blog pueden publicar comentarios.