Guía para ofrecer suscripción por email paso a paso

La suscripción por correo electrónico no ha muerto, por el contrario, mucha gente aun prefiere actualizarse por este medio y dependiendo de la temática el porcentaje puede ser más o menos importante. En esta guía mostraremos desde como activar este servicio hasta crear un formulario personalizado de suscripción paso a paso para Blogger y WordPress.

Activar suscripción por email en Feedburner

Existen varios servicios en linea que permiten crear suscripciones por email a partir de la dirección RSS de un blog, para este caso y considerando la popularidad del servicio hablaremos de Feedburner, donde seguramente ya muchos tiene adjuntados sus feeds, sino es así, a partir de una cuenta Google crea una cuenta de Feedburner.

Para activarlo en el panel de nuestro sitio vamos a la pestaña de Publicize (Publicidad) y posteriormente a la opción de Suscripciones por Email, aquí se ofrecen los códigos genericos para ofrecer la suscripción por mail con un formulario o un enlace, pero como vamos a personalizarlos más adelante por ahora solo es necesario dar clic al botón Active (Activar).

Configurar los mails con el contenido

Los usuarios suscritos reciben diariamente un mail con las novedades en tu blog y con Feedburner es posible configurar varios parámetros, ya antes comentamos como incluir el título de tus post en las suscripciones por correo y ahora veremos esta y el resto de las opciones.

Estas opciones se encuentran en Publicize → Suscripciones de Email → Email Branding.

Título o tema del email

Aquí es posible definir el título que tendrán los mail con nuestro contenido. Tenemos dos campos, el primero es para cuando el mail contiene un solo artículo y el segundo para cuanto hay más de uno. También contamos con tres variables que podemos usar:

${latestItemTitle} – Título de tu último artículo.
${n} – Número total de artículos en el mail.
${m} – Número de artículos en el mail menos uno. Ej. Si un mail contiene 3 artículos, m será igual a 2.

Así por ejemplo, para el primer campo podemos definir el siguiente formato:

${latestItemTitle} | Nombre de tu Blog

Y para el segundo campo, activando la opción “Cambiar título cuando haya dos o más artículos” (Change Subject when an email has 2 or more items) , el siguiente formato:

${latestItemTitle} y ${m} artículos más | Nombre de tu Blog

URL del logo

Para ayudarte a hacer marca tienes la opción de poner tu logo en cada email, una imagen de 150 a 250 px de ancho en colores neutros podría ayudarte con esa tarea.

Formato de la tipografía

También tenemos la opción de modificar el color, tamaño y tipo de tipografía en los artículos contenidos en el mail. En mi opinión los valores por defecto son bastante legibles y salvo una necesidad personal no sería necesario cambiarlos.

Ahora solo guarda los cambios para que se apliquen a los siguientes envíos.

Dirección de envío

Por defecto, la dirección que muestras los emails enviados es la de registro en feedburner, cosa que no siempre es la mejor opción. El panel para cambiar la dirección de envío se encuentra en:

Publicize → Suscripciones por Email → Preferencias de comunicación (Communication Preferences).

Lo ideal sería mostrar un mail estilo:

no-reply@midominio.com

En este mismo panel están los opciones para personalizar el mensaje de activación para los usuarios, es muy importante personalizarlo, pues por defecto esta en inglés y eso implica una barrera más para concluir correctamente la suscripción.

Ofrecer suscripción por correo en el blog

Hay dos forma de ofrecer la suscripción por mail a los lectores:

• Un enlace, que al cliquearlo abre una ventana nueva que muestra un formulario para ingresar la dirección de correo y un captcha para evitar el spam.
• Un formulario directamente, que al llenarlo abre una ventana para llenar un captcha y evitar el spam

En ambos casos se abre una nueva ventana, así que selecciona una u otra de acuerdo al espacio con que cuentes, a continuación te mostramos el código HTML para insertarlos y el CSS para darle estilos:

Enlace de suscripción

El enlace de suscripción no tiene mayor complicación, el código para incluirlo es:

<a href="http://feedburner.google.com/fb/a/mailverify?uri=TuFeedBunerURI" class="mailsuscripcion">Suscríbete gratis por correo electrónico</a>

Donde TuFeedBunerURI proviene de tu URL de Feedburner, por ejemplo, para nuestra dirección rss: http://feeds.feedburner.com/blogandweb, TuFeedBunerURI es blogandweb. Y para darle estilos basta con la clase que tiene definida, el CSS:

a.mailsuscripcion {

}

Algo muy común es agregar un mini icono a este enlace para diferenciarlo.

Formulario de suscripción

El formulario de suscripción no es distinto a cualquier otro, así es posible personalizarlo tanto como conozcamos de CSS, el HTML básico para agregar el formulario es el siguiente:

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=TuFeedBunerURI', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" id="fmailsuscripcion">
<div>
	<p>Suscríbete por correo electrónico:</p>
	<p><input type="text" name="email" id="campoemails"/></p>
	<input type="hidden" value="TuFeedBunerURI" name="uri"/>
	<input type="hidden" name="loc" value="es_ES"/>
	<input type="submit" value="Suscribir" id="mailsubmit"/>
</div>
</form>

Donde nuevamente hay que reemplazar TuFeedBunerURI por nuestra propia URL. A diferencia del código provisto por Feedburner, este código valida correctamente y es más sencillo apreciar la estructura y dar los estilos. Por ejemplo, los siguientes estilos CSS:

#fmailsuscripcion {

}

#fmailsuscripcion p {
margin:10px 0;
}

input#campoemails {
color:#999999;
float:left;
font-size:12px;
height:12px;
padding:2px;
width:65%;
}

input#mailsubmit {
background:#EEEEEE none repeat scroll 0 0;
border:1px outset #CDCDCD;
float:right;
font-size:10px;
padding:2px;
text-align:center;
width:25%;
}

Dan como resultado:

Puedes adaptar estos mismos estilos al diseño de tu blog.

Para Blogger y WordPress

HTML. Tanto para Blogger como WordPress el código HTML se puede agregar en un widget en la barra lateral tal como se encuentra aquí.

CSS. En WordPress los estilos van en el archivo style.css y en Blogger justo antes de la etiqueta de cierre:

]]></b:skin>

Recomendaciones para las suscripciones por mail

• Poner el link o el formulario de suscripción en un lugar visible y accesible.
• Mencionar que las suscripción es gratuita y la desuscripción se puede realizar en cualquier momento.
• Corroborar y reinvitar a los suscritos que nunca activaron su suscripción.
• Si tienes una categoría que se destaque sobre el resto de tu contenido, crea una suscripción solo para ella.

Suscríbete a Blog and Web

Hablando de suscripción, ya estas suscrito a Blog and Web, sino hazlo ahora por nuestro Feed RSS o correo electrónico.