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.

image

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

image

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:
    image

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://

image

2.- Cambio el label desde el panel de control en “rename”

image

image

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

image

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

image52 Criticando sitios que comparten Vuelos

Escribí esto el 22/04/2010

Tu comentario

Usamos cookies para obtener datos estadísticos de su navegación y poder ofrecer publicidad contextual de terceros

ACEPTAR
Aviso de cookies