Crea multi-hipervínculos con Butns

butns.com es un servicio freemium que nos permite asignar múltiples enlaces a lo que en principio es un sólo hiperví­nculo.

En esta imagen tienes un ejemplo de un enlace a Barack Obama que despliega un menú con una imagen y 5 hiperví­nculos a distintos sitios.

El ejemplo anterior es digamos avanzado, lo veremos más adelante.

Instrucciones básicas

1. Escoge el anchor link
2. Escoge el estilo del enlace
3. Escoges los enlaces

Una vez configurado obtienes el código para insertar en tu web.

En esta tercera parte, la de los enlaces es donde está el meollo. Además de tener a mano los más populares de búsquedas, redes sociales, noticias, etc. está la opción de añadir tus propios enlaces, una vez introducido te cogerá el favicon de la web y podrás cambiarle el anchor text, el «label» a ese enlace.

Tutorial avanzado

• Es compatible con todos los navegadores
• y especialmente útil cuando por ejemplo queremos dar varias opciones de descarga de un archivo:
  

O por ejemplo poner enlaces a mis perfiles en Internet. Veamos el ejemplo para Twitter

1.- Introduzco la URL

http://twitter.com/ceslava

Me coge el favicon y se queda con el label de la URL menos las http://

2.- Cambio el label desde el panel de control en «rename»

3.- Y así­ podrí­a añadir más enlaces a los perfiles de Facebook, Flickr, Google, etc.

4.- ¿Cómo añadir la imagen al igual que hemos visto la de Obama? Desde el panel no tenemos esta opción, para añadir algo que no sea un enlace, un texto o una imagen debemos hacerlo editando el código que nos devuelve.

Teniendo en cuenta que la taxonomí­a de cada enlace es:

http://twitter.com/ceslava

Tiene dos parámetros configurables: icon y label, simplemente continuamos la URL de forma que si queremos sólo el label tendrí­amos:

http://twitter.com/ceslava{label:=@ceslava}

Y si queremos también cambiarle el icono añadimos al parámetro icon la URL de la imagen

http://twitter.com/ceslava{icon:=http://dominio/images/icono.png, label:=@ceslava}

Sabiendo esto podemos incluir elementos que no sean enlaces dando el valor a icon=none

{icon:=none, label:=Esto no es un enlace}

Pero como además podemos poner etiquetas HTML en el parámetro label podremos poner:

{icon:=none, label:=<img src=»http://imagen.jpg»/>}

Lo único que tienes que tener en cuenta es que debes de convertir los caracteres a ASCII o entidades HTML, es decir, el siguiente ejemplo:

{icon:=none, label:=<img src="http://a3.twimg.com/profile_images/579862833/avatar-twitter_bigger.png"/>}

equivaldrí­a a este código:

%257Bicon%253A%253Dnone%252Cnone%252Clabel%253A%253D%253Cimg%2520src%253D%255C%2522http%253A//a3.twimg.com/profile_images/579862833/avatar-twitter_bigger.png%255C%2522%253E%257D

En el blog anuncian que están trabajando en un plugin para WordPress que seguramente sea mucho más fácil

Vuelos