22 mayo 2015

Tu Guía para Poner Botones para Compartir de AddThis en la Versión Web y Móvil de Blogger

Los botones de redes sociales nos ofrecen una vía efectiva para que los usuarios del blog compartan nuestro contenido. Por ello es importante tenerlos en las entradas y mostrarlos tanto en la versión Web, como la versión móvil.

Esta guía te ayudará a colocar botones para compartir de AddThis y se van a ver tanto en la versión de web como la móvil de Blogger.

Los botones aparecerán debajo de la entrada, y lucirán igual en ambas versiones, buscando congruencia en el diseño de tu blog.

Para que todo luzca más estético y profesional, vamos a agregarlos en una sección que crearemos para tal fin, la cual resaltaremos usando bordes, y además centraremos los botones. Dicha sección aparecerá al ingresar a las entradas individuales.

También colocaremos un texto invitando a los usuarios a compartir el contenido arriba de los botones.

He elegido usar Addthis, por dos razones: es un servicio confiable que goza de gran popularidad y Blogger no ofrece hasta ahora soporte al botón de Pinterest en la versión móvil. Y siendo Pinterest un medio social de gran importancia para la difusión de contenidos, sobre todo en aquellos blogs que ofrecen contenido muy visual como los blogs de fotografía, moda, cocina, etc., es muy conveniente tenerlo disponible.

Así es como lucirá la sección con los botones en las entradas:

pagina emulada en un smartphone y monitor de computadora


Esta guía está dividida en 5 partes:
1) Habilitando tu plantilla para que funcionen los botones en la versión móvil
2) Obtener el código de los botones de Addthis
3) Poner el código de los botones en la plantilla
4) Comprobando que se visualice la sección con los botones en la versión móvil
5) Comprobar los resultados de la implementación de los botones orientados a la experiencia de usuario usando PageSpeed Insights.

Si quieres ver los botones en acción, entonces échale un vistazo a la demostración:

Demostración

Parte 1. Habilitando tu plantilla para que aparezcan los botones en la versión móvil

Para que los botones aparezcan en la versión móvil, es necesario colocar el código de los botones en el código de la plantilla que corresponde a la versión móvil (y que veremos en la parte 3), pero además, hay que tener seleccionada la opción: "Personalizado" al elegir la plantilla para móviles. 

Si es que no la tienes seleccionada, simplemente vas a Plantilla, luego haz click en el icono de engranaje que aparece en la sección de la plantilla móvil:

Opcion para personalziar plantilla para moviles de Blogger

Luego, selecciona la opción que dice: "Personalizado" y guarda el cambio. De ese modo podrás personalizar la plantilla para móviles y aparecerán los elementos que agregues en las entradas cuando pongas el código del elemento respectivamente en el código que corresponde a la versión móvil en la plantilla.

opciones para elegir la plantillas para moviles de Blogger


También, asegúrate que en la plantilla, aparezca la etiqueta de apertura del <body> como se muestra a continuación:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Si utilizas una plantilla original de Blogger, lo más seguro es que la etiqueta <body> ya aparezca con ésos elementos. Si solo aparece así: <body>, cámbiala por la linea de código anterior. De ese modo se aplicará el CSS que agreguemos para personalizar la sección de los botones en la versión móvil, y en general servirá para poder personalizar la plantilla para móviles.

Otra cosa que necesitas hacer, es deshabilitar los botones para compartir de Blogger si los usas (seguramente no querrás tener más botones) desde la configuración de las entradas, y que accedes si vas a Diseño y haces click en Editar en la sección que dice "Entradas".


Parte 2. Obtener el código de los botones en AddThis


Obtener el código de los botones es muy sencillo. Solo sigue estos pasos:

  1. Ve a la página de AddThis, y crea una cuenta o accede usando tu cuenta de Google+, Twiter o Facebook.
  2. Una vez que accedas, haz click en: "Tools" que aparece en el menú superior de la página.
  3. Encuentra el complemento que dice: "Sharing Buttons", y haz click en "Get code".

    Complemento de Sharing buttons de AddThis
  4. Una vez que se abran las opciones de configuración, selecciona: "Select your Own", de ese modo podrás elegir los botones que deseas mostrar. Elige un máximo de 5 botones y colócalos en el orden de tu preferencia. Simplemente arrástralos desde la columna izquierda a la derecha, tomando en cuenta que aparecerán de izquierda a derecha al colocarlos de arriba hacia abajo.

    opciones de configuracion de los botones de Addthis

    Notas: Otra opción disponible es la auto personalización (Auto Personalization) que consiste en mostrar de forma aleatoria los botones en las entradas. Si deseas probar esta opción, también elige mostrar un máximo de 5 botones en la opción que dice: "Number of Buttons", con el fin de que aparezcan todos sin problemas de forma alineada en resoluciones de pantalla de 320 pí
  5. xeles en adelante, en los dispositivos móviles. Recuerda que el botón "+" de Addthis, ofrece un listado con todas las opciones de botones disponibles para compartir, así que puede ser conveniente que lo incluyas, auque es tu elección. El tamaño de los botones será el más grande disponible (32px X 32px) y que aparece seleccionado por defecto en Size (la primera opción). En Show Share Counts aparece por defecto seleccionada la opción de botones sin la burbuja, así hay que dejarlo.
  6. Una vez que configures las opciones, tendrás disponible el código de los botones. Copia los dos códigos que te facilitan. No olvides activar los botones haciendo click en el botón que dice: Activate.

    Codigo que genera Addthis para los botones
No se te vaya a pasar activar los botones haciendo click en el botón que dice "Activate" y que aparece en el recuadro con los dos códigos generados, abajo a la derecha. De otro modo no funcionarán.


Parte 3. Insertar el código de los botones y el CSS que definirá la apariencia de su sección


Ahora viene lo bueno. Hay que poner el código de los botones en el código de la plantilla, para que se visualicen tanto en la versión Web como la versión móvil de Blogger. Tambien agregarás el CSS que define la apariencia de la sección. Ya teniendo los dos códigos listos, el que aparece en el Paso 1 (Step 1) y en el paso 2 (Steep 2), sigue estos pasos:

  1. Primero agregas el CSS, que servirá para definir la presentación de la sección de los botones. En este caso colocaremos dos bordes, uno arriba y otro debajo, definiremos algunas reglas para separar los botones, de tal modo que cumplamos con las especificaciones de Google para garantizar una buena experiencia a los usuarios que visiten el blog en dispositivos móviles. Ve a: Plantilla > Editar HTML y pon el siguiente CSS después de : ]]></b:skin>

    <b:if cond='data:blog.pageType == &quot;item&quot;'><style type="text/css">.compartir{width:auto;display:inline-block;border-top:2px solid #CECECE;border-bottom:2px solid #CECECE;margin:16px 0;padding:14px 0 18px;position:relative}
    .compartir p{font-size:125%;margin:0;padding:0;}
    .addthis_sharing_toolbox{display:table;margin:22px auto 0;padding-left:10px}
    .at-share-tbx-element .at-share-btn{margin-right:12px!important;}
    .mobile .at-share-tbx-element .at-share-btn{margin-right:30px!important}
    .mobile .addthis_sharing_toolbox{padding-left:0}
    .mobile a.at-share-btn:last-child{margin-right:0!important}
    .mobile a.at-share-btn:first-child{margin-left:-1px!important}
    .mobile .compartir p{font-size:135%}a.at-share-btn:hover{opacity:0.8}</style></b:if>


    He resaltado de color verde, el código del color del borde, para que puedas editarlo, usando una tabla de colores HTML. El color tiene que ser el mismo, a menos de que quieras lo contrario ;) El CSS se cargará al ingresar a las entradas.
  2. Estando en el editor, haz click dentro del cuadro con el código, cuidando no mover nada, luego presiona las teclas Ctrl y F simultáneamente, para que se active el buscador del editor.
  3. En el campo del buscador pon: <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> Y da enter. Una vez que localices esa linea, pones debajo el script que te facilita AddThis y que aparece primero (donde dice Step 1), como se muestra a continuación:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!--Aquí va el script-->
    </b:if>

    La parte que he resaltado de naranja, la vas a quitar y vas a poner ahí el script que te facilita AddThis, donde dice paso 1 (Steep 1). Por ejemplo este es el script de mi cuenta: <script async='async' src='//s7.addthis.com/js/300/addthis_widget.js#pubid=karla' type='text/javascript'/> Si te fijas después de la extención: .js figura el nombre de usuario de la cuenta. He agregado un código condicional envolviendo el script y que he resaltado de azul, para que el script se cargue en las entradas individuales. Si utilizas otros complementos que necesitan ser mostrados también en la página principal, y que usen el mismo script, quita ese código resaltado de azul y solo pon el script.
  4. Pon en el campo de búsqueda del editor el siguiente código:
    <div class='post-footer-line post-footer-line-3'>. Esta linea, aparece solo una vez en la plantilla, así que no tendrás problemas para saber cuál es. Dentro de ese div se encuentra el código que hace que aparezca el perfil del autor. Baja un poco hacia abajo y verás esta etiqueta:</b:includable>., que reconocerás fácilmente porque está arriba de:
    <b:includable id='postQuickEdit' var='post'>. Justo arriba de esa </b:includable> pones el código de la sección y el de los botones (el del paso 2) así:

    <b:if cond='data:blog.pageType == &quot;item&quot;'><div class='compartir'><p>Si te gusta, o crees que la entrada será útil para tus amigos o contactos compártela. &#161;Gracias!</p><div class='addthis_sharing_toolbox'/></div></b:if>

    El código resaltado de naranja, es el código que aparece en el paso 2 (Step 2) generado por AddThis, y que sirve para que aparezcan los botones. Se supone que debe ser el mismo que he usado, pues se trata del mismo complemento. De cualquier modo ya lo tienes generado así que lo vas a poder comprobar.
    El texto resaltado de verde en el código, es el texto que se mostrará arriba de los botones. Puedes editarlo/cambiarlo por cualquier otro.
    El código resaltado de azul, es el código condicional de Blogger que sirve para que la sección con los botones aparezca al ingresar a las entradas.
  5. Pon en el campo de búsqueda esta linea:
    <b:if cond='data:top.showMobileShare'> y da enter. Vas a ver todo este código:
     <div class='post-footer-line post-footer-line-2'>
        <b:if cond='data:top.showMobileShare'>
           <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
              <a href='javascript:void(0);'>
                 <data:shareMsg/> 
              </a>
           </div>
        </b:if>
        <b:if cond='data:top.showDummy'>
           <div class='goog-inline-block dummy-container'>
                 <data:post.dummyTag/>
           </div>                         
        </b:if>
      </div>
     </div>
    </div>
    
    Debajo del último </div> que he resaltado de azul pones el código de la sección con los botones, para que aparezcan en la versión móvil:

    <b:if cond='data:blog.isMobile and data:blog.pageType == &quot;item&quot;'><div class='compartir'><p>Si te gusta, o crees que la entrada será útil para tus amigos o contactos compártela. &#161;Gracias!</p><div class='addthis_sharing_toolbox'/></div></b:if>
    Al igual que en el paso anterior, puedes editar el texto resaltado de verde. El que aparece de color naranja es el segundo código que facilita AddThis (que aparece en Step 2) y que sirve para  que se muestren los botones. &#161; equivale al signo de apertura de exclamación: ¡, no vayas a creer que es un error ;)
  6. Finalmente verifica en vista previa y si todo luce bien guarda los cambios. Aunque no verás los botones te asegurarás que todo luce bien en la plantilla, en la página de inicio.
Y ¡listo! Ya habrás agregado una sección con los botones para compartir de AddThis y aparecerán tanto en la versión Web como la versión móvil de Blogger ;)


Parte 4. Comprobando que se visualice la sección con los botones en la versión móvil

Ahora lo que haremos es comprobar que la sección con los botones se visualice en la versión móvil de Blogger y lo haremos desde el navegador, usando el modo de emulación móvil de las herramientas para desarrolladores de Google Chrome.

  1. Desde el navegador Google Chrome dirígete a una entrada individual del blog.
  2. Una vez que estés en la entrada, pulsa la tecla F12 para acceder a las herramientas para desarrolladores.
  3. Activa el modo de dispositivo haciendo click en el icono: que dice:Toggle device mode al poner el puntero del ratón encima y que aparece en la barrita superior a la izquierda. Una vez activado el icono se pondrá de color azul.
  4. Luego, arriba en la ventana identifica la lista desplegable que dice: <Select model>
    lista desplegable para elegir dispositivo movil a emular
  5. Desde esa lista, selecciona el dispositivo móvil en donde quieres comprobar el resultado, luego pulsa la tecla F5 para volver a cargar la página y Chorme la emule correctamente tomando en cuenta el dispositivo que elegiste.
    Lista desplegable que muestra los distintos dispositivos moviles que emula Chrome
  6. Verifica el resultado. Habiendo cargado la página con F5, el navegador emulará la página y será presentada como si fuera vista en el dispositivo que elegiste y podrás ver cómo luce la sección que has agregado ;)
    pagina del blog emulada usando iphone 6 desde chrome
La  opción que dice Fit y que aparece seleccionada en la imagen, sirve para poder ver la página completa emulada, cuando no cabe en la ventana del navegador donde se hace la prueba.

Recuerda volver a cargar la página con F5, cada vez que cambies la selección del dispositivo.


Parte 5. Comprobar los resultados orientados a la experiencia de usuario usando Pagespeed Insights

He actualizado este apartado. Originalemnte recomendaba ir a la página de PageSpeed Insights de Google, para que comprobaras que no hay un problema con los botones en términos de usabilidad en los dispositivos móviles. Llegué a la conclusión de que PageSpeed no es capaz de analizar los botones, pues manipuléndolos con CSS hasta solaparlos y disminuir dramáticamente el alto y ancho, no me hizo ninguna advertencia.

Sin embargo, lo que hice fue seguir la recomendación de Google, que especifica dejar una separación por lo menos de 32 píxeles entre cada botón cuando miden menos de 48 píxeles de ancho y alto.

Se puede apreciar en esta regla de CSS para la versión móvil del paso 1 de la parte 3:
.mobile .at-share-tbx-element .at-share-btn{margin-right:30px!important}
Son 30 píxeles de margen a la derecha más los 2 píxeles que envía por defecto AddThis en su CSS (2px a la derecha y 2px a la izquierda), suman 34 píxeles.

Notas finales

  • El botón +1 seguirá apareciendo en la sección debajo de las entradas aunque hayas quitado la selección de los botones para compartir de Blogger. Dicho botón solo sirve para hacer +1 a una entrada no para compartirla en Google+. Para quitarlo hay que eliminar el código de éste desde el código de plantilla.
 
Seguir leyendo
13 mayo 2015

Novedades en los Códigos Condicionales Blogger (que permiten Mostrar Contenido o Excluirlo )

Recientemente Blogger hizo unos cambios en su código condicional. Ahora, en muchos casos, podemos usar menos código al crear sentencias condicionales, así que pensé que sería bueno dar una repasadita al tema.

Los códigos condicionales de Blogger, resultan muy útiles al personalizar el blog, ya que permiten llevar a cabo determinadas acciones como por ejemplo, incluir o excluir elementos de la plantilla en determinada página.

¿Alguna vez te has preguntado porqué en la página principal los títulos del blog son enlaces que dirigen a una entrada, y una vez que accedes a la página individual, ya no lo son? Pues éso sucede gracias a este código.

Este código se ejecuta del lado del servidor, éso quiere decir que Blogger lo procesa y luego devuelve los resultados al navegador y éste los muestra en pantalla.

Usándolo, podemos por ejemplo optimizar el encabezado del título del blog haciendo que en la página principal el título tenga una etiqueta h2 y al ingresar al post una etiqueta h1 (así como lo tengo en mi blog), también podemos excluir elementos de una manera eficiente, mostrar elementos en páginas con determinada etiqueta, cerrar comentarios automáticamente y mucho más.

En resumen y dicho de una forma breve, los códigos condicionales son una serie de instrucciones que ejecuta Blogger y permiten incluir contenido en el blog o excluirlo. 


Cómo luce el código condicional


Formato
Una sentencia condicional simple, que solo incluye una sola condición tiene el siguiente formato:
<b:if cond='condición'>
[contenido que se va mostrar]
</b:if>


Si se cumple la condición, entonces se mostrará el contenido que pusimos dentro de ésta.

Dicho código está compuesto de una etiqueta b:if  , y debe llevar una etiqueta de cierre </b:if>.

En las condiciones se usan ciertos elementos que permite devolver un resultado.  Por ejemplo: <data:post.title/> devuelve el título de las entradas. Estos elementos tienen un formato: <data:name/>, en donde name es el nombre de la información que se va a utilizar.

Algunos datos pueden utilizarse en todo el blog, mientras que otros están reservados para usarse solo en un widget específico.

Puedes ver la lista maestra de todos los datos disponibles para los widgets de Blogger en su página.

Una novedad interesante, es que el código también puede incluir etiquetas b:elseif, además de la  b:else, aunque ambas son opcionales. La primera sirve para mostrar contenido si aún no se ha mostrado contenido usando b:if, por otro lado  b:else muestra contenido cuando no se cumplieron ninguna de las condiciones b:if o b:elseif previa (s).

Algo que ahora también resulta interesante, es que podemos simplificar las condiciones cuando usamos  b:if b:elseif si utilizamos: or y and dentro de la condición.

Con esta nueva posibilidad, nos estaremos ahorrando algunos caracteres (menos caracteres al final de cuentas es igual a un menor tamaño de nuestro documento/plantilla) y el código resultante es más legible.

Usando etiquetas b:if y b:elseif y b:else.

Formato 
<b:if cond='condition'>
  [contenido que se va mostrar si se cumple la condición]
<b:elseif cond='otra condition'>
  [contenido que se va mostrar si no se ha cumplido ninguna condición "if" ni "elseif"]
<b:else/>
  [contenido a mostrar si no se cumple ninguna condición "if" ni "elseif"]
</b:if>


Ejemplo de código condicional que usa las etiquetas b:if b:elseif y b:else  y que se usa en las plantillas para el título de los entradas.

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:elseif cond='data:post.url and data:blog.url != data:post.url'/>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>


Antes de la actualización las plantillas usaban todo este código condicional para lograr lo mismo:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>



Los dos códigos arrojaran el mismo resultado, que es el título del post con una etiqueta h3 y que figura como enlace a la entrada, siempre y cuando no esté en la página individual. La diferencia es que el primero es más compacto, ya que con la nueva etiqueta b:elseif y el operador and se simplificó el código.

Lista de código condicional que resultan muy útil


Si la página actual es una página de Inicio

<b:if cond='data:blog.url == data:blog.homepageUrl'>[contenido]</b:if>

Si la página actual es una página estática

<b:if cond='data:blog.pageType == "static_page"'>[contenido]</b:if>

Si la página actual es una entrada individual

<b:if cond='data:blog.pageType == "item"'>[contenido]</b:if>

Si la página actual tiene determinada URL (especificamos la URL)

<b:if cond='data:blog.url == "URL_de_la_Página"'>[contenido]</b:if>

Si la página actual es una página no encontrada o de Error 404

<b:if cond='data:blog.pageType == "error_page"'>[contenido]</b:if>

Si la página actual en una página de archivo:

<b:if cond='data:blog.pageType de archivo == "archive"'>[contenido]</b:if>

Si la página actual es una página de inicio, o página de archivo o página de etiquetas o página de un búsqueda

<b:if cond='data:blog.pageType == "index"'>[contenido]</b:if>

Si la página actual es una entrada ó una página (una sola condicional para aplicar en dos tipos de página)

<b:if cond='data:blog.pageType in {"static_page", "item"}'>[contenido]</b:if>
que sería lo mismo que:

<b:if cond='{"static_page", "item"} contains data:blog.pageType'>[contenido]</b:if>


Así como usamos el operador: == que se significa: igual a, podemos usar != que significa lo contrario (no igual o desigual) para cambiar la condición.


Por ejemplo:
Si la página actual no es una página estática y no es una entrada individual (útil cuando usamos resúmenes automáticos en todas las páginas del blog, excepto por la página individual)

<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item"'>[contenido]</b:if>


Ejemplos de Usos


Aplicar CSS. Por ejemplo, vamos a imaginar que quieres que el color de fondo del blog cambie al estar en las páginas estáticas  y en las entradas.

Para tal caso habrá de definir la regla de CSS para que ésto ocurra y ponerla dentro del código condicional, y lo haríamos así en las nuevas plantillas, y lo pondríamos después ]]></b:skin>

<b:if cond='data:blog.pageType in {"static_page", "item"}'><!--Si el tipo de página actual es una página estática, o una página individual-->
<style>body{background-color:green}<!--Se aplica un color verde al fondo--></style>
</b:if>


Para las viejas plantillas (de diseño como mínima, etc.) habrá que usar <style type="text/css"> en lugar de <style> para que valide según las especificaciones de la W3C.

Mostrar un elemento solo en la página principal. Imagina que quieres mostrar un elemento como un slideshow solo en la página principal. Para lograrlo creamos la condición y ponemos dentro el CSS y el script:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style>...</style>
<script>...</script>
</b:if>


Luego creamos la condición para el HTML, por ejemplo, supongamos que lo pusimos en una sección debajo de la cabecera:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="seccion_slider">
...
</div>
</b:if>


De ese modo, tanto el CSS, el script como el HTML del slideshow se cargan solo en la página de inicio.

Ocultar/Excluir la columna lateral del blog en las páginas estáticas.

Si bien podemos ocultar la columna lateral del blog usando un display:none podemos hacerlo de forma más eficiente, si creamos una condición para que no se muestre en la página estática, y lo hacemos si envolvemos el código b:if en toda la estructura de la columna lateral.

Eso quiere decir que todos los elementos que estén en la columna lateral, no van a ser descargados por el navegador, a diferencia de usar display:none, en donde si se descargan  pero no se muestran porque lo evitamos con ese CSS.

<b:if cond='data:blog.pageType != "static_page"'><!--Si la página actual no es una página estática, entonces se muestra la columna lateral-->
<aside>
...
</aside>
</b:if>



Como puedes ver el código condicional te ofrece un montón de posibilidades en el diseño del blog y en su optimización ;)


Referencias
Etiquetas de Blogger para Diseño del centro de ayuda oficial Blogger
Códigos de información de "Diseños" del centro de ayuda oficial Blogger

Entradas relacionadas de terceros que te recomiendo:
Uso de condicionales en Blogger
Usar condiciones

Seguir leyendo

Cómo Poner Entradas Recomendadas Individuales para Aumentar el Número de Páginas Vistas

Había visto en un par de blogs, entradas recomendados de forma individual en las entradas, y tenía curiosidad por saber si realmente funcionan.

Así que, hice la prueba y le di seguimiento usando la extensión de Google Analytics.

Para que llame la atención, el enlace lo puse aproximadamente a la mitad de la entrada, sin que interrumpa la lectura, es decir, fue colocada al finalizar un apartado, y dentro de una cajita, al estilo de las frases tuiteables que recientemente te compartía.

Pues los resultados fueron muy buenos, la gente sí hace click en el enlace, mucho más que los enlaces que figuran en un párrafo (enlaces de referencia a otras páginas del blog), seguramente porque llama más la atención, y existe el interés en visitar contenido relacionado.

Ésto hay que hacerlo manualmente, es decir, hay que poner una entrada que se considere relativa o afín a la temática del artículo/entrada y que pueda resultar atractiva a un usuario. No vamos a usar un script que muestre una entrada aleatoria o cosas así. Aquí no le vamos a dejar nada a la suerte.
Elegir bien el artículo recomendado/relacionado, la posición del enlace en la entrada, y resaltarlo, es la clave.

¿Te animas a probarlo?

Hacer ésto puede significar para ti más probabilidades de que tus lectores visiten otras entradas y por consiguiente estás aumentando de manera natural el número de páginas vistas por usuario.

Aumentar el número de páginas vistas tiene muchos beneficios para tu blog, por ejemplo:

  • Tienes más posibilidades de que un usuario encuentre algo que le guste y se anime a suscribirse o seguirte en una red social, con lo cual estarías ganando un nuevo lector y por consiguiente futuras visitas (retornos).
  • Al encontrar algo que le guste y/o considere útil, tendrás más posibilidades de recibir recomendaciones, cuando el usuario comparte tu entrada en una red social, lo que supone también más visitas a tu blog. ¿Verdad que cuando encuentras algo útil o interesante lo quieres compartir?.
  • Si monetizas el blog usando publicidad, tener mas páginas vistas aumentarán tus ganancias, sumado también a los posibles clicks que pudieran generarse y que las aumentan en mayor medida.
  • Supone un decremento en el porcentaje de rebote. Si un usuario ingresa desde el buscador u otro sitio que te enlace, y se interesa en otro artículo y hace click sobre éste, no abandonará tu blog sin antes visitar otra página.
  • Posiblemente ésto sea para Google un indicativo de que el sitio gusta y pueda ayudarte a mejorar tu clasificación en su motor de búsqueda, pues los usuarios están navegando en el contenido.
Lo más importante es que favoreces que los usuarios encuentren contenido que pueda aportarles valor: que pueda gustarles y serle útil, con los consiguientes beneficios ;)


¿Quiere probar por ti mismo los resultados? Entonces, veamos cómo hacerlo ;)


Cómo poner una cajita con un enlace de una entrada relacionada

Vamos a aprovechar la funcionalidad de Blogger y de la que ya te había hablado antes llamada: "Plantilla de Entradas". Ahí vamos a agregar un pequeño código que te ayudará a crear la cajita donde pondrás el enlace al artículo o entrada. Dicho código aparecerá en el editor de entradas, en todas las entradas nuevas que crees.

  1. Vas a Configuración > Entradas y comentarios y en la opción que dice: Plantilla de las entradas pones el código HTML para crear la cajita y que aparecerá en todas las entradas nuevas que crees:

    <div class="recomendado">
    </div>


     Entonces quedaría así:
    Plantilla-de-entradas-de-blogger

    Luego Guardas el cambio en Guardar configuración.
  2. Después, usamos un poco de CSS, para personalizar la cajita. En este ejemplo la cajita tendrá un fondo verde, y que puedes ver al final en el resultado. Este es el CSS básico, hay que ponerlo yendo a Plantilla > Personalizar > Avanzado  > Añadir CSS (no necesitas ingresar al código de tu plantilla para agregar CSS).
    .recomendado{display:inline-block;background:#079474;border:1px solid #079474;margin:10px;padding:20px;overflow:hidden;color:#fff}
    .recomendado a{color:#fff /*color del enlace*/}.recomendado a:hover{color:#ddf4ef /*color del enlace al poner el puntero encima*/}


    Para que se aplique. guarda el cambio en Aplicar al blog. Por supuesto puedes personalizar la cajita cambiando los colores y que he resaltado de azul.
  3. Una vez que empieces a crear la entrada, accedes al HTML de la misma, y buscas ese código, y dentro del div, colocas el texto a mostrar con el enlace de la entrada que vas a recomendar, usando la herramienta "Enlace" del editor.

    Entonces, una vez que agregues todo lucirá así (con tu propio texto y URL de la entrada):

    <div class "recomendado">No te puedes perder:<a href="URl_de_la_entrada">50 Fondos con Motivos Florales para tu Teléfono Android</div>

Y el resultado sería:



Dale seguimiento a esas entradas 


Instala la extensión de Google Analitycs, lo cual te permitirá darle seguimiento al contenido recomendado/relacionado que coloques en tus entradas.

Una vez instalada, accedes a ella haciendo click sobre el icono de la extensión que aparece enseguida de la barra de direcciones, y podrás ver la actividad que hay en tu blog en tiempo real, y la forma en que los usuarios interactúan con el contenido de las páginas del blog, por ejemplo, puedes ver las veces que se ha hecho click en los enlaces, lo que te permitirá evaluar los resultados. Verifica cuántos clicks está generando dicha(s) entrada(s) recomendada(s) y en qué periodo de tiempo.

Pagina web que muestra el panel de la extension de Google analytics


¿Aún no usas Google Analytics en el blog? ¡Instálalo hoy mismo desde tu panel de Blogger! para conocer más sobre los usuarios que visitan tu blog, lo que te permitirá mejorarlo a beneficio de ellos y tuyo ;)


Tips:


  • Una buena idea de incluir el enlace recomendado es "antes de un nuevo apartado/sección" en la entrada. Me gusta más que por ejemplo ponerla en medio del apartado, ya que ésto puede interrumpir la lectura del usuario y de éso no se trata.
  • Pon contenido relacionado/recomendado en aquellas entradas en las que ya recibes más tráfico, pues esto aumentará tus posibilidades de que hagan click los interesados. Aunque tampoco esta demás darles un empujón a aquellas que son menos visitadas, sobre todo si lo que vas a recomendar sera útil y complementa la entrada. En tal caso tendrás que poner el código (div) manualmente.


Notas Finales y Conclusiones

A mi personalmente me gusta este método de elegir la entrada, porque me permite un control absoluto sobre la entrada que voy a recomendar a un usuario. Aunque claro, ésto no sustituye las entradas relacionadas que figuran al final del post.

Probablemente hayas visto que AddThis facilita un widget para mostrar contenido recomendado que emerge al desplazarse hacia el fondo de la página. También es una opción interesante, no he comprobado los resultados, pero puedes probarlos y ver si te funcionan. Aunque para ello hay que usar javascript lo que también implica el consumo de más recursos que tienden a afectar el rendimiento de tu blog y solo para mostrar una sola recomendación.

Tal vez está de más decirlo pero, los resultados definitivamente pueden variar considerando el interés de tu audiencia, de lo útil/interesante que sea una entrada, y del tráfico que ya esté recibiendo o reciba  la entrada donde se va a poner la entrada relacionada/recomendada.

Dependiendo lo extenso de la entrada, puedes probar poniendo dos recomendaciones o más.

Pruébalo y saca tus propias conclusiones. Ya luego me contarás ;)
Seguir leyendo