8 Diseños Personalizados para el Widget: "Seguir por Correo Electrónico"

Hace más de 2 años que se estuvo especulando sobre el cierre de FeedBurner, sospecha que surge al informarse que su API se declarara oficialmente obsoleta a mediados del 2011, concluyendo con su cierre definitivo en octubre del 2012. Luego vino el retiro de  AdSense para Feeds, después el cierre de Google Reader lo que volvió a levantar sospechas, sin embargo, hasta la fecha el servicio sigue funcionando.

Nunca he recibido alguna notificación como usuario del servicio, sugiriéndome alguna otra alternativa, como sucedió por ejemplo con el widget de Google Friend Connect, llamado: "Seguidores", en donde me recomendaban utilizar en su lugar el "Gadget de Seguidores de Google+", lo que hacía pensar que este servicio/elemento podría ser retirado definitivamente. Probablemente también hayas recibido un correo electrónico de Blogger recomendándotelo, ¿o no?

Desconozco si Google terminará por cerrar FeedBurner o hará como hizo con Friend Connect: dejarlo operativo solo para los blogs de Blogger. El tiempo pasa y las cosas se mantienen igual (casi todas...).

Pero bueno, podemos seguir usando el servicio sin problemas, buscando construir una audiencia de lectores asiduos interesados en nuestro contenido, considerando también que Blogger nos facilita el widget de suscripción por correo electrónico, el cual podemos añadir fácilmente y haciéndolo, es posible disfrutar de los beneficios de FeedBurner.

 Así es como luce por defecto el gadget suscribir por correo electrónico. "Follow by Email" es el título del gadget y aparece como tú lo pusiste.

Para resaltar este elemento tan importante, hoy tengo para ti 8 estilos personalizados, y además podrás habilitar el widget para que funcione también en la versión móvil de Blogger si es que la usas y si así lo quieres.

Tutorial Relacionado: Cambia el idioma de la ventana de Feedburner que se abre al hacer una solicitud de suscripción, y aprende otras cosas sobre la personalización de este widget, en esta entrada: http://www.compartidisimo.com/2011/03/nuevo-widget-de-blogger-seguir-por.html

Lo que haremos

En el primer apartado, explico cómo agregar el CSS que definirá la apariencia del widget.

En el segundo, veremos cómo editar el código del widget  para que puedas personalizar el texto del botón, agregar el texto informando sobre la confirmación de la suscripción o la invitación para que se suscriban, o para que el botón de suscripción aparezca debajo del campo donde el usuario teclea su correo electrónico, y que puedes apreciar en el estilo 5, 7 y 9.

En la tercera parte, explico cómo hacer que aparezca el elemento en la versión Móvil de Blogger.

Los diseños personalizados ya están listos para usarse, aunque puedes personalizar los colores de los bordes, botón y fondo, usando una tabla de colores web.

1. Agregar el CSS que definirá la apariencia del widget

Antes de agregar el CSS que facilito, agrega el gadget; haciéndolo, activas tu cuenta en FeedBurner y puedes visualizar los cambios desde el diseñador de plantillas.

Luego, elige el diseño que te gusta , copia el CSS que aparece debajo, y agrégalo al blog yendo a: Plantilla > Personalizar > Avanzado > Añadir CSS. Desde ahí podrás ver cómo luce el widget. Después, guardas el cambio haciendo click en el botón que dice: "Aplicar al blog".

He comprimido moderadamente el CSS para que sea más ligero. Sin embaro he resaltado de color verde los valores que pudieras estar interesado en editar, como colores de fondo y bordes.


Estilo 1: Ribbon. En este estilo creamos una cinta en el título del widget con CSS, usamos un color de fondo obscuro de contraste y resaltamos el botón con color de fondo sólido. El color de fondo del botón cambia al poner el puntero del ratón encima de éste (:hover).

#FollowByEmail1{width:100%;padding:0 30px 30px;background:#272727;position:relative}
#FollowByEmail1 .recordar{margin:1.4em auto 0;color:#FAFAFA;font-size:95%;padding:0 3px}
#FollowByEmail1 h2{font-size:120%;text-transform:uppercase;color:#fafafa;position:relative;top:-5px;background:#C00C0C;margin:0 0 20px;padding:20px 40px;text-align:center;width:100%;left:-40px}
#FollowByEmail1 h2:before{position:absolute;content:"";bottom:-10px;right:0;width:0;height:0;border-width:10px 10px 0 0;border-style:inset;border-color:#B61313 transparent transparent}
#FollowByEmail1 h2:after{position:absolute;content:"";bottom:-10px;left:0;width:0;height:0;border-width:0 10px 10px 0;border-style:solid;border-color:transparent #6D0101 transparent transparent}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:none!important;padding:0!important;text-indent:5px}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:43px!important;left:-12px;width:100%;position:relative;border-radius:0!important;border:none;padding:0!important;background:#D61414!important}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#AA0606!important}

Estilo 2: Boxy
Estilo con fondo de color sólido y borde que cubre el 100% del ancho debajo del título del widget. Botón  también con color de fondo sólido. El color de fondo del botón cambia al poner el puntero del ratón encima de éste (:hover).

#FollowByEmail1{width:100%;padding:0 20px 30px;margin:0;border:1px solid #dadada;background:#272727}
#FollowByEmail1 .recordar{color:#fafafa;margin:1.5em auto 0;font-size:95%;padding:0 3px}
#FollowByEmail1 h2{font-size:120%;text-transform:uppercase;padding:15px 20px;margin:0 0 22px;width:100%;text-indent:3px;border-bottom:1px solid #575654;color:#fafafa;display:block;position:relative;left:-20px}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #eee!important;padding:0!important;text-indent:9px}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:45px!important;left:-12px;position:relative;border-radius:0!important;padding:0 2px!important;border:none!important;background:#2D61E7!important;width:100%;display:block}



Estilo 3: Frame.
Estilo con color de fondo solido y borde sólido con 4 pixeles de separación. El color de fondo del botón cambia a un rojo más obscuro al poner el puntero del ratón encima de éste (:hover).

#FollowByEmail1{width:100%;padding:20px;margin:auto;border:1px solid #2C2C2C;position:relative;display:block}
#FollowByEmail1:before{position:absolute;content:"";width:auto;height:auto;background:#2C2C2C;margin:auto;padding:0;left:4px;right:4px;top:4px;bottom:4px}
#FollowByEmail1 h2{color:#fff;font-size:120%;text-transform:uppercase;text-align:center}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:none!important;padding:0!important;text-indent:9px;margin:0 auto;width:100%;background:#fff!important;position:relative;z-index:33/*No quitar importante para android*/}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:43px!important;left:0;position:relative;border-radius:0!important;padding:0 10px!important;background:#FC5858!important;border:none!important;display:block;width:auto;margin:14px auto;transition:background-color .25s ease}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#D11F1F!important}
#FollowByEmail1 input.follow-by-email-submit:active{box-shadow:inset 1px 2px 2px #9E0101}



Estilo 4. Double Border
Caja resaltada con borde doble, fondo blanco y botón con color sólido. El color de fondo del botón cambia al poner el puntero del ratón encima de éste (:hover).

#FollowByEmail1{width:100%;padding:20px;margin:20px auto;border-color:#ccc;border-style:double;position:relative;display:block}
#FollowByEmail1 h2{font-size:120%;text-transform:uppercase;text-align:center}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ddd;padding:0!important;text-indent:9px;margin:0 auto;width:100%;background:#fff!important;position:relative;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-submit{height:43px!important;left:-8px;position:relative;border-radius:0!important;padding:0 10px!important;background:#FC5858!important;display:block;width:auto;margin:14px auto;transition:background-color .25s ease;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#D11F1F!important}
#FollowByEmail1 input.follow-by-email-submit:active{box-shadow:inset 1px 2px 2px #9E0101}



Estilo 5: Target
Estilo con borde solido de 5 píxeles de grosor, en donde aparece el texto aclaratorio sobre la suscripción debajo del título del gadget. El botón aparece debajo del campo donde se teclea el correo electrónico, y cambia de color negro a rojo al poner el puntero del ratón encima de éste (:hover).

#FollowByEmail1{background:#fff;border:4px solid #000;width:100%;padding:15px 20px 20px;margin:10px 0}
#FollowByEmail1 p.invitar{margin:.7em auto 1em;font-size:100%;padding:0}
#FollowByEmail1 h2{font-size:130%;text-transform:uppercase;padding:0 5px;margin:0 auto;text-align:center;display:table;position:relative;left:0;top:12px;background:#fff}
#FollowByEmail4 .widget-content{border-top:1px solid #ccc;padding-top:15px;margin:0}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ccc!important;padding:0!important;text-indent:9px;margin:0 auto;box-sizing:border-box;text-align:center}
#FollowByEmail1 input.follow-by-email-submit{height:45px!important;color:#fafafa;text-transform:uppercase;left:0;position:relative;border-radius:0!important;padding:0!important;background:#020202;border:1px solid #020202;display:block;width:100%;margin:14px auto;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-submit:hover{border:1px solid #f66!important;background:#f66;color:#fafafa}
#FollowByEmail1 input.follow-by-email-address:focus,#FollowByEmail4 input.follow-by-email-submit:active{border-color:#777!important}



Estilo 6: Conected.
Borde sólido que envuelve la caja de suscripción con excepción al título de éste. Botón de color sólido que se muestra a un lado del campo de suscripción sin tener ningún margen de separación.

#FollowByEmail1{width:100%;padding:0 30px 30px;margin:2em 0;border:1px solid #ddd;position:relative}
#FollowByEmail1 .recordar{margin:1.5em auto 0;font-size:95%}
#FollowByEmail1 h2{font-size:130%;text-transform:uppercase;position:relative;top:-12px;left:0;display:table;padding:0 5px;background:#fff;margin:0 auto 16px}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ddd!important;padding:0!important;text-indent:9px}
#FollowByEmail1 input.follow-by-email-submit{text-transform:uppercase;height:45px!important;left:-12px;position:relative;border-radius:0!important;padding:0!important;background:#0a0a0a!important;border:none;width:100%;transition:background-color .25s ease}
#FollowByEmail1 input.follow-by-email-submit:hover{background:#D61414!important}



Estilo 7: Connection.
Borde sólido que encierra la caja de suscripción. Formas rectángulares en los extremos de color sólido  usando caracteres unicode. Botón de color sólido que se muestra debajo del campo del correo electrónico.

#FollowByEmail1{border:1px solid #000;padding:14px 20px;margin:0;width:100%}
#FollowByEmail1 h2{font-size:140%;text-transform:uppercase;padding:7px 12px 20px;margin:0;position:relative;text-align:center}
#FollowByEmail1 h2:before,#FollowByEmail1 h2:after,#FollowByEmail1:after,#FollowByEmail1 .widget-content:before{position:absolute;color:#000!important;font-size:15px}
#FollowByEmail1 h2:before{content:"\25FC";left:-25px;bottom:-8px;top:-25px}
#FollowByEmail1 h2:after{content:"\25FC";right:-25px;bottom:-8px;top:-25px}
#FollowByEmail1:after{content:"\25FC";left:-5px;bottom:-7px;}
#FollowByEmail1 .widget-content:before{content:"\25FC";right:-5px;bottom:-7px;}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ccc!important;padding:0!important;text-indent:9px;margin:0 auto;box-sizing:border-box;text-align:center}
#FollowByEmail1 input.follow-by-email-submit{height:45px!important;text-transform:uppercase;left:0;color:#fafafa;position:relative;border-radius:0!important;padding:0!important;background:#000;border:none;display:block;width:100%;margin:14px auto;box-sizing:border-box}
#FollowByEmail1 input.follow-by-email-address:hover,#FollowByEmail1 input.follow-by-email-submit:hover{border:1px solid #424242!important}
#FollowByEmail1 input.follow-by-email-address:focus,#FollowByEmail1 input.follow-by-email-submit:active{border-color:#f66!important}


Estilo 8:  Trade
Formas triangulares en los vértices del widget con color sólido, conseguido con caracteres unicode. Botón de enviar de forma recta con el mismo ancho del campo de correo electrónico resaltado con color sólido y que aparece debajo de éste.

#FollowByEmail1 .widget-content{width:100%;padding:0 0 40px;overflow:hidden}
#FollowByEmail1 .widget-content:before,#FollowByEmail1 .widget-content:after,#FollowByEmail1 h2:before,#FollowByEmail1 h2:after{position:absolute;color:#000!important;font-size:22px}
#FollowByEmail1 .widget-content:before{content:"\25E3";left:0;bottom:0}
#FollowByEmail1 .widget-content:after{content:"\25E2";right:0;bottom:0;}
#FollowByEmail1 h2{position:relative;padding:4px 0;margin:0;font-size:125%;color:#000;text-align:center;line-height:160%;text-transform:uppercase}
#FollowByEmail1 h2:before{content:"\25E4";left:0;top:0}
#FollowByEmail1 h2:after{content:"\25E5";right:0;top:0}
#FollowByEmail1 input.follow-by-email-address{height:43px!important;border:1px solid #ccc!important;padding:0!important;margin:20px auto 0;box-sizing:border-box;text-align:center}
#FollowByEmail1 input.follow-by-email-submit{height:45px!important;color:#fafafa;position:relative;border-radius:0!important;padding:0!important;background:#020202;border:1px solid #020202;display:block;width:100%;margin:14px auto;box-sizing:border-box;text-transform:uppercase;color:#fafafa}
#FollowByEmail1 input.follow-by-email-submit:hover{border:1px solid #f66;background:#f66}
#FollowByEmail1 input.follow-by-email-address:hover{border:1px solid #ddd!important}


Modificando la Estructura del widget o agregando otros elementos

2. Agregar el texto que invita a los usuario a confirmar la suscripción (opcional)

Probablemente habrá algunos usuarios que desconocen el proceso de suscripción a un sitio web o blog a través de FeedBurner, e ignoren que deben confirmar la suscripción al recibir la solicitud por correo electrónico. Así que  no está demás decírselos para que estén atentos al recibirla. Por ello agregamos el texto informándoselos. Aunque por supuesto eres libre de agregarlo o no.

En algunos estilos he agregado dicho texto (Estilos 1,2 y 6) para que veas cómo se ve, aunque puedes ponerlo en cualquier estilo que vayas a usar. Incluso poner otro texto que creas conveniente. Por ejemplo,  si ofreces un libro eléctrónico a los usuarios que se suscriban, o cualquier otro recurso gratuito para motivarlos a suscribirse, pues lo pones ahí.

Para poner el texto, solo sigue estos pasos:

1. Ve a: Editar HTML, y activas el buscador del editor. Para ello haz click dentro del cuadro del código fuente de tu blog, luego presiona las teclas Ctrl + F al mismo tiempo.
2. Luego, pon en el campo este código: </form>
   y da enter para que el editor te envíe a esa linea de código. Luego pega el siguiente código antes de esa linea.
   
   <p class='recordar'> No olvides confirmar tu suscripción, haciendo clic en el enlace que recibirás por email. &#161;Nunca recibirás SPAM garantizado!
</p>
   Ya puesto el código anterior con el texto, debería verse así en el código del widget:
   <b:widget id='FollowByEmail1' locked='false' title='Suscríbete al Blog' type='FollowByEmail'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
<div class='follow-by-email-inner'>
<form action='http://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;http://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
<table width='100%'>
<tr>
<td>
<input class='follow-by-email-address' name='email' placeholder='Correo electrónico...' type='text'/>
</td>
<td width='64px'>
<input class='follow-by-email-submit' type='submit' value='Enviar'/>
</td>
</tr>
</table>
<input expr:value='data:feedPath' name='uri' type='hidden'/>
<input name='loc' type='hidden' value='es_ES'/>
<p class='recordar'> No olvides confirmar tu suscripción, haciendo clic en el enlace que recibirás por email. &#161;Nunca recibirás SPAM garantizado!</p></form>
</div>
</div>
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>
   

Notas:

• El texto lo he encerrado en una etiqueta p para poder manipular la presentación del mismo. 
• ¡ corresponde al signo de admiración de apertura: "¡".

Si vas a agregar este estilo en cualquier otro que no sea el 1, 2 o 6, vas a tener que agregar esta regla de CSS:

#FollowByEmail1 .recordar{color:#fafafa;margin:1.5em auto 0;font-size:95%;padding:0 3px}

...Y editas el color de texto según necesites y que en este caso es casi blanco (#fafafa), por ejemplo si lo vas a poner obscuro casi negro puedes usar #020202.

2.1 Agregar el texto que invita a los usuarios a suscribirse al blog del estilo 5 (opcional para el resto de diseños)

Si echas un vistazo el estilo 5 al que llamé Target, verás que aparece un texto debajo del título del gadget que invita a los usuarios a suscribirse al blog.

Si decides ponerlo, tienes que ir a Editar HTML dirigirte al código del widget usando la lista deplegable que muestra los ids de los widgets que tienes agregados en tu blog y que dice: "Ir al Widget", eliges: "FollowByEmail1" y una vez que el editor te envíe al código del widget, agregas el siguiente código con el texto:

<p class='invitar'>
Recibe todas las novedades en tu correo electrónico. No recibirás SPAM.
</p>


Inmediatamente después de esta linea de código:
<div class='follow-by-email-inner'>

Verificas en vista previa y si todo luce bien guardas el cambio. Por supuesto se puede editar el texto según tus necesidades.

Si quieres ponerlo en cualquier otro estilo que no sea el 5 llamado Target, agrega también esta regla de CSS, desde Añadir CSS (donde colocaste el CSS al principio en la parte 1):

 p.invitar{margin:.7em auto 1em;font-size:100%;padding:0;}

2.2 Personalizando el texto del botón

En el botón de este elemento, por defecto muestra el texto: Suscribe. Para cambiarlo, simplemente lo identificas en el código del propio widget y lo cambias. Éste aparece como valor del atributo llamado:  value. Lo puedes apreciar resaltado de azul en el código del paso 2, donde explico cómo agregar el texto que invita a los usuarios a confirmar la suscripción.


Puedes poner cualquier otro texto como por ejemplo: "Enviar", "Suscribirse", "Me apunto",o el que mejor te parezca. Solo ten cuidado de no quitar las comillas simples que encierran dicho texto.

Luego verificas en vista previa y si todo luce bien guardas el cambio.

2.3 Hacer que el botón de "enviar" aparezca debajo del campo donde se pone el correo electrónico. Estilos 5, 7 u 8.

Si observas el ejemplo 5 llamado Target, o el estilo 7  u 8, verás que el botón de enviar aparece debajo del campo donde se pone el correo electrónico. Para lograr ésto, hay que cambiar un poco la estructura del widget. No es nada complicado, simplemente eliminamos las etiquetas de la tabla que Blogger agregó, y que he resaltado de amarillo.

<table width='100%'>
                <tr>
                  <td>
                    <input class='follow-by-email-address' name='email' placeholder='Correo Electrónico...' type='text'/>
                  </td>
                  <td width='64px'>
                    <input class='follow-by-email-submit' type='submit' value='Enviar'/>
                  </td>
                </tr>
</table>


Una vez eliminadas esas etiquetas en el código del widget, el botón aparecerá debajo del campo donde se teclea el correo electrónico.

3. Hacer que el widget aparezca también en la versión móvil de Blogger

Podemos hacer que este widget se muestre también en la versióm móvil de Blogger, y para ello, simplimente agregamos a la primera linea de código del widget un atributo llamado por Blogger: mobile con el valor yes tal y como se muestra a continuación:

<b:widget id='FollowByEmail1' locked='false' mobile='yes' title='Suscríbete al blog. ¡es gratis!' type='FollowByEmail'>


Hay que tomar en cuenta que debes tener seleccionada la opción "Personalizado" en la plantilla móvil de Blogger.

También hay que agregar esta linea de CSS, yendo a Personalizar > Avanzado > Añadir CSS:

.mobile #FollowByEmail1{width:auto;margin:20px 1em}

Lo anterior para garantizar que el widget se adapte adecuadamente y de forma automática al ancho del dispositivo en que será visualizado.

Espero sea útil ;)

En Blogger: Más Seguridad para ti y los Usuarios de tu Blog usando el Protocolo HTTPS

Me acabo de enterar vía +Andrés Tirado, que Blogger está implementando una nueva opción que hará que tu blog sea más seguro para ti y tus visitantes. Se trata de la posibilidad de obtener el protocolo llamado HTTPS" totalmente gratis.



Este nuevo beneficio que, gradualmente será añadido para todos los usuarios como opción en las opciones de configuración del panel, es una iniciativa apoyada en la idea: HTTPS Everywhere, de la que Google es un gran defensor, y que promueve el uso del protocolo HTTPS en la Web con el fin proveer más seguridad a los usuarios al usar Internet.

Usar en tu blog el protocolo HTTPS ofrece múltiples beneficios en cuanto a seguridad se refiere. Como nos explican desde su blog, es posible impedir el acceso no autorizado a información confidencial de tus visitantes, o que un ciberdelincuente le de seguimiento a la actividad de un usuario o a la de los administradores del blog. Evita que a un usuario se le redireccione a otro sitio malicioso mientras trata de visitar tu blog y también, se detecta si un atacante quiere modificar los datos que Blogger envía al visitante.

Otro beneficio, no menos importante es que usar protocolo HTTPS mejora la clasificación del sitio en Google, según nos dicen en el blog para webmasters de Google. Además favorece la confianza que depositan los usuarios o visitas del blog al usarlo.

De momento, según nos dicen, esta nueva opción solo estará disponible para quienes utilicen en su blog:"blogspot", y no para quienes tienen configurado un dominio personalizado.

Si usas el dominio "blogspot" y quieres habilitar en tu blog el protocolo HTTPS, tienes que ir a Configuración > Lo básico > Configuración de HTTPS y en Disponibilidad de de HTTPS seleccionar: "Sí".

Una vez activado, la dirección web de tu blog pasaría a ser: https://mi_blog.blogspot.com en lugar de: http://mi_blog.blogspot.com.

¿Ansioso por usar en tu blog el protocolo HTTPS? Yo estoy que me muero de las ganas.

Más Información recomendada
Protege tu sitio con protocolo HTTPS
Activa el protocolo HTTPS para tu blog de Blogger

Cómo poner el Botón "Me gusta" para que se Compartan las Entradas desde la Página Principal

Una usuaria de Blogger me comentaba que había agregado el botón "me gusta", pero que todas las entradas mostraban el mismo número en la burbuja que indica la cantidad de veces que se ha compartido el contenido del sitio.

Su mensaje decía más o menos así:

He colocado los botones "me gusta y compartir" de facebook en una misma línea, pero no entiendo porqué aparece en el "bocadillo" con el número de veces compartido siempre el mismo, en todas las entradas publicadas. ¿Hay alguna manera de arreglar eso?

El hecho de que el botón muestre el mismo número, se debe a que éste, está indicando el número de veces que se ha compartido la URL del blog, es decir, la página de inicio y no la respectiva entrada.

Para lograr que el botón genere un enlace a la entrada y no a la página principal o inicio del blog, cuando un usuario comparta el contenido, es necesario:

1) Hacer que el botón aparezca solo al ingresar a la entrada. Como será una página individual que incluye una sola entrada, automáticamente se generará el enlace a dicha entrada. Ahí no tendremos broncas. Bastará con usar código condicional de Blogger, encerrando o envolviendo el código del botón y misión cumplida. O...
 
2) Especificar la url del enlace a compartir usando código de Blogger. Hoy explicaré esta forma,  ya que la usuaria que me contactó quería que el botón aparezca desde la página de inicio y se pueda compartir la entrada.

Para evitar confusiones voy a explicar de forma sencilla (éso espero) con pasos, cómo poner el botón para que aparezca desde la página de inicio y se comparta la entrada respectivamente. De tal modo que cualquier interesado pueda ponerlo ;)

Pasos

1. Primero hay que agregar el siguiente código, mismo que Facebook facilita desde su página, a los que solamente agregué unos caracteres para que Blogger lo acepte. Este código debe estar después de la etiqueta <body>. Así que tendrás que ir a Editar HTML, buscar: <body> con la ayuda de su buscador y que activas presionando las teclas "Ctrl" y "F" al mismo tiempo, y lo pegas después de dicha etiqueta.
   <div id='fb-root'/>
<script>//<![CDATA[
  (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.3";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));//]]></script>
NOTA: Toma en cuenta que si ya agregaste por ejemplo el complemento para páginas (Page Plugin), ya habrás agregado el código anterior y por lo tanto, no necesitas volver a ponerlo.
   
   
2. Luego, hay que agregar el código para que se vea el botón en cada entrada. Para ello, hay que tener en cuenta dónde quieres que aparezca, para poder colocarlo, por ejemplo, debajo del título de la entrada, o al final de la entrada. Además tienes que elegir una de las composiciones disponibles del botón o dicho de una forma simple el "estilo de éste". Si quieres que el botón aparezca al final de la entrada, estando en el editor del código de tu blog, con la ayuda de su buscador y que ya activaste desde el paso anterior, busca la siguiente linea:
   <div class='post-footer-line post-footer-line-1'>, y que sería la segunda de arriba hacia abajo ya que la vas a ver dos veces, y "arriba de esa linea de código", agregas el código que muestro a continuación: <div class='fb-share-button' data-layout='button_count' expr:data-href='data:post.url'>
</div>
   Si quieres que el botón aparezca debajo del título del blog, entonces busca esta linea: <div class='post-header'> que sería la segunda de arriba hacia abajo ya que también aparece dos veces, y pones el código debajo de ésta.
   
   He resaltado de naranja el nombre del botón que es: button_count. Es el más utilizado, en éste aparece una burbuja a un lado que indica las veces que se ha compartido el contenido. Puedes poner cualquier de los que tienen disponibles:
   
   • standard
   • box_count
     
   • button_count
     
   • button
     
   
   Y si quieres alguno de ellos, habrá que cambiar: button_count por el nombre que quieres en el código.
   
   También puedes agregar otros atributos al código del botón, es decir, configurar algunos aspectos como el ancho máximo que puede tener y otras cosas de las que hablábamos en la entrada donde explico cómo agregarlo para que se comparta el blog. 
3. Verificas en vista previa. Debería verse el botón debajo de la entrada. Si todo luce bien gurdas los cambios en Guardar plantilla y ¡listo!. Ya habrás agregado el botón y se compartirá la entrada desde la página de inicio.

Notas importantes

• El código que facilito en el paso 2, incluye un fragmento de código que hace que se genere el enlace a la entrada con el título, un resumen y la imagen si la entrada la tiene y si cumple con las especificaciones que Facebook pide para que se comparta la imagen . Ciertos aspectos que ayudan mucho en la forma que se comparte la entrada, es que la plantilla tenga un marcado como el de Shema.org (las plantillas nativas de Blogger ya vienen con dicho marcado), y que de preferencia utilice meta datos del protoco creado por Facebook llamado Open Graph.
• Si quieres que el botón se muestre también en la versión móvil de Blogger, hay que agregar el código del paso 2 de nuevo en la parte del código de la plantilla que corresponde a la versión móvil. Puede servirte la entrada donde explicaba cómo añadir los botones de AddThis. Específicamente en la Parte 3, paso 5, donde menciono qué linea de código que hay que identificar y donde pegar el código, con la diferencia de que, para poner el botón de Facebook habría que pegar el código del paso 2 que menciono aquí. También verifica lo que menciono en la primera parte de dicha guía/tutorial.

Espero sea útil ;)

Páginas útiles de Facebok que recomiendo leer:
https://developers.facebook.com/docs/plugins/share-button
https://developers.facebook.com/docs/sharing/best-practices#images

No Aparecen las Secciones con Gadgets en Diseño. Solución

Hace varios días, recibí un correo de un usuario de Blogger que decía más o menos así:

Hola Karla,
Mi problema y consulta radica en que no puedo ver ningún widget en  "Page Elemments" o "Diseño".
He tratado y he intentado jugar un poco con el css (por aquello de que talvez me lo esté ocultando). Espero que puedas ayudarme. De antemano, muchas gracias.

Ésto es algo que ya me habían comentado antes, pero sucedía solo en la sección de las entradas del blog, ésta no aparece, así como tampoco se ve el widget de las entradas como puede apreciarse en la imagen de abajo. ¿Qué misterioso verdad?





Para que no cunda el pánico, debo empezar por decir que ésto puede pasar solo al usar alguna plantilla de terceros, no en las nativas de Blogger donde ésto no sucede o no debería suceder.

La causa

Partiendo del punto de que la plantilla soporta widgets, por lo que he visto y he comprobado en mi propia experiencia, la causa principal de este misterio/problema se origina al utilizar el elemento: <section> de HTML5 en la sección que comprende el widget de las entradas. Aunque puede darse el caso de que dicha etiqueta haya sido usada también en alguna columna lateral u otra sección que incluya contendio relevante del blog.

Por alguna razón, y que tal vez tenga que ver con su etiqueta propia b:section, Blogger, tiene dificultades al devolver resultados en la página que muestra los "elementos de la página" o "Diseño" cuando se utiliza el susodicho elemento <section>, y no aparece la sección con su respectivo gadget, solo se ve el espacio vacio y por lo tanto, no es posible acceder a las opciones de configuración del gadget.

La solución

La solución es simple, tomando en cuenta que se va a mantener el elemento <section>. Solo habrá que cambiar el corchete angular: < de dicha etiqueta por su entidad: < y ésto lo haríamos tanto en la etiqueta de apertura como la de cierre, accediendo al código fuente de la plantilla (en Editar HTML) y para no batallar mucho, usaríamos el buscador de editor pulsando las teclas Ctrl + F, y buscaríamos la susodicha etiqueta.

Entonces nos quedaría así:

<section> Todo el código que encierra la etiqueta </section>

Y así lo haríamos para las secciones que haya. Hecho lo anterior, la sección de la columna principal u otra sección con su respectivo gadget(s) se visualizarán correctamente en la página que muestra los elementos de la página (desde Diseño) y la plantilla tendrá la respectiva etiqueta <section> de HTML5.

Notas Finales

Otra causa que provoca que no se visualice la sección y gadgets desde Diseño, es que simplemente en la plantilla no se han definido secciones propias de Blogger, en cuyo caso no será posible añadir widgets a la plantilla, sino que habrá que utilizar HTML para agregar un elemento desde el código de la plantilla. 

Por lo anterior no habrá que preocuparse mucho, ya que por lo general, las plantillas de terceros que se ofrecen a los usuarios de Blogger soportan widgets. Cuando ocurre, suele pasar solamente en la sección de la cabecera del blog, donde el programador/diseñador o quien haya editado la plantilla a agregado el código de la sección de la cabecera sin utilizar código propio de Blogger, que habilita la funcionalidad de agregar una imagen y configurar la forma en que ésta se muestra desde la sección de Diseño.

Espero sea útil. Como los he extrañado ;)