Sesión 8. Twitter

¿Qué es Twitter?

Twitter es una de las redes sociales de mayor crecimiento, basada en el concepto de microblogging, que permite a los usuarios postear mensajes de una longitud reducida en número de caracteres. Los mensajes son de texto plano con un máximo de 140 caracteres. Se les da el nombre de tweets y se muestran en la página principal del usuario.

Conceptos básicos

Para entender el funcionamiento de twitter es necesario repasar los conceptos utilizados en esta red social.

• Follower (Seguidor). es una persona que recibe tweets de otro en su timeline de Twitter.

• Time Line (Cronología). Es el lugar donde se van mostrando los tweets que le llegan a un usuario desde las cuentas de aquellos a los que se está siguiendo. Se mantiene actualizada en tiempo real. Actualmente se recibe un aviso cuando se reciben nuevos tweets (Compatibilidad con notificaciones en aplicaciones móviles).

• #Hastag (Etiqueta). El símbolo # es usado para marcar palabras clave o temas en un Tweet. Un ejemplo sería poner #crisis en un tweet relacionado con las crisis económica.

• @Usuario . El símbolo @ es usado para llamar nombres de usuario. Hacer esto en un tweet es mencionar (mention) a un usuario.

• Retweet (RT) . Es un Tweet de otro usuario, que fue re-publicado. Puede hacerse con el botón que ofrece Twitter, o en forma “antigua”, agregando la sigla RT al principio del mensaje.

• Trending Topics . Temas que indican qué es lo más popular en Twitter en cierto momento.

Twitter como usuario

Twitter for Websites

Recientemente Twitter ha habilitado la posibilidad de utilizar sus widgets mediante Javascript directamente desde el navegador. Esto nos facilita la tarea de incluir social pluggins de Twitter en nuestras páginas web. Podemos encontrar la documentación necesaria en el sitio web de desarrolladores de Twitter.

Tweet Button

El botón Tweet es un pequeño widget que permite a los usuarios de nuestra web compartir facilmente nuestro sitio web con sus seguidores.

El flujo de interacción del usuario con el botón Tweet se ha diseñado para resultar sencillo de usar tanto para los desarrolladores web, los propietarios de los sitios web y los usuarios. Los pasos que un usuario tiene que seguir cuando utiliza el botón Tweet son los siguientes:

1. El proceso comienza cuando el usuario hace click en el botón Tweet

2. El cuadro de diálogo para componer el tweet aparece rellenado con la información proporcionada en las propiedades del botón Tweet. El usuario puede editar el contenido si lo desea.

3. Cuando la publicación del contenido se confirma por parte del usuario, se sugieren cuentas que podría interesarle seguir, según se especifique en las propiedades del botón Tweet.

4. La ventana con el tweet permanece abierta hasta que el usuario presiona close

La forma más sencilla de añadir un botón Tweet en nuestras páginas web es mediante el uso de Javascript. Este método requiere, al igual que sudedía con Facebook o Google+, que añadamos una línea de Javascript y un anclaje HTML en nuestra página web. La configuración del botón se realiza mediante atributos data y parámetros query string.

<a class="twitter-share-button" href="https://twitter.com/share">Tweet</a>

<script>
    window.twttr=(function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};
        if(d.getElementById(id))return t;
        js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};
        return t;
    }(document,"script","twitter-wjs"));
</script>

Es importante señalar como el elemento que sirve de ancla tiene la clase tweitter-share-button. Esto es un requerimiento del API Javascript del botón Tweet para saber que elementos debe convertir en botones.

Propiedades

Existen varias propiedades para el botón Tweet que nos van a permitir modificar su comportamiento. Aunque el botón funcionará sin tener que especificar ninguna de estas propiedades, su uso nos va a permitir especificar valores por defecto para el tweet. Si no se especifican el query string, el data source ni el link source, el botón Tweet utilizará los valores por defecto disponibles a partir de la página web y su información referida.

A continuación encontramos una tabla con las propiedades del botón Tweet. Cada propiedad es un parámetro query string para la URL https://twitter.com/share.

Los valores que puede tomar el parámetro count son none, horizontal o vertical.

<a class="twitter-share-button"
   href="https://twitter.com/share"
  data-url="https://dev.twitter.com/web/tweet-button"
  data-via="your_screen_name"
  data-text="Checking out this page about the Tweet Button"
  data-related="twitterdev:Twitter Developer Relations"
  data-count="vertical">
Tweet
</a>

Ejercicios Sesión 8

Crear una cuenta de Twitter para el proyecto y mostrar los últimos tweets en la portada (Uazon).

Crear una cuenta de Twitter para el proyecto Uazon y tomando como ejemplo el ejercicio hecho en clase para listar tweets (timeLine), debemos mostrar en la portada los últimos 3 tweets de la cuenta. El listado de tweets se debe de refrescar cada minuto por AJAX haciendo uso de la función setInterval() de Javascript.

Puedes usar Twitter for Website para resolver éste ejercicio. En este caso no te preocupes por cuantos tweets se muestran en el cuadro de la linea de tiempo embebida.

Mandar un tweet de forma automática cada vez que se registre un nuevo usuario. (Uazon) (Optativo)

Ayudandonos del ejemplo sobre envío de tweets hecho en clase, debemos de envíar un tweet con este formato: "Ya somos (numero) usuarios registrados en Uazon (siglas del alumno)" cada vez que se registre un nuevo usuario en nuestro proyecto. Una vez este corregido el ejercicio, es conveniente solo mandar este tipo de tweet cuando se llegue a un numero de usuarios señalado (10,20,50,100 etc...)