Creo que todos estamos de acuerdo en la importancia que tiene el tener en nuestro blog las vías que permitan estar en contacto con nuestros lectores/seguidores a través de las distintas redes sociales que usamos. Por ello, ponemos botones de
Twitter, Facebook y Google+, de ese modo cualquier usuario puede acceder a nuestras páginas en dichas redes sociales, seguirnos o recomendarnos.
Pensado en eso y en
alternativas efectivas para que puedas poner en tu blog, y así facilitarle a tus usuarios que sigan y/o recomienden tu contenido, vamos a integrar todos esos botones en una cajita contenedora para que todas las opciones estén siempre accesibles.
Esta cajita contendrá:
1. El botón de seguir de "Twitter para que te puedan seguirte desde ahí, sin tener que ingresar a tu página de Twitter".
2. El botón de Facebook, para que los usuarios recomienden tu blog.
3. La insignia standar de Google+, para que puedan agregarte a un círculo y hacer +1 a tu blog.
4. Agregaremos también la vía para que se suscriban al blog, pensando en que usas FeedBurner. También un icono para que puedan suscribirse usando algún agregador, de los muchos disponibles.
Tal y como la puedes ver a continuación:
Cómo agregar la cajita
Notas: Para la cajita tenga la apariencia que puedes ver, he hecho ajustes claves. En el caso de la insignia de Google+ por ejemplo, el ancho de ésta es mayor al ancho de la cajita contenedora, ésto para que no se vea una caja dentro de otra caja (la de la insignia dentro del contenedor).
El ancho de la cajita contenedora, es de
275 pixeles, por lo tanto, tu columna lateral deberá tener un ancho mayor a éste. Se puede reducir la cajita y hacer los ajustes para que todo se vea bien proporcionado, pero ésto lo recomiendo a usuarios que ya sepan algo de CSS y además hay que considerar que casi todos los botones e insignia, requieren un ancho mínimo para que se muestren con sus características.
Bien, pues dicho lo anterior, ahora veamos cómo agregaras la cajita, y como ya todo está integrado, tú sólo tendrás que agregar los códigos a tu blog, y editarlos con tus datos.
- Primero, agregas el siguiente CSS (lo he comprimido), yendo a Plantilla > Personalizar > Avanzado > Añadir CSS. De ese modo, podrás hacer cambios y ver el resultado desde ahí. No olvides aplicar los cambios en Aplicar al blog.
#caja-redes{width:275px;padding:0;margin:0;list-style:none;background:#f7f7f7;border:1px solid #dcdcdc;overflow:hidden}
#caja-redes strong, .c-rss{color:#848484;font-size:12px}
#caja-redes div{overflow:hidden}
.cg-plus{height:99px;padding-bottom:6px;border-right:1px solid #dcdcdc;border-bottom:1px solid #dcdcdc;margin:0 -1px 0 -5px}
.c-fb{border-bottom:1px solid #dcdcdc;padding:8px 3px 2px;margin:5px}
.c-tw,.c-mail{margin:5px;padding:6px 3px 0}
.c-rss{margin:5px;padding:12px 4px}
a.c-rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYUWkJtg6Hz_ZCKRXzGv1jrGfNRSVBwMhrdejwxQz86AiXgFEaOjtPGEo5dkCqsfK_wxXQGlrrVxQnovj9TB6DH9pOUySD3OEttM8Eb8B0DcR70jwDa_VMMCOg3JMMvUHglWKtGq0afKY/s1600/rss1.png) no-repeat 25% 40%;display:inline;padding:0 0 0 26px;color:#848484}
input[type="text"].campo,input[type="submit"].enviar{border:1px solid #dcdcdc;float:left;color:#848484;display:block;height:20px;font-size:11px}
input[type="text"].campo{text-indent:3px;width:145px;margin-right:-3px}
input[type="submit"].enviar{height:24px;cursor:pointer;text-shadow:0 1px 0 #fff;background:-webkit-linear-gradient(top,white,#d8d8d8);background:-moz-linear-gradient(top,white,#d8d8d8);background:-ms-linear-gradient(top,white,#d8d8d8);background:-o-linear-gradient(top,white,#d8d8d8)}
- Luego, Vas a "Diseño" y seleccionas un gadget en la sección de la columna lateral, con la opción de HTML/Javascript, y pones el siguiente código que tendrás que editar con tus datos. Una vez editados, guarda los cambios.
<div id="caja-redes"><div class="c-fb"><iframe src="//www.facebook.com/plugins/like.php?locale=es_ES&href=http%3A%2F%2Fwww.compartidisimo.com&send=false&layout=standard&width=260&show_faces=false&font&colorscheme=light&action=like&height=42" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:42px;" allowtransparency="true"></iframe> </div> <div class="c-tw"><a href="https://twitter.com/compartidisimo" class="twitter-follow-button" data-dnt="true" data-lang="es" data-dnt="true">Seguir a @compartidisimo</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div><div class="cg-plus"><div class="g-plus" data-width="286" data-href="//plus.google.com/109627432877953314897" data-rel="publisher"></div></div><div class="c-mail"><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=compartidisimo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><strong>Compartidísimo directamente a tu e-mail</strong><p><input class='campo' name='email' placeholder='ingresa tu e-mail' type='text'/></p><input name='uri' type='hidden' value='compartidisimo'/><input name='loc' type='hidden' value='es_ES'/><input class='enviar' type='submit' value='Suscríbete'/></form> </div> <div class="c-rss">O suscríbete por otras vías:<a class="c-rss" href="//feeds.feedburner.com/compartidisimo" title="Vía RSS" target="_blank">RSS</a></div>
Edita los datos, de arriba hacia abajo tomando en cuenta que en:
- www.compartidisimo.com pones la URL de tu blog, omitiendo el http:// pondrías por ejemplo miblog.blogspot.com, pensado que usas subdominio.
- compartidisimo ahí pones el nombre de usuario de Twittter.
- Seguir a @compartidisimo es el texto del botón de twitter.
- 109627432877953314897 ahí pones el ID de tu página de Google+, o el del perfil. Para conseguir ese número tienes que ir a la página en Google+, y copiar la numeración que aparece en la barra de direcciones de tu navegador.
- compartidisimo ahí pones la URI de FeedBurner. Puedes obtenerla accediendo a la página de FeedBurner,y luego haces click en el icono de RSS que está a un lado del nombre de tu blog, luego se abrirá una ventana con tus feeds. El nombre de la URI es el texto que aparece después de la barrita diagonal "/" en la barra de direcciones.
- Compartidísimo directamente a tu e-mail ese es el texto que aparece antes del campo para que ingresen el e-mail para la suscripción del blog.
- compartidisimo otra vez pones la URI de FeedBurner.
- O suscríbete por otras vías: este es el texto que esta antes del icono de RSS.
- compartidisimo ahí va de nuevo la URI de FeedBurner.
¡Y listo!, ya habrás agregado una cajita con todos los elementos para que sigan y recomienden tu blog ;)
Notas finales:
- El código que esta de morado es de los scripts de Twitter y
Google+ respectivamente (de arriba hacia abajo. He eliminado el script de G+, ya que ahora por defecto lo agrega a la plantilla por lo que no es necesario volverlo a poner*) Si ya usas algunos de esos elementos, no vuelvas a agregar el script, y asegúrate que esté colocado hacia abajo después del último botón.
- En el caso de la sección de facebook, no vayas a disminuir el alto en el código (si usas el mismo ancho) , ya que hasta ahora, se muestran distintas leyendas si has o no ingresado a tu cuenta de Facebook.
Ah!,
a propósito de facebook, hace mucho que quité el botón para que hagas me gusta al blog, agradezco a quienes compartieron el enlace sin que yo tuviese el botón. Todos los me gusta se perdieron al hacer el cambio de dominio, así que si te gusta el blog, no olvides compartirlo en Facebook haciendo "Me gusta" ;)
¿Quieres ver la cajita en acción?, entonces echa un vistazo a la demostración.
Importante: Si vas agregar la insignia usando el perfil, y no una página de Google+, necesitarás cambiar el alto del espacio reservado para la insignia, (ya que ahí no se muestran los avatares, y por lo tanto, ésta es menos alta). Lo haces en esta parte del CSS (del paso 1)
.cg-plus{height:99px; ...
Cambia
99px, por
52px. Ten cuidado de no borrar el punto y coma al final.
Enlaces de las páginas de las distintas redes sociales, con los botones oficiales
Botón de Seguir de Twitter
Botón de Me gusta de Facebook
Insignia de Google+
*
Actualizado 29/Enero/2014. Hubo cambios en la insignia de Google, por lo tanto tuve que cambiar el alto del espacio reservado para ésta en la cajita. También
eliminé el script de Gogle+, ya que Blogger lo agrega por defecto a la plantilla.
