5 de mar. de 2011

¿Cómo poner iconos sociales del tipo sígueme en el Blog?


Los iconos sociales del tipo "Sígueme" permite a los lectores de tu blog enlazar con los diferentes perfiles sociales Twitter, Facebook, RSS, Google+,Pinterest, Youtube en los que tienes presencia.

Si eres nuevo y no conocidas iniciaBlog,  me gustaría darte la bienvenida y contarte que en este blog podrás encontrar multitud de tutoriales para tu blog usando Blogger, por lo que te invito a visitar el índice de contenidos para descubrir nuevos temas.

iconos sociales twitter, facebook, pinterest, linkedin, youtube en Blogger
Tutorial que te ayudara a incluir icono sociales a tu blog.

¿Qué necesitas?

Lo más importante es buscar un icono que te guste, que vaya con el estilo de tu blog, elegir el tamaño más apropiado y por supuesto tener claro la URL hasta tu medio social.

Te propongo dos maneras de afrontar este reto, la primera es mediante las siguientes colecciones seleccionadas previamente por iniciaBlog, la segunda es buscando otro estilo de iconos.

En las colecciones seleccionadas por iniciaBlog tienes dos tamaños y podrás ver que lo único que tienes que hacer es copiar el fragmento de código que tienes, pegarlo en un gadget del tipo HTML/JavaScript de Blogger....bueno...vamos por parte, esto te lo explico luego. Mira primero estas colecciones y seguimos un poco más abajo.

Método 1. Colecciones de iconos de iniciaBlog (método fácil)

Colección Estandar

Tamaños/Codigo HTML

CANAL

M (32px)

XL (48px)

Twitter

Facebook

Google+

RSS:

Flickr

Picasa

Youtube

Tumblr

Pinterest

Linkedin

Blogger

Instagram


Colección Ballons

Tamaños/Codigo HTML

CANAL

M (32px)

XL (48px)

Twitter

Facebook

Google+

RSS:

Flickr

Picasa

Youtube

Blogger

Instragram


Video tutorial


Tutorial Paso a Paso

Paso 1. Copia el código de cada icono en un bloc de notas:

  • Una vez seleccionado el icono que te gusta, copia el fragmento de código que se encuentra justo debajo de cada imagen.
  • Abre el Bloc de notas y pega el fragmento de código
  • Solo tienes que indicar la URL hasta tu canal social correspondiente al icono, es decir si el icono es de Twitter deberás indicar la url hasta tu canal en Twitter, lo mismo para el resto.
  • Te he puesto en MAYUSCULAS allí donde deberás indicar la URL correpondiente
  • Repite estos mismos pasos si vas a incorporar a tu blog varios de estos iconos. De manera que el mismo bloc de notas vas pegando los diferentes fragmentos de código correspondiente a cada uno de tus canales sociales.

Paso 2. Pegar el código HTML en el blog

  • Una vez que hayas indicado la URL de tus canales sociales a cada pequeño fragmento
  • Selecciona todo el código personalizado del bloc de notas y cópialo
  • Pega el código en el Blog, para ello
    • Abre la pestaña "Diseño"
    • En la barra lateral elige "Añadir nuevo Gadget"
    • Se muestra una lista, elige el que pone "HTML/Javascript"
    • En título pon por ejemplo Sígueme
    • En contenido, pega el código obtenido anteriormente
    • Guarda la plantilla y visualiza el blog.
    • Recuerda que puedes mover el Gadget para situarlo en el sitio deseado
Prueba que cada icono te lleva a tu canal social, si esto no fuera así es que hay algo que no va en la dirección que has puesto, edita el propio Gadget y seguro que encontrarás dónde te has equivocado.

Seguimos publicando nuevas colecciones y completando las existentes, por lo que si necesitas un icono que no está en cualquiera de las colecciones anteriores solo tienes que solicitarlo mediante un comentario en esta misma entrada.

Hasta aquí el tutorial si te has decidido algunas de las colecciones de iniciaBlog. Espero que te haya resultado fácil, te invito a dejar un comentario y a compartir esta entrada con tus amigos y seguidores.

Ah! se me olvidava, si quieres recibir las próximas publicaciones de iniciaBlog directamente en tu correo electrónico solo tienes que hacer clic para suscribirte a nuestro boletín gratuito.

Por último, por favor no salgas de iniciaBlog sin ver esto, creo que te va a gustar.





Método 2. Crear tu propia colección de iconos (avanzado)


Paso 1. Busca un gráfico (.png) por cada canal social que tengas en tu blog
  • Por ejemplo vamos a buscar un icono para nuestro canal social en Twitter
  • Te recomiendo el servicio iconFinder. Haz clic en este enlace para que veas iconos de Twitter: 
  • Cuando veas uno que te guste, haz clic sobre la imagen para acceder a opciones de descarga
  • Elige el tamaño del icono a descargar. Los que yo tengo a la derecha son de 32x32 píxeles
  • Descarga el icono en formato PNG hasta tu ordenador
Paso 2. Publica los iconos en un Hosting Gratuito
Como estamos en Blogger, no podemos subir directamente un archivo hasta un hosting. Para suplir esto lo que haremos es utilizar Google Site que te permite publicar archivos hasta 1 Gbytes, más que suficiente.
  • Entra en Google Sites
  • Crea un sitio nuevo. Solo si no lo tenias creado de antes 
    • Presiona el botón Crear nuevo sitio
    • Coloca un nombre para tu sitio (sin espacios ni caracteres extraños)
    • Presiona el botón Crear Sitio

  • Una vez dentro, ve al desplegable Más acciones y luego elije Administrar Sitio 
  • A la izquierda veras otro panel elije la opción Archivos Adjuntos
  • Presiona el botón Subir 
  • Examina tu ordenador y selecciona la imagen elegida en el paso anterior
  • Publica en el directorio principal (no es una subcarpeta) de tu sitio web en Google Site.
Paso 3. Código HTML por cada canal social
  • Copia el siguiente fragmento de código. Se trata de una simple imagen alojada en Google Site con un link hasta el canal social. En este caso corresponde a Twitter:
<a href="http://www.twitter.com/iniciablog" target="_blank"><img src="https://sites.google.com/site/iniciablog/twitter32.png" alt="Seguir a iniciaBlog en Twitter"/></a>
         En lo seleccionado en rojo debes colocar tu dirección de twitter, facebook, etc.
         En lo seleccionado en verde desde indicar la dirección url de tu sitio en Google Site/tuarchivo.png 
         En lo seleccionado en azul, debes indicar un texto de ayuda (texto alternativo)
  • Pega el fragmento anterior hasta un bloc de notas
  • Modifica el fragmento e indica tu canal social y la url hasta el archivo publicado en Google Sites


Paso 4. Pegar el código HTML en el blog
  • Selecciona tu fragmento personalizado y cópialo
  • Pega el código en el Blog, para ello
    • Abre la pestaña "Diseño" y luego "Elementos de la página"
    • En la barra lateral elige "Añadir nuevo Gadget"
    • Se muestra una lista, elige el que pone "HTML/Javascript"
    • En título pon por ejemplo Sígueme
    • En contenido, pega el código obtenido anteriormente
    • Guarda la plantilla y visualiza el blog.
    • Recuerda que puedes mover el Gadget para situarlo en el sitio deseado
Comprueba que se ve el icono y que cuando haces clic te lleva a tu canal.

Recuerda que si luego decides poner otros iconos sociales, debes editar el Gadget donde está el primero de ellos e ir pegando cada uno de los códigos por cada canal social que tengas.

Mil gracias por llegar hasta aquí, por favor deja tu comentario tanto si te ha salido como sino, es la única manera de seguir mejorando.

Si quieres recibir las próximas publicaciones de iniciaBlog directamente en tu correo electrónico solo tienes que hacer clic para suscribirte a nuestro boletín gratuito.

Actualizado el 15 de Mayo de 2013




Más información ¿Cómo poner el botón de...:?