05 enero 2015

Widget de posts relacionados para Blogger (I): Linkwithin

A muchos de nosotros nos llama la atención el colocar un widget de entradas relacionadas en nuestro blog porque es una forma de promocionar dentro del propio blog otros artículos que le pueden resultar interesantes a nuestros visitantes, generando así más tráfico para nosotros y al mismo tiempo, nuestro visitante descubre mayor contenido de utilidad. Así ¡todos ganamos!

Hay varias opciones en las que podemos colocar un widget de contenido relacionado en nuestro blog, por lo que he decidido crear una serie de post sobre este tema. Así que en las siguientes entradas, podremos observar tres opciones de widgets para colocarlas, entenderlas mejor y decidir cual es la que más nos conviene.

Para este post en específico hablaré el widget de LinkWhithin es la mejor opción para quien empieza en el mundo de los blogs y aún tiene miedo de tocar la plantilla html del blog aunque también resulta de utilidad a los muy experimentados, por lo que es altamente recomendable.  Este widget es tan confiable que la uso en La Taberna de Julio.


Contenido

  1. Generar el Widget de LinkWithin.
  2. Colocar el Widget en Blogger.
  3. Modificar el mensaje del widget.

Las primeras dos son obligatorias, mientras que la tercera es opcional, pero si la hacemos dejaremos mas bonito el widget. Bueno, sin mas retrasos vamos al tutorial.


1. Generando el widget de LinkWithin


Para generar el widget solo debemos seguir estos sencillos pasos:

1. Ve a LinkWithin.
2. Rellena el formulario: en donde dice 'Platform' seleccionaremos la opción Other. Marca la casilla si nuestro blog es de fondo obscuro. 
3. Al terminar, presiona Get Widget! para obtener el código html.
4. Copia el código que te ofrece en un bloc de notas, pues mas adelante lo usaremos.


2. Colocar el Widget en Blogger

Ahora colocaremos el widget en Blogger. El chiste de este tutorial es buscar que el widget aparezca debajo de cada entrada sin que este aparezca en la página principal, es decir, el widget solo aparecerá cuando el visitante vea una entrada, esto con el fin de no entorpecer la carga del blog.

1. Ve a Blogger.
2. Después iremos a  Plantilla y después haremos clic en Editar HTML, justo como en la imagen de abajo.  ¡No olvides guardar la plantilla de tu blog!

Blogger > blog > Plantilla > Editar HTML
3. Una vez en la plantilla HTML, haremos clic dentro y luego pulsaremos ctrl+F. 
4. Busca la segunda etiqueta <data:post.body/> pulsando intro 2 veces.
5. Pega debajo de la etiqueta que acabas de buscar el siguiente código: 
<b:if cond='data:blog.pageType == "item"'>
CÓDIGO HTML QUE LINKWITHIN NOS OTORGÓ
</b:if>
6. sustituye las palabras en rojo con el script que nos proporcionó LinkWithin, de tal forma que todo quede como en la siguiente imagen:


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

7. Guarda la plantilla y visualiza nuestro blog, para confirmar los cambios.

Nota: En caso de que no obtuvieras los resultados esperados, aplica los cambios en la siguiente etiqueta <data:post.body/>, y en caso de seguir sin obtener resultados, intenta con las demás hasta que des con la indicada. Por lo general funciona en la segunda etiqueta, pero cada blog es distinto, por lo que hay que probar en otras etiquetas si no funciona a la primera. Checa muy bien este paso, que es el que más problemas trae.

El código que vemos en el paso 5 es la condicional que evita mostrar el widget en la página principal, haciendo que solo se vea cuando se carga la entrada completa.


3. Modificar el widget de Linkwithin

Si no nos gusta la gris y robótica frase 'Quizás también le interese:' que trae por defecto el Widget, podemos cambiarla por una que nos guste más. Para esto hay que hacer lo siguiente:


1. ve al widget (Blogger > blog > Plantilla > Editar HTML)
2. Coloca el siguiente código: <script>linkwithin_text=' TEXTO QUE DESEAMOS COLOCAR '</script> de tal forma que quede así:  
<b:if cond='data:blog.pageType == "item"'>
<script>
var linkwithin_site_id = 0000000;
</script>
<script>linkwithin_text=' TEXTO QUE DESEAMOS COLOCAR '</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
</b:if>
Cambia el texto en rojo por el que desees.
3. Guarda los cambios y observa el blog.


Conclusión

Utilizar el widget de LinkWithin no requiere registrolo cual lo hace más interesante, y podemos elegir entre mostrar 3, 4 o 5 miniaturas, por lo que cumple a la perfección su función.  En lo personal me gusta mucho y lo recomiendo amplaimente. Claro, existen otros métodos mediante los cuales podemos colocar un widget de entradas relacionadas, pero eso queda para las siguientes entradas de la serie. 

Otros posts de esta 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

5 comentarios:

  1. Me ha sido muy útil tu post. La explicación es muy clara y paso a paso. Gracias! Ya lo he instalado. De momento sólo aparece en texto de "Entradas relacionadas", pero sin añadir los post ni las fotos. Supongo que tarda un poco, no?

    ResponderEliminar
    Respuestas
    1. ¡Hola!

      Me da mucho gusto leer tu comentario, muchas gracias :). A veces puede tardar hasta 48 horas la primera vez que se coloca ya que el widget está filtrando todas las entradas del blog. Más allá de eso no debe haber problema alguno, sin embargo si ves que no sale el widget en el blog te recomiendo que uses el paso 3 de este post:

      http://latabernadejulio.blogspot.com/2015/01/widget-de-posts-relacionados-blogger-2.html

      Aquél que se llama " Modificando la plantilla de Blogger para insertar el widget". Funciona igual para el widget de Linkwhitin y, aunque es un poco más complicado, es igual de efectivo :)

      Muchas gracias por tu comentario.
      Te envío un gran saludo :)

      Eliminar
    2. Gracias Julio por explicarlo paso a paso, justo estoy necesitando este Widget, lo acabo de desinstalar pensando que no funciona pero leyendo los comentarios veo que tengo que esperar hasta 48 horas, bueno ya voy volando al trabajo, por la noche lo vuelvo a instalar y te cuento, gracias otra.

      Eliminar
    3. ¡Hola Jinxlykin!

      Así es, puede tardar hasta 48 horas en aparecer pero es dependiendo de la cantidad de posts que tiene tu blog.

      Si ves que no aparece, trata de pegarlo en la segunda etiqueta "data:post.body". En el post indico que se debe colocar en la tercera etiqueta, pero es dependiendo de la plantilla de tu blog.

      Si notas que sigue sin aparecer, pega el código del widget en la segunfa etiqueta data:post.body y checa el resultado. Debe arriba de la segunda etiqueta, muy cerca. En caso de que no obtuvieras los resultados esperados, aplica los cambios en las otras etiquetas hasta que des con la indicada.

      Si sigues teniendo problemas no dudes en avisarme.

      ¡Gracias por tu comentario!

      Eliminar
  2. A mi sólo me aparecen dos veces "" ¿qué podría hacer?

    ResponderEliminar

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>