08 enero 2015

Widget de posts relacionados para Blogger (II): Shareaholic

En la entrada anterior hablábamos de como colocar un widget de posts o entradas relacionadas iniciando con una forma sencilla de colocarlos a través del widget de Linkwithin (ver entrada aquí). El día de hoy hablaremos de otra opción que si bien, es más complicada de colocar, definitivamente es mucho más completa que la de Linkwithin.

Y digo mas complicada, porque para utilizarla requiere registrarse y hacer una pequeña modificación en la plantilla del blog, algo que no a todos les gusta. Shareaholic es un proveedor de herramientas de publicidad para sitios web y blog, contando con varios gadgets que son de extrema utilidad para la publicidad de un blog. El uso de sus widgets es completamente gratuito y se pueden ser personalizados desde la propia web. 

Uno de estos widgets es el de 'Related Content' que es el que nos interesa. Para colocarlo en nuestro blog basta con seguir estos pasos:



Creando nuestra cuenta de Shareaholic y el widget de contenido relacionado
  1. Ir al sitio de Shareaholic
  2. Registrarse (sólo nos solicita un Email y una contraseña)
  3. Una vez registrados aparecerá una página con 3 opciones de widgets. A nosotros nos interesa la primera denominada 'related content', así que esa seleccionaremos presionando el botón 'Get Started'.
  4. Enseguida nos pedirá que añadir un sitio web. llenaremos los campos con los datos de nuestro blog y sus características. Al terminar seleccionar 'continue'
  5. Nos llevará a otro formulario que rellenaremos para añadir nuestro contenido relacionado. Lo llenaremos según nuestro gusto. 
  • NAME: como llamaremos al widget (ej. Widget de contenido relacionado).
  • HEADLINE TEXT: El texto que aparecerá arriba de las recomendaciones del widget (ej. ¡Hey! también puedes checar:)
  • CHOOSE A THEME: aquí escogeremos la personalización que más nos guste para nuestro blog.
  • NUMBER OF POSTS: El número de entradas que queremos que se muestren por entrada en nuestro blog.
Una vez terminado pondremos, finalizar.


Confirmando nuestro blog en Shareaholic

Nos pedirá que confirmemos el sitio. Para esto haremos lo siguiente:

  1. En nuestro escritorio de Shareaholic (el que apareció cuando terminamos de rellenar nuestro widget) veremos primero el nombre de nuestro blog y bajo ella tres botones. Haremos click en el botón denominado  'Get Setup Code' y copiaremos el código que nos dan.
  2. Iremos a nuestra plantilla de Blogger y guardaremos una copia de seguridad de la plantilla por si metemos la pata.
  3. Una vez hecho esto, seleccionamos 'Editar HTML'  y pulsamos ctrl+F para buscar dentro de la plantilla la etiqueta:

y pegaremos justo Arriba de éste código que nos ofrecen. Le damos guardar para continuar con nuestro proceso. ( si el sitio quedó verificado, veremos una palomita a un lado del nombre del blog):

A nosotros nos saldrá una barra verde sobre nuestro escritorio en Shareaholic con el mensaje de confirmación.


Colocando el widget de contenido relacionado en nuestro blog
Una vez confirmado el blog, seleccionaremos el botón 'save settings' obviamente para guardar la configuración, y a continuación saldrá en la sección de locations de nuestro escritorio de Shareaholic el widget:

A la derecha del nombre del widget hay unas opciones de las cuales seleccionaremos la de 'embet code' (</>)  y copiaremos el código que nos otorgan.


  1. Iremos a nuestra plantilla de Blogger (Blogger > nuestro blog > plantilla > Editar HTML): ¡No olvides guardar la plantilla de tu blog!
    En la sección plantilla vemos que bajo donde dice 'En vivo en el blog' se nos muestra una vista prediseñada de la plantilla
    y justo debajo, existe la opción 'Personalizar' y 'Editar HTML' Nosotros seleccionaremos esta última opción.
  2. Una vez dentro de nuestra plantilla HTML, pulsaremos ctrl+F para buscar dentro de la plantilla la etiqueta <data:post.body/>
  3. Pulsaremos intro dos veces para buscar la segunda etiqueta <data:post.body/>. En caso de que no obtuvieras los resultados esperados, aplica los cambios usando la tercera etiqueta o en las otras etiquetas hasta que des con la indicada. Checa muy bien este paso que es el que más problemas trae.
  4. Y justo debajo de esta etiqueta encontrada en el paso anterior, pegaremos este código:


y dentro de este código pegaremos el código que Shareaholic nos otorgó, quedando de esta forma:
<b:if cond='data:blog.pageType == "item"'>
<!--Entradas relacionadas con miniaturas. -->
<!--El script del proveedor que selecciones va debajo de esta linea -->
<div class='shareaholic-canvas' data-app='content_related' data-app-id='XXXXXXX'>
</div>
</b:if>
Quedando de la forma en como se muestra en la imagen:


Así es como se debería ver nuestra plantilla HTML con el Widget de LinkWhitin.


Guardaremos la plantilla y visualizaremos nuestro blog, para confirmar los cambios:
A veces el widget no aparece inmediatamente ya que depende de la
cantidad de entradas que contenga nuestro blog.
¿Puedes ver los cambios en tu blog? Puede que si la cuenta de Shareaholic es nueva o acabamos de confirmar nuestro blog, es posible que al colocar el widget, éste tarde un tiempo en aparecer (de 1 a 48 hrs.), dependiendo de la cantidad de posts que existan en nuestro blog (ya que el sitio tiene que indexar cada uno de nuestros artículos). 

No es de preocuparnos, porque si relizamos los pasos correctamente, no tendremos problema alguno, así que ¡Felicidades! ya tienes tu widget de contenido relacionado instalado.

Otros posts de la serie:
- Widget de posts relacionados para Blogger (I): Linkwithin
- Widget de posts relacionados para Blogger (II): Shareaholic
Widget de posts relacionados para Blogger (III): Script de enlaces relacionados

¿Te fue de ayuda este artículo?
Si el artículo te agrada puedes suscribirte a La Taberna para recibir las últimas actualizaciones del blog o bien, puedes dar me gusta en Facebookseguir en Twitter o agregar a tus círculos de Google +. También puedes expresar tus dudas, sugerencias o comentarios a través de la página de contacto o aquí en la misma entrada.

¡No te pierdas ninguna publicación!

Suscríbete a La Taberna de Julio y recibirás todas las actualizaciones directamente en tu correo. Cero SPAM, lo prometo :)
Related Posts Plugin for WordPress, Blogger...
      edit

8 comentarios:

  1. no me funciono me pordrias auxiliar hise todo como lo indicas

    ResponderEliminar
    Respuestas
    1. ¡Hola Jesús!

      Puede que sea alguna de estas dos cosas: puede que no confirmaras tu blog en shareaholic. Checa el punto 4 del paso 1 "Creando nuestra cuenta de Shareaholic y confirmando nuestro blog" y sigue los pasos.

      También puede ser que colocaste el código HTML en la etiqueta 'data:post.body' incorrecta. Recuerda que el código a colocar debe estar ubicado debajo de la tercera etiqueta 'data:post.body' que encontremos o, en caso de que ésta no existiera, debajo de la segunda (checa el punto 3).

      Espero y esto pueda ayudarte.
      ¡Saludos!

      Eliminar
  2. Muy buenas tardes:
    Todo perfecto, pero no son post de mi blog lo que comparte sino de otras cosas.
    ¿Cómo puedo hacer para que sean post de mi blog?

    ResponderEliminar
    Respuestas
    1. ¡Hola María!

      Los post que muestra el widget deben ser de tu blog. Generalmente muestra posts de otros sitios (a modo de promoción, ya que así es el método de ganancia de Shareaholic) pero la mayoría deben ser tuyos. Si mostramos 6 post, el widget mostrará 1 post promocionado y los 5 de tu blog o si mostramos 8 post, el widget mostrará 2 promocionados y 6 propios de tu blog.

      Sólo muestra posts de ejemplo cuando estamos diseñando el widget a modo de vista previa (paso 5 del punto 1 "Creando nuestra cuenta de Shareaholic y el widget de contenido relacionado").

      Espero que mi respuesta te ayude.
      !Saludos!

      Eliminar
  3. No lo puedo verificar, siempre me salta error....

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Tanto la verificación del sitio como el widget una vez instalado tardan cierto tiempo en aparecer. Es uno de los inconvenientes de Shareaholic. Generalmente tarda un par de minutos a 48 horas en conseguir la verificación o que aparezca el widget.

      Sigue intentando, ya sea dejando pasar unos minutos o recargar la página hasta que se verifique.

      Saludos

      Eliminar
  4. Buenos dias, disculpa quisiera que me ayudes, en mi blog, solo se ven 6 articulos relacionados, cuando yo puse que fueran 8. Ya revise como 5 veces, y está configurado para 8 articulos, espacio hay, contenido hay, entocnes no se que pasa, se muestran 6 de 8 y 2 son otros articulos que pone Shareaholic, osea solo se estan mostrando 4 de ocho. Ayudame por favor.

    Gracias

    ResponderEliminar
    Respuestas
    1. ¡Hola Crhistian!

      Lo que pasa es que esos dos artículos son de enlaces patrocinados. No los podemos quitar porque es la forma en como Shareaholic obtiene ingresos para mantener su negocio. A veces salen esos posts patrocinados y otras veces no, pero por lo general saldrán ya que de ahí sale el negocio de Shareaholic.

      Este esquema de negocio es similar al de Outbrain y la única forma de retirarlos sería pagando una cuenta premium sin anuncios.

      Si deseas un widget de contenido relacionado en el que no aparezcan anuncios te recomiendo el de linkwithin, que se coloca de manera similar al de Shareaholic, en menos pasos y más práctico aunque más pequeño y sólo permite un máximo de 5 entradas relacionadas. Eso si, te permite modificar el widget a tu gusto. Si quieres saber más sobre este widget te recomiendo este post: http://latabernadejulio.blogspot.com/2015/01/widget-de-posts-relacionado-Blogger-1.html

      ¡Saludos!

      Eliminar

Todo comentario es bien recibido, pero recuerda: primero será revisado antes de ser publicado. :)
Si deseas incluir un enlace utiliza este código: <a href="URL del enlace">Texto del enlace</a>