Como añadir un sistema de votación a tus posts

Anteriormente uno de nuestros posts lo dedicamos a los sistemas de puntuación que existen para valorar los artículos escritos, el blog en general o cualquier cosa que queráis poner a votación. Estos sistemas pueden sernos muy útiles por el simple hecho de ser un sistema inmediato ya que para mucha gente puede resultar una tarea muy tediosa comentar en un post y dejar su opinión.

En este post explicaremos como incluir el sistema a tu propio blog de Blogger, siendo Spotback el servicio que vamos a usar.

En primer lugar acudimos a la pagina donde Spotback nos proporcionara el servicio, hacemos clic en "Get it!", posteriormente podemos ir directamente a la galería de "widgets" donde podréis elegir entre una gran variedad de modelos de votación y luego registraros, o viceversa. Una vez registrados y elegido el modelo que más nos guste nos dirigen a una página con los diferentes códigos para Blogger, tanto el viejo como el nuevo. También está disponible para Wordpress, y para otros sistemas. En cada apartado del código encontrareis un enlace ("where do I embed this?"), que te enseñan donde introducir el código en la plantilla, en ingles. Sin embargo nosotros mostraremos como hacerlo para la versión más reciente de Blogger.

Antes que nada os enseñaremos a utilizar una utilidad adicional muy práctica que nos ofrecen, la posibilidad de editar el "widget" que elegisteis. Aun estando en la pagina donde nos muestran los diferentes trozos de código HTML podemos encontrar el enlace "widget editor" en donde nos permitirán hacer unas escuetas modificaciones (color de fondo, de letra…). Pero si queréis arriesgaros a una edición más avanzada solo haced clic en el enlace que indica "Advanced widget designer" mostrándonos una aplicación que nos permite añadir o quitar diferentes componentes de nuestro sistema de votación a la vez que podemos editar los ya añadidos.

Por ejemplo si clicamos en "Rater" podemos añadir más estrellas aumentando el número del rango máximo, si nos vamos al primer componente "Label" podemos modificar el texto que quieres que aprezaca, al igual que en las otras etiquetas de este tipo. Por otro lado tenemos el componente de las estrellas que si queremos posicionarlo en otro sitio tendréis que cambiar las coordenadas X e Y o también que se pueda volver a votar en "Re-rating".

En fin una vez tengamos nuestro "widget" como mas nos guste lo guardáis dándole al botón de la parte superior "Save" y posteriormente vais a la sección de "My widget" en donde encontraremos el nuestro en primer lugar. Muy importante que toméis nota del ID que es el numero que identifica al script, dado que lo necesitaremos más adelante.

Ahora en nuestro entorno de Blogger en la pestaña diseño/edición HTML marcamos expandir plantillas de artilugios e introducimos el siguiente código después de “<p class='post-footer-line post-footer-line-2'>……</p>”, reitero que no es dentro de esta clase sino después, es decir, después de “</p>” o dicho de otra forma, antes de “<p class='post-footer-line post-footer-line-3'>”.

<div class='sb_widget_ph_"AQUÍ PONDREIS EL NUMERO DE IDENTIFICACION DEL WIDGET(ID)SIN COMILLAS"  style='display:none'>
<b:if cond='data:post.dateHeader'>sb_post_date = &quot;<data:post.dateHeader/>&quot;;</b:if>
<b:if cond='data:post.labels'>sb_categories = &quot;<b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop>&quot;;</b:if>
sb_url_to_rate = &quot;<data:post.url/>&quot;;
sb_rated_title = &quot;<data:post.title/>&quot;;
sb_when_to_load = &quot;immediate&quot;;
try { var sb_dp = Date.parse(sb_post_date + &#39; &#39; + &quot;<data:post.timestamp/>&quot;); sb_rated_creation = isNaN(sb_dp)? new Date() : new Date(sb_dp); } catch (e) { sb_rated_creation = new Date(); }
</div>
<noscript><a alt='Rate everything widget' href='http://spotback.com'><img alt='user rating' expr:src='"http://spotback.com/images/rating.gif?q=" + data:post.url'/></a></noscript>

Y por ultimo pero no menos importante inserta este trozo de código justo antes de </body>

<script src='http://spotback.com/scripts/widgets/prepare.js?wid=AQUI TAMBIEN DEBEMOS PONER EL ID DEL WIDGET' type='text/javascript'></script>
<script type='text/javascript'>
var base$_WidgetManager_HandleControllerResult = _WidgetManager._HandleControllerResult;
_WidgetManager._HandleControllerResult = function() {
base$_WidgetManager_HandleControllerResult.apply(_WidgetManager, arguments);
try { SB.WGT.widgetsFromPlaceHolders(); } catch(e) {}
}
</script>

Bueno eso es todo espero que os haya sido de utilidad si tenéis algún problema no dudéis en comentarlo.