El otro día me hacían un comentario en donde me decían que si el hecho de tener un botón, haría que tuviéramos más visitas, y lo que pienso es que "dependerá" del contenido que se comparta (el tema), de donde fue compartido (la red social) y quien lo vio, obviamente si alguien lo ve en una red social y le interesa, irá a echar un vistazo al artículo, para ver de que se trata el asunto, por otro lado, si no tenemos una vía para que el contenido sea compartido, entonces, menos probabilidades tendremos de que se comparta y que otras personas lo vean, pueda interesarles, y vengan a verlo, ¿no lo crees?
Blogger ya facilita unos botones para compartir el contenido de tu blog, y para que aparezcan en cada entrada, tienes que ir a los elementos de la página o Diseño (en la nueva interfaz, ahora disponible en
Blogger in Draft) , luego, haces click en "editar" en la sección de "Entradas del blog", y marcas la casilla correspondiente.
Si esos botones no se ajustan a tu diseño, o quieres poner botones personalizados lo puedes hacer libremente, y hoy te tengo una imagen que contiene todos los iconos que puedes ver a continuación y que puedes usar, si así lo quieres:
Imagen con fondo blanco
Para hacer funcionar los botones, vamos a usar una técnica llamada
sprites, de ese modo, estamos usando sólo una imagen para todos los botones, en lugar de las 16 imágenes que necesitaríamos para lograr poner los 8 botones + los del evento hover, (al poner el puntero del ratón encima del botón) y ésto se traduce en menos tiempo de carga para tu blog.
La imagen incluye:
- Botón de Twitter
- Botón de Facebook
Botón de Google Buzz (leer actualización abajo) Boton de Orkut (leer actualización abajo) - Boton de Stumbleupon
- Botón de Delicious
- Botón de Bitácoras
- Botón para compartir entradas por email.
Si estás convencido y quieres probarlos, entonces, veamos como ponerlos. Recuerda
almacenar la imagen por ti mismo desde Blogger ;)
Cómo poner los botones paso a paso:
Paso 1: Estando en tu escritorio, ve a Plantilla ► Personalizar ►Avanzado► Añadir CSS, y ahí en el campo grande, a tu derecha, pega el siguiente código:
#m-soc{margin:10px 0 0 10px;padding:0;width:400px;height:84px;background:none}#m-soc h4{padding:6px 0;margin:0}#m-soc li{list-style:none;margin:0;padding:0;float:left;border:none!important}#m-soc li a{background:url(URL_DE_LA_IMAGEN) no-repeat 0 0;margin:0;padding:0;display:block;width:50px;height:42px;overflow:hidden;text-indent:100%;white-space:nowrap}#m-soc li a.twitter{background-position:0 0}#m-soc li a.facebook{background-position:-50px 0}#m-soc li a.g-buzz{background-position:-100px 0}#m-soc li a.stumb{background-position:-200px 0}#m-soc li a.deli{background-position:-250px 0}#m-soc li a.bitacoras{background-position:-300px 0}#m-soc li a.correo{background-position:-350px 0}#m-soc li a.twitter:hover{background-position:0 -42px}#m-soc li a.facebook:hover{background-position:-50px -42px}#m-soc li a.orkut:hover{background-position:-150px -42px}#m-soc li a.stumb:hover{background-position:-200px -42px}#m-soc li a.deli:hover{background-position:-250px -42px}#m-soc li a.bitacoras:hover{background-position:-300px -42px}#m-soc li a.correo:hover{background-position:-350px -42px}
: He comprimido el CSS anterior.
Importante: Necesitas poner la URL de la imagen con los iconos, donde dice
URL de la imagen. Si no sabes cómo obtener la URL de una imagen que almacenas desde Blogger,
échale un vistazo a esta entrada.
Para guardar lo que has agregado, haces click en APLICAR AL BLOG.
Paso 2: Vas Plantilla > editar HTML, y luego haz click dentro del editor, luego , pulsa Ctrl + F, y en el campo de búsqueda pones:
<data:post.body/>
O bien, podemos ponerlos en cualquier linea de la sección del post-footer, en donde solo afectaremos la posición de los botones dentro de la entrada, y para ello en lugar de la linea anterior buscamos esta otra linea:
<div class='post-footer-line post-footer-line-1'>
Pulsas Enter, y una vez que te envíe
a la linea
de código
, inmediatamente después pegas esto:
<b:if cond='data:blog.pageType == "item"'><div id="m-soc"><h4>¡Si te gusta, compártelo!</h4><ul><li><a class='twitter' expr:href='"https://twitter.com/home?status=" + data:post.title + ": " + data:post.url' target='_blank' title='Twittear'> Twitter</a></li><li><a class='facebook' expr:href='" https://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' target='_blank' title='Compartir en Facebook'>Facebook</a></li><li><a class='stumb' expr:href='"https://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en Stumbleupon'>Stumbleupon</a></li><li><a class='deli' expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title=" + data:post.title' target='_blank' title='Compartir en Delicious'>Delicious</a></li><li> <a class='bitacoras' expr:href='"http://bitacoras.com/anotaciones/" + data:post.url' target='_blank' title='Compartir en bitácoras'>Bitacoras</a> </li> <li><!-- email post links --><b:if cond='data:post.emailPostUrl'> <span class='item-action'><a class='correo' expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'> </a></span></b:if></li></ul></div></b:if>
Todos los textos que están resaltados de azul, los puedes personalizar; donde dice:
¡Si te gusta compártelo!, es el texto que aparecerá antes de los botones, y todo lo demás son los textos del tooltip (el texto que aparece al poner el puntero sobre el botón) para cada botón.
Paso 3: Verifica en vista previa y si todo luce bien guarda los cambios. Los botones no los verás hasta que entres a cada entrada.
Importante: el código marcado de azul, sirve para que se puedan compartir las entradas por correo electrónico, a través del formulario que ofrece Blogger, y ésto sólo funcionará si lo habilitamos, y para hacerlo, tenemos que ir a la pestaña "Diseno", y hacer click en "Editar" de la sección de las entradas, y luego activar la casilla que dice: Mostrar enlaces de envío de entradas, como puede apreciarse en la siguiente imagen:
Si no lo haces, simplemente el botón con el icono de sobre no va a aparecer.
Ese código viene en la plantilla, para que no se repita esta función y salga el icono de Blogger para envío de entradas, que es este:
necesitas buscarlo y eliminarlo, y ese código lo encuentras al expandir plantillas de artilugios, en la edición de HTML de la plantilla:
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a class='correo' expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
</a>
</span>
</b:if>
Para que se entienda, lo estamos "moviendo de lugar" y agregando la clase para que se vea la imagen de
sobre de la imagen con los iconos, por eso lo eliminamos. Algunas plantillas editadas o nuevas no lo trae.
Cómo Agregar el botón de Google +1
Si quieres agregar el botón de Google +1, y ya tienes el script de éste añadido, (Blogger está agregando el script a las plantillas así que solo agrega estas lineas) entonces, sólo necesitas agregar después de </ul> esto :
<div class='google1'><g:plusone size='medium'/></div>
También modificar el ancho de: #m-soc, de 400px a: 450px; y agregar esta linea al código del paso 1:
.google1{margin: 12px 0 0 0}
Los valores del margen se puedes editar, y los usamos para alinear el botón
. 12 pixeles es el margen de arriba y lo que hace es bajar hacia abajo el botón. Los cuatro valores se leen así, de izquierda a derecha: [12px arriba] [0 pixeles a la derecha][0 pixeles abajo] [0 pixeles a la izquierda].
Imágenes con otros fondos
Fondo transparente:
Fondo Negro:
Puedes ver la demostración en
este blog, y en mi blog funcionando, ahora sin el botón de Bitácoras. Esto funciona en todos los navegadores incluyendo IE6.
ACTUALIZACIÓN: Octubre/20/2011. He eliminado las lineas de código que corresponden al botón de Google Buzz, ya que
ese servicio de Google será retirado próximamente. También cambiado la opción para acceder a la configuración de envío de entradas considerando que ya tenemos nueva interfaz.
He eliminado también el código del botón de orkut ya que
el servicio fue retirado.
Crédito por lo botones:
Iconos
