Añadir botón de compartir en Twitter personalizado

En este tutotial vamos a explicar como añadir un botón personalizado para twittear en nuestro sitio web. Si quieres consultar la documentación oficial entra aquí.

Crear botón para compartir en twitter

Añadir el botón de Twitter es muy sencillo, añadiendo esta línea ya tendríamos un enlace que abre la ventana donde poder escribir el tweet a compartir:

1
<a href="http://twitter.com/share">Crear nuevo Tweet</a>

Abrir la ventana de compartir en twitter en un popup

Para abrir la ventana de compartir en Twitter en una nueva ventana emergente o ‘popup‘ añadiremos el siguiente código javascript siguiente debajo del enlace crado anteriormente.

Para que se ejecute la función javascript se le debe en el atributo ‘class’ del enlace anterior la clase ‘popup’, ya que este será el selector jQuery utilizado para añadir el evento click al enlace anterior:

01
<a class="popup" href="http://twitter.com/share">Crear nuevo Tweet</a>
02
 
03
<script>
04
  $('.popup').click(function(event) {
05
    var width  = 50,
06
        height = 400,
07
        left   = ($(window).width()  - width)  / 2,
08
        top    = ($(window).height() - height) / 2,
09
        url    = this.href,
10
        opts   = 'status=1' +
11
                 ',width='  + width  +
12
                 ',height=' + height +
13
                 ',top='    + top    +
14
                 ',left='   + left;
15
 
16
    window.open(url, 'twitter', opts);
17
 
18
    return false;
19
  });
20
</script>

Añadir parámetros por defecto al nuevo tweet

Configurar el texto por defecto del tweet

Para añadir un texto por defecto al nuevo tweet añadiremos el parámetro ‘text‘. Este parámetro indicará el texto que se está compartiendo, y deberá ser debidamente codificado en la url.

Por ejemplo vamos a twittear “Gracias Developando por el tutorial“. Para ello al enlace con el que estamos trabajando le vamos a añadir el siguiente parámetro ‘text‘:

1
<a href="http://twitter.com/share?text=Gracias%20Developando%20por%20el%20tutorial">Crear nuevo Tweet</a>

Como podéis ver con ‘%20‘ estamos codificación los espacios en blanco. Si queréis probar el funcionamiento de esta enlace hacer click aquí

Cuando un usuario haga clic en este enlace lo que verá será una ventana como la siguiente con el texto a twittear:

Configurar el parámetro via para indicar un nombre de usuaro en twitter

Con el parámetro ‘via‘ se puede añadir el nombre de un usario de Twitter al que atribuir el twitter. Para añadir por ejemplo nuestro usuario en Twitter tendríamos que añadir ‘&via=Developando‘ al enlace anterior:

1
<a href="http://twitter.com/share?text=Gracias%20Developando%20por%20el%20tutorial&via=Developando">Crear nuevo Tweet</a>

Si pruebas este nuevo enlace comprobarás que se ha añadido un nuevo parámetro que hace referencia al usuario de Twitter ‘Developando‘:

Resultado final del tutorial

Con estos sencillos pasos habremos creado un botón para compartir contenido en twitter desde nuestro sitio web con el que compartiremos la url de la página actual más el contenido indicado en ‘text‘ y el parámetro ‘via‘:

El paso final sería editar los estilos a aplicar al enlace para personalizarlo a nuestro gusto, con los colores, tamaño y demás requisitos de nuestro sitio web.

Si el tutorial te ha sido de utlidad, o si tienes alguna duda, queja o sugerencia, déjanos un comentario para poder seguir mejorando.

Sobre David Otero

David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.

Find more about me on:
• 
• 
• 
•