Monta tus propios iconos para redes sociales en tu Blog - Créate una barra personalizada y ¡rápida!

2) Es importante buscar los iconos del tamaño que realmente vamos a utilizar. Como hemos visto en otras entradas de maquetación, el ancho y alto de cualquier objeto que deseemos poner en nuestro blog se mide píxeles (esos pequeños puntos que conforman la imagen que se ve en pantalla). Para este tipo de presentación, las botoneras oscilan en alturas y anchuras de 28x28 hasta 64x64 o lo que nosotros prefiramos. 

• Para ganar en rendimiento es esencial que no "obligues" al navegador a redimensionar el tamaño de los iconos que utilices. Es decir, si te bajas iconos con unas dimensiones de 512x512 píxeles y luego cuando los "dibujas" en HTML pones "size="32", estás obligando al navegador a que "pierda tiempo" en reducir y escalar a la proporción adecuada los 512x512 de la imagen del icono original a los 32 que le pides al navegador que haga.

• Si no quieres "trabajar mucho", busca directamente en Google "iconos redes sociales png 28x28" o el número que desees.

• Si has encontrado unos que te encantan pero no están en el tamaño que deseas, no hay ningún problema, bájate Image Resizer y cambia el tamaño de la imagen:

•  Una vez descargada e instalada la apliación, selecciona la imagen del icono que te has descargado y haz "click derecho". En el menú contextual de Windows dispondrás de una opción en la que pone "Resize pictures", haz click para redimensionar el icono al tamaño deseado.

• Te saldrá un cuadro de diálogo para que pongas el tamaño en píxeles que vas a utilizar (28x28 ó 32x32 ó 64x64...).

• Si eres de los más atrevidos podrás hacerte tus propios iconos o editar los que te bajaste. Basta con utilizar Photoshop o aplicaciones online como http://www.xiconeditor.com/. Cuando lo tengas lo guardas como .png y te sirve exactamente igual que cualquier icono que descargues de Internet.

3) Una vez tengas tus imágenes, lo mejor es que las pongas en Google Drive o en un almacenamiento fiable y disponible para tí. 

• En Google selecciona en el menú superior "Drive" y el icono de la flecha apuntando arriba que te he marcada en la imagen.

• En el menú desplegable que te sale pulsa "Files" y selecciona las imágenes de los iconos que te descargarte para utilizar en el blog.
• Luego, cuando ya te aparezcan las imágenes subdias, no olvides seleccionarlas con la casilla de verificación que aparece a su izquierda y hacer clic en el icono que te marco en la imagen (el del "hombrecito" con un símbolo +):

• Cuando hagas "Share", vas a dejar la imagen compartida como pública para que pueda dibujarse en tu blog para todos los usuarios que accedan al mismo. Si no la compartes, no se dibujará. Deberás seleccionar "Public" en la sección "Who has access" tal como te muestro en pantalla. Además cópiate el código que te he marcado de cada una de las imágenes que hagas públicas. Es el código identificativo único que Drive asignará a tu imagen para que puedas compartirla, lo utilizaremos después en los próximos pasos (cada imagen que subas tendrá uno, apúntate cada uno con cada imagen que compartas):

 

Otra opción para ganar más velocidad para el dibujado de los iconos en el navegador de tus usuarios:

1)  Créate una nueva entrada vacía en Blogger.

2) Con el icono insertar imagen metes la imagen en la entrada como sueles hacer normalmente (la subes a Blogger como normalmente haces o utilizas una ya existente). Mete la imagen de cada icono.

3) Una vez insertada en la entrada, haz "clic" derecho sobre la imagen y copia la URL que Blogger ha asignado a la misma.

4) Cuando necesites llamar a esa imagen en tus páginas, por ejemplo iconos de redes sociales o de más que puedas tener alojados en Drive o servidores externos, cambia la URL por la nueva que Blogger ha asignado a la imagen al alojarla en sus servidores.

Con esto la carga de la imagen será por HTTP con un correcto alojado en caché y además dentro de los propios servidores de Blogger (sin necesidad de "salir fuera" a por dicha imagen).

4) Ahora queda meter las imágenes que hemos compartido en Drive de los iconos que nos descargamos en los pasos anteriores, dentro del código fuente que te voy a mostrar y dentro de un "Gadget" Blogger de los de tipo "HTML/Javascript":

• Dentro de Blogger, en el menú de la izquierda haz "click" sobre la opción "Diseño"

• A continuación pulsa "Añadir un Gadget" de la zona donde desees y selecciona el Gadget "HTML/Javascript"

• Dentro de la pantalla de configuración del Gadget HTML/Javascript copia y pega el código que te pongo a continuación y luego te explico:

• El código:

<p align='left'> <a href='https://www.facebook.com/TU_DIRECCION_FACEBOOK' target='_blank'><img alt='Sígueme en Facebook' height='30' src='https://googledrive.com/host/0Bwgc28XHjPA2OWpfdWU3S2M0M2M/' width='30'/></a><a href='https://plus.google.com/u/0/TU_CODIGO_GOOGLE+' target='_blank'><img alt='Sígueme en Google+' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2OTZmaW5LY3JPdXM' width='28'/></a>                                        <a href='https://twitter.com/TU_CODIGO_TWITTER' target='_blank'><img alt='Sígueme en Facebook' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2VURFcDVLNlJxTVk/' width='28'/></a>                                        <a href='http://feeds.feedburner.com/TU_FEED' target='_blank'><img alt='Sigue mi Feed' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2NEVDM2M2blVCa2M/' width='28'/></a>                                                                                                                                                                     </p>                             <a href='https://plus.google.com/hangouts/_?gid=
APP_ID' target='_blank'><img alt='Inicia un Hangout' height='28' src='https://googledrive.com/host/0Bwgc28XHjPA2QWNrY3UwdzJGQ00/' width='28'/></a>                                                                                                                                                                   </p>

•  Recuerda copiar y pegar el código fuente en la pantalla de configuración del gadget HMTL/Javascript sin que haya retornos de carro (enter) o espacios en blanco añadidos.

• Este código es sencillo y mucho más rápido que cualquier "script" de cualquier añadido que nos bajemos de Internet para dibujarnos los iconos de acceso a las redes sociales:

Se trata de puro HTML:

• <p align="left": Puedes utilizarlo si lo deseas con center, right o left. Te permitirá situar la botonera en la misma línea donde la hayas colocado pero a izquierda, centro o derecha. Si quitas esta línea (por defecto es left), no olvides quitar el "</p>" del final para el cierre.
• <a href: es cada hiper-enlace (enlace a secas) a tu dirección de la aplicación de redes sociales a la que te va a dirigir el icono de imagen que después acompaña. En Rosa te he puesto la parte del código que debes editar para poner tu propia dirección de Facebook, Twitter, Google+, o tu Feed. 
• <img alt=: forma parte del href, es el texto alternativo relacionado al icono y a la dirección que pusiste que debe abrir el navegador cuando se pulse el enlace.
• src=: es la URL a la imagen del icono que quieres que se muestre asociado a la dirección del "<a href>" al que cuando pulse el usuario, el navegador le dirigirá. Aquí ponemos la URL que nos guardamos del paso 3). Como es una dirección de Drive, deberás ponerla de esta manera para que funcione en el navegador:

https://googledrive.com/host/TU_CÓDIGO_DRIVE

• "width" y "height": el ancho y alto en el cual quieres que se dibuje la imagen. Si te bajaste una imagen de 28x28 pondrás "width=28" y "height=28". Escribirás el tamaño que asignaste a las imágenes que te descargarte del paso 2). Aquí lo mejor es que la imagen que te descargaras coincida totalmente con el ancho y alto que escribas en el código, de manera que el navegador no tenga que "gastar tiempo" en redimensionar la imagen del icono.

Resumiendo: cada "tupla" "<a href" contiene la dirección a la imagen a la que el navegador dirigirá al usuario cuando pulse sobre la imagen que hemos puesto en la dirección indicada del "src" con el tamaño "width" y "height" que hayamos especificado.

5) Y ahora ya por fin, utiliza la "Vista Previa" para ver dónde prefieres colocar tu propia botonera personalizada.

¡Eso es todo!, así podrás disfrutar de unos bonitos "iconos" de acceso a tus aplicaciones para redes sociales.

Para los más osados, sólo para usuarios avanzados

Os explico en pocos pasos cómo añadí mi "botonera social" a la cabecera del título. Es una zona ideal para colocar los iconos de acceso a aplicaciones sociales puesto que el usuario los ve desde que accede a tu Blog.

El problema que el proceso no es sencillo y requiere que sí o sí hagas una copia de seguridad de tu blog, pues si vas a seguir los pasos, cada plantilla tiene una formato diferente y se pueden cometer muchos errores.

Conceptos Iniciales

Buscando nuestro código:

Eso es todo, así fue como metí mi botonera personalizada en el título y cabecera del blog.