martes, 5 de febrero de 2013

Blogger: widget para votar/valorar posts (rating posts)

En el artículo de hoy os mostraré un

widget

que podéis utilizar en

Blogger

(o cualquier otro CMS como

Wordpress, Drupal,

...) que permite

votar/valorar posts

y muestra una media de todas las votaciones así como el detalle de todos votos que ha habido de cada tipo.


En este sentido, el mejor

widget

que he encontrado para

votar/valorar posts

es el rating-widget y entre sus características destacan:

  • Es multidioma con la posibilidad de elegir entre más de 40 distintos.
  • Podemos personalizar la forma en la que se visualizan los votos/valoraciones de los posts: estrellas, favor/contra, colores, tamaños,...
  • Permite definir tipo de letra, tamaño, color, personalizar los textos...

Vamos, que te lo puedes personalizar para que difícilmente te encuentres otro igual, je je je...No os voy a dar los detalles de cómo añadirlo en vuestro sitio ya que en su blog ya está explicado con suficiente detalle... eso sí, dentro del tutorial explica que puedes añadirlo pulsando directamente el botón "Add to

Blogger

" pero no conseguí que funcionara, al final lo hice copiando el código que genera y añadiéndolo a la plantilla de este

blog

(puedes ver el resultado en el pie de página, junto a los iconos de compartir en las redes sociales).

El código que te genera es similar al siguiente (dependerá de tu user-key y los valores con los que lo hayas personalizado):

<!-- Add this element exactly where you want the Widget to appear -->

<div class="rw-ui-container rw-urid-1"></div>

<!--
    You can add more Rating-Widgets in your site,
    just pick some new rating-widget-unique-id (must be positive integer)
    For example (rating-widget-unique-id = 38):
    <div class="rw-ui-container rw-urid-38"></div>
-->

<!-- Add this javascript code immediately before the </body> tag -->
<div class="rw-js-container">
    <script type="text/javascript">
        // Async Rating-Widget initialization.
        function RW_Async_Init(){
            RW.init("2D26808A85BE11723B047Axxxxxxxxxx",
            {
                advanced: {
                    font: {
                        hover: {
                            color: "#888888"
                        },
                        color: "#888888",
                        type: "verdana",
                        size: "10px"
                    },
                    layout: {
                        align: {
                            hor: "left"
                        },
                        dir: "rtl",
                        lineHeight: "18px"
                    },
                    text: {
                        rateAwful: "Pésimo",
                        ratePoor: "Malo",
                        rateAverage: "Regular",
                        rateGood: "Bueno",
                        rateExcellent: "Excelente",
                        rateThis: "Valora este artículo",
                        vote: "Valorar",
                        votes: "Valoraciones"
                    }
                },
                lng: "es",
                theme: "star_quartz",
                type: "star"
            });
            RW.render();
        }

        // Append Rating-Widget JavaScript library.
        if (typeof(RW) == "undefined"){
          (function(){
             var rw = document.createElement("script");
             rw.type = "text/javascript"; rw.async = true;
             rw.src = "http://js.rating-widget.com/external.min.js?t=js";
             var s = document.getElementsByTagName("script")[0];
             s.parentNode.insertBefore(rw, s);
          })();
        }
    </script>
</div>

Hasta aquí todo normal, lo añades en

Blogger

(directamente a la plantilla o añadiendo un gadget de tipo HTML/Javascript), te aparece el

widget

, pruebas a

votar/valorar un post

y perfecto... vas a otro post y upsss, sale el voto del post anterior... es decir los votos son globales para todo el sitio!!! Vamos a solucionarlo, si os fijáis dentro del código que habéis pegado hay el siguiente texto comentado:

<!-- Add this element exactly where you want the Widget to appear -->

<div class="rw-ui-container rw-urid-1"></div>

<!--
    You can add more Rating-Widgets in your site,
    just pick some new rating-widget-unique-id (must be positive integer)
    For example (rating-widget-unique-id = 38):
    <div class="rw-ui-container rw-urid-38"></div>
-->
...

Nos indica que podemos añadir el

widget

N veces en nuestro blog para tener N votaciones si cada vez le indicamos un número entero diferente en la primera etiqueta <div>:

<!-- Add this element exactly where you want the Widget to appear -->

<div class="rw-ui-container rw-urid-[Nº entero diferente]"></div>
...

¿Y cómo hacemos esto en

Blogger

? Muy sencillo, utilizamos la potencia de las plantillas de

Blogger

para poner como entero que identifique el

widget

el identificador del post que genera

Blogger

, así de esa manera cada vez que añadamos un post a nuestro blog tendremos un

widget

con un nuevo identificador y por tanto una nueva votación para nuestro nuevo post. Es tan sencillo como cambiar la primera etiqueta <div>:

<!-- Add this element exactly where you want the Widget to appear -->

<div class="rw-ui-container rw-urid-1"></div>

...

por la siguiente:

<!-- Add this element exactly where you want the Widget to appear -->

<div expr:class=’"rw-ui-container rw-urid-"+data:post.id’/>

...

Volvéis a probar y solucionado!!! Cada post tiene su propia votación/valoración!!! Ahora sólo se trata que personalicéis el

widget para votar/valorar posts

a vuestro gusto y listos, a recibir feedback de vuestros lectores.

Y hasta aquí el artículo de hoy, espero que os haya sido interesante, podéis empezar por votarlo (por supuesto como excelente, ja ja ja) y luego añadir el

widget

a vuestro blog. Recordad también que dentro de

areaTIC

podéis encontrar otros artículos, no dudéis en consultar nuestro archivo; también puedes seguirnos por RSS o las principales redes sociales (twitter, facebook, linkedin...)


19 comentarios:

MARISTES TERCER dijo...

He puesto el código de arriba en la plantilla
si pongo class"rw-ui-container rw-urid-1"> me funciona pero sólo cuenta un voto y es el último el que aparece en el ranking.
Si pongo lo de expr:class=’"rw-ui-container rw-urid-"+data:post.id’/> me da error: falta DDIIVV (lo pongo así porque sino no me permite publicarlo
En cambio a vosotros os aparecen Valoraciones 2

MARISTES TERCER dijo...

He puesto el código de arriba en la plantilla de mi blog.
He creado una entrada con un escrito para votar. Al final de la entrada y después del cuento pongo el código. Mi idea es hacer ésto para cada una de las entradas y así los niños pueden votar los cuentos de los demás.
si pongo class"rw-ui-container rw-urid-1"> me funciona pero sólo cuenta un voto y es el último el que aparece en el ranking.

Si pongo lo de expr:class=’"rw-ui-container rw-urid-"+data:post.id’/> me da error: falta DDIIVV (lo pongo así porque sino no me permite publicarlo

En cambio a vosotros os aparecen Valoraciones 2
¿Dónde puede estar el error?
Gracias

David Berdié Escolano dijo...

Hola,

Fíjate bien en el código del artículo, asegúrate de eliminar el </div> que hay tras <div expr:class=’"rw-ui-container rw-urid-"+data:post.id’/>.

Si sigue sin funcionarte envíame el código modificado a areatic.net@gmail y me lo miro con detalle para darte la solución.

Felicidades por el blog, se notan las horas dedicadas, hay gran cantidad de contenidos. Saludos!!

MARISTES TERCER dijo...

Muchas gracias David por el asesoramiento en el sistema de votaciones por estrellas. Me funciona perfectamente y como yo quería.
Gracias también de parte de mis alumnos. Creo que va a ser una idea fantástica y motivadora en el aula poder tener un sistema para votar los trabajos.
Gracias también por el asesoramiento en los menús deslizantes.
Ahora puedo cambiar los colores y me queda mucho más bonito.
He enlazado areatic y todoblogger en mi blog como muestra de mi agradecimiento.
Muchas gracias

David Berdié Escolano dijo...

De nada Francisco, me alegro que todo te funcione y que lo disfrutes tanto tú como tus alumnos. Gracias por el enlace a areaTIC.net, todoblogger es competencia nuestra pero la verdad, tiene artículos muy interesantes, es un buen blog.

Anónimo dijo...

'Hay algún sitio donde pueda ver los post más votados y demás?

David Berdié Escolano dijo...

Si utilizas Wordpress puedes utilizar el plugin correspondiente para hacer lo que indicas, puedes encontrar más info en http://rating-widget.com/get-the-word-press-plugin/.

Si utilizas Blogger no es posible aunque no se descarta que esté en un futuro, al menos eso es lo que me han contestado desde el área de soporte del plugin.

Guía edit dijo...

no me funca, me pasa lo mismo que a MARISTES TERCER, no funciona creando un rating para cada post

David Berdié Escolano dijo...

Seguramente te pase lo mismos que a MARISTES TERCER, tenía un error en el html/javascript que al final solucionamos. Si quieres indícame la url de la página que no te funciona y el las 4-5 líneas que tienes alrededor del código:

<div class="rw-ui-container...

A ver si te puedo echar una mano, saludos.

Alex Arone dijo...

Hola Estimado David.
Muy Interesante tu post, pero pena que no puedo hacerlerlo funcionar, estoy armando un blog de videos en blogger, espero me puedas dar una mano y que funcione seria fabuloso.

Este es mi blog => http://mejores-videos-graciosos.blogspot.com/

Saludos Cordiales Alex

David Berdié Escolano dijo...

Gracias Alex, me alegro que te haya gustado. He visitado el blog que indicas y no veo el plugin de rating posts. Si quieres envíame las 4-5 líneas que tienes alrededor del código:

<div class="rw-ui-container...

Es muy posible que tengas algún error de html/javascript, ya me he encontrado unos cuantos casos; con el código a ver si te puedo ayudar a resolver el problema. Saludos!!

Alex Arone dijo...

Hola David.
Muchas gracias por tu apoyo, mas bien te dejo mi correo nejoresvideosgraciosos@gmail.com para que me envies un mensajito y yo te voy a reenviar mi plantilla blogger aver si me puedes ayudar.

Saludos y Muchos Exitos
Alex

David Berdié Escolano dijo...

Ok, contacto contigo vía email...

Abel Martinez dijo...

david berdie escolano mira el primer codigo donde lo pongo en que sitio o es en un gatget

David Berdié Escolano dijo...

Yo lo tengo situado en la plantilla de blogger, en los posts, bajo los botones de las redes sociales. He visto tu blog http://wikosoftplanetpro.blogspot.com.es/, puedes hacer exactamente lo mismo. Si lo pones en un gadget estarás valorando el sitio y lo que tiene realmente interés es que se valore cada uno de los posts. Espero haberte ayudado, suerte!

SukakonStories dijo...

Hola, muchas gracias por la información, me sirvió mucho.

Pero tengo una duda muy grande que nadie me ha podido responder, por favor ayudeme:
¿Cómo puedo usar o tener ambos sistemas de votación, tanto estrellas como pulgares?

Lo pregunto porque tanto en su pagina oficial:
http://rating-widget.com/
Como en esta otra:
http://support.polldaddy.com/rating-widget/#installingyourratingmultipletimesonsamepage

Tiene ambos sistemas, pero si yo hago el de estrellas, por ejemplo, al copiar el código donde aparecerá el widget, aparece de puras estrellas.

En otras palabras, ¿cuál es el código javascript para que pueda usar el sistema de votación de estrellas y pulgares en mi blog?

Gracias por su respuesta, espero me haya entendido.
POR FAVOR NECESITO SU AYUDA.

David Berdié Escolano dijo...

Disculpa el retraso en la respuesta pero ya se sabe, en navidades es difícil estar pendiente del blog. He revisado las 2 páginas que indicas y lo que hay son 2 sistemas de votaciones independientes; no lo he probado pero creo que lo que deberías hacer es 2 veces el proceso de insertar votaciones, uno para estrellas y otro para pulgares, tendrás 2 user-key diferentes que te permitirían tener 2 sistemas de votaciones independientes. Pruébalo y si tienes cualquier problema me avisas y lo revisamos. Feliz año!

Hoover Baquero dijo...
Este comentario ha sido eliminado por el autor.
Marie Winglies dijo...

Hola, tengo un problema con esto. Lo de las votaciones queda al final de las entradas, pero el nombre del widget queda al costado con los otros widgets. Quiero que quede en cada entrada.

Publicar un comentario en la entrada