23 may. 2015

Cómo añadir suscripción por correo electrónico en Blogger

Los componentes de suscripción por correo electrónico, sirven para que los usuarios que visitan un sitio web, puedan suscribirse a sus actualizaciones recibiéndolas por correo electrónico.

Se trata de una herramienta fundamental para cualquier blog o sitio web, pues crea un vínculo directo entre sus visitantes y su autor. Cuando el creador de la página web publica un contenido, éste llega a todos sus suscriptores, de manera que incluso aunque no visiten la página web, recibirán el artículo mediante el cual podrán volver a ella para revisar la nueva publicación.

Las utilidades de suscripción son fundamentales para fidelizar a los usuarios con un sitio web y mantener una comunicación más directa y estrecha entre su creador y sus seguidores.



¿Qué es un componente de suscripción por correo electrónico en una web?

Se trata de un elemento que se añade a una página web para que los usuarios que la visitan puedan recibir actualizaciones de la misma mediante correo electrónico.

¿Cómo es un componente de suscripción por correo electrónico en una web?

Por un lado se añade un componente a la página web que contiene una presentación mediante la cual el usuario podrá introducir su correo electrónico para recibir las actualizaciones del sitio siempre que estas se produzcan.

Los hay de muchos tipos y formas, por ejemplo en Diarios de la nube se encuentra en la barra de menú derecha, a continuación os presento cómo funciona:


¿Cómo funciona un componente de suscripción por correo electrónico en una web?

El funcionamiento interno de un componente de suscripción web es posible gracias al Feed del Blog.

Un Feed es un archivo informático construido bajo unos estándares de uso para Internet que contiene las actualizaciones que se realizan en el contenido de un sitio web. El Feed es una fuente de difusión de contenidos a la cual se suscriben clientes (que pueden ser programas o personas) que desean recibir los últimos cambios y actualizaciones que hemos realizado en nuestra publicación web.

Por ejemplo, en un Blog, cada vez que generamos una nueva entrada o realizamos una actualización, el Feed se retroalimenta con los cambios para proporcionárselos a todos los "clientes". Entre esos "clientes" tenemos desde aquellas personas que se han suscrito a tus cambios por correo electrónico, hasta el mapa del sitio que se actualiza automáticamente en las herramientas de webmasters del buscador.

En cada web se utilizan sistemas de Feed distintos, en Blogger por ejemplo se trabaja con FeedBurner.

¿Cómo poner un componente de suscripción por correo electrónico en Blogger?

El componente de suscripción por correo electrónico que proporciona Blogger es muy sencillo:


 Simplemente proporciona una "caja" para la introducción de datos y un botón mediante el cual el usuario puede suscribirse automáticamente.

Para poderlo poner, sigue estos sencillos pasos:

1) En el menú de la izquierda del interior de Blogger, haz "clic" en "Diseño". Dentro de la vista de diseño pulsa "Añadir un gadget" para añadir el nuevo componente.



2) Selecciona el gadget "seguir por correo electrónico":


3) Introduce el título que deseas ponerle al componente, la dirección del Feed de tu Blog y por último el botón guardar para que quede asociado a tu Blog.



  • Si no encuentras la dirección de tu Feed, simplemente  dirígete dentro del menú de la izquierda de Blogger a "Configuración" y después a "Otros" para fijarte en lo que ponga en el contenido "Publicar URL redireccionada del feed":

¿Cómo puedo personalizar mi componente de suscripción por correo electrónico en Blogger?

El componente de Diarios de la nube está completamente personalizado porque he retocado los estilos que conforman la caja y el botón para la suscripción:
El componente es totalmente adaptable (responsive), te acompaño una imagen del mismo:




El código para que lo puedas añadir a un Gadget HTML es:

<div id="subscribers">
<div class="subscriptionboxtitle">
<h4><span class="thin">¿Quieres</span> suscribirte?</h4>
<p>Recibe las actualizaciones de Nombre de tu web en tu correo</p>
</div>
<div id="whatyouget">
<ul class="whatyougetwith">
<li>Acceso a las guías paso a paso más sencillas para principiantes</li>
<li>Propuestas sobre SEO y posicionamiento detalladas</li>
<li>Totalmente libre y gratuíto</li>
<li>¡Y mucho más!</li>
</ul>
</div>
<div class="subscriptionsingup">
<form action="http://feedburner.google.com/fb/a/mailverify" id="subscribe" method="post" onsubmit="window.open( 'https://feedburner.google.com/fb/a/mailverify?uri=NOMBREDETUFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input id="subscriptionbox" name="email" onblur="if ( this.value == '' ) { this.value = 'Introduce tu dirección de correo electrónico...'; }" onfocus="if ( this.value == 'Introduce tu dirección de correo electrónico...') { this.value = ''; }" type="text" value="Introduce tu dirección de correo electrónico...">
<input name="uri" type="hidden" value="NOMBREDETUFEED">
<input name="loc" type="hidden" value="es_ES">
<input id="subscribebutton" type="submit" value="¡Si quiero suscribirme!">
</form>
</div></div>
 Sus hojas de estilo son:

.subscriptionsingup {
padding: 20px;
background: #333;
}
#subscriptionbox {
padding: 10px 15px 10px 15px;
width: 223px;
text-shadow: none;
font-size: 16px;
color: #666666;
margin-bottom: 7px;
}
#subscribebutton {
background: #E65B4B;
border: none;
font-weight: 700;
color: #fff;
width: 256px;
padding: 15px;
text-shadow: none;
font-size: 15px;
cursor: pointer;
padding-right: 10px;
margin-left: 2px;
-webkit-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
box-shadow: rgba(0,0,0,0.3) 0px 2px 2px -1px;
text-shadow: 0 1px 0 rgba(122, 122, 122, 0.85);
}
.thin {
text-shadow: none;
font-weight: 300;
}
#subscribers {
float: left;
width: 300px;
background: #0091d6;
border: 2px solid #000;
}
#whatyouget {
background: #222121;
padding: 20px;
}
ul.whatyougetwith li {
/*background: url(http://1.bp.blogspot.com/-fA5DTNvODYY/Ubi4KXvAePI/AAAAAAAABdc/b_VVQIe7v-w/s1600/checkmarkk.png) no-repeat;*/
margin: 10px;
padding-bottom: 10px;
text-shadow: none;
font-size: 14px;
line-height: 20px;
text-shadow: none;
font-weight: 700;
color: #fff;
overflow: hidden;
padding-left: 25px;
}
.whatyougetwith ul {
margin: 30px 30px 0 25px;
padding: 0 0 0 25px;
}
.subscriptionboxtitle {
height: 110px;
padding: 10px;
background: #333;
}
.subscriptionboxtitle p {
text-shadow: none;
font-size: 14px;
padding: 0px;
margin: 0px;
line-height: 20px;
color: #fff;
margin-top: 5px;
text-align: center;
}
.subscriptionboxtitle h4 {
text-shadow: none;
font-weight: bold;
font-size: 24px;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 25px;
color: #fff;
padding-top: 15px;
padding-bottom: 10px;
}
Eso es todo, cualquier duda me tienes en los comentarios para ayudarte.

Escrito por Miguel García Sánchez - Colomer

Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

11comentarios:

  1. Voy a ponerlo ahora mismo. Muchas gracias por tu consejo

    ResponderEliminar
  2. Gracias! lo acabo de poner. Casi nunca hago muchas cosas pues me da susto, no tengo idea y siempre creo que lo puedo estropear. Bien, ahora a ver como pongo una cajita sencilla. La tuya es demasiado completa... jajaa Muchas gracias otra vez

    ResponderEliminar
    Respuestas
    1. No temas, haz copia de seguridad, incluso create un blog de pruebas para experimentar y probar.

      Verás que es muy sencillo.

      Un saludo, cualquier duda aquí estoy.

      Eliminar
  3. amigo, muchas gracias...
    podrías enseñarnos a agregar el buscador? :)

    ResponderEliminar
    Respuestas
    1. Hola!,
      tienes este tutorial para ello (más simple): http://www.diariosdelanube.com/2015/10/como-anadir-un-buscador-en-blogger-sin.html o este otro (más técnico): http://www.diariosdelanube.com/2015/06/como-anadir-un-buscador-tu-web-y.html

      Un saludo y gracias a ti por participar.

      Eliminar
    2. muchas gracias por tu respuesta, pero me refiero exactamente a ese buscador de google, ¿como puedo darle el estilo asi como el de suscripción? gracias

      Eliminar
    3. o uno que pueda incrustar en el menú de mi blog http://www.advent7d.com/ en lugar del buscador interno :) he intentado y no he podido

      Eliminar
    4. Realiza estos pasos http://www.diariosdelanube.com/2015/10/como-anadir-un-buscador-en-blogger-sin.html o este otro que es el de Google y está muy bien http://www.diariosdelanube.com/2014/06/como-poner-un-motor-de-busqueda.html

      Un saludo.

      Eliminar
  4. una duda cuando y como se incluye esta prueba que te pide escribir el texto y estas se ven torcidas como se llama esa prueba y como la incluyo, y gracias por el aporte me servirá mucho

    ResponderEliminar
    Respuestas
    1. Es para el control de robots, te lo hace automáticamente el subscriptor. No se me ocurre otra manera de poderlo poner (en los comentarios hay otro) pero para los suscriptores lo hace automáticamente.

      Eliminar

 

© 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.