Un nuevo vídeo de iDESWEB que se ofrecerá a través de la iniciativa Actívate patrocinada por Google.
[kml_flashembed movie=”http://www.youtube.com/v/fCdAjV3ZmP8″ width=”560″ height=”315″ wmode=”transparent” /]
Transcripción:
Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo puedes insertar un botón de Twitter en tus páginas web para que los visitantes puedan tuitear tus páginas.
Hoy en día, es muy normal que en cualquier página aparezca un botón con el logo de Twitter. Este botón permite tuitear la página web en la cuenta de Twitter del usuario. ¿Parece difícil lograr esto? No, es muy sencillo, como vas a ver a continuación.
Lo que te voy a mostrar está explicado en la página de Twitter.
En primer lugar, en la página, en el sitio web de Twitter busca el enlace “Desarrolladores”, que enlaza con el sitio web dedicado al desarrollo de aplicaciones con el API de Twitter.
En esta página busca el enlace “Documentation”.
A continuación se puede navegar a varias páginas.
Por ejemplo, “Twitter for Websites”.
En esta página se explican muchas cosas, se explica cómo crear un botón para tuitear o seguir a una persona, o como insertar un timeline en una página web.
Si pulsamos en “Create a Tweet or Follow Button”, llegamos a la página, al asistente al generador de botones que estamos buscando.
O también, a partir de las páginas anteriores, podemos navegar a “Tweet Button”.
En esta página nos explican cómo funciona el botón para crear un tuit. Lo que estamos buscando es el “Tweet Button Generator”.
Te voy a mostrar con un ejemplo real cómo se inserta un botón de Twitter.
He preparado una página web sencilla en la que voy a insertar el botón para tuitear. El botón lo voy a colocar aquí, al principio de la página. Esta es la página que he creado, con un tema, con una noticia relacionada con Twitter y el botón quiero que aparezca justo aquí.
Para ello, en el generador de botones, en el asistente que te he mostrado antes que ofrece el sitio web de Twitter elegimos el tipo de botón que queremos crear. En este ejemplo lo que quiero es un botón para tuitear, un botón para compartir un enlace. Así que elijo este botón y ahora tengo una serie de opciones que puedo configurar. Puedo por ejemplo elegir que se comparta la página actual, la URL de la página actual o yo podría fijar una URL específica. En principio voy a dejar todas las opciones marcadas, excepto esta, voy a elegir que quiero un botón grande.
Fíjate aquí, aparece una previsualización. Si desactivo la opción botón grande verás que el botón es más pequeño. Vamos a dejarlo en botón grande. Y la opción esta de idioma ahora te mostraré lo interesante que es. En principio vamos a dejarlo en “Automatic”.
El generador me ha generado este código, este código HTML y JavaScript, que debo de copiar en mi página web. Pulso, y estando seleccionado todo el código, esto es muy importante, tiene que estar seleccionado todo el código, pues simplemente botón derecho del ratón, copiar y me voy al código de mi página y en el punto en el que yo quiero insertar el botón simplemente pego el código.
¡Muy importante, tengo que pegar todo el código! Si no lo pego completamente, el botón no funcionará. De aquí no necesitas entender nada, simplemente copiar y pegar.
Bien, ya está. Yo ya puedo grabar la página y me puedo ir al navegador y puedo comprobarlo. Fíjate que aquí, cuando le dé a recargar aparecerá el botón para tuitear. Y si yo pulso en este botón, se abre la ventana para compartir esta página en Twitter.
Bien, ¿interesante, no?
Vamos a poner ahora otro botón. Vamos a poner el botón de seguir. Pulso en “Follow” y me vuelven a salir una serie de opciones. Las dejo como están, copio el código, me lo llevo a mi página web y ahora lo voy a colocar en este punto. Lo pego, vuelvo al navegador y le doy a recargar.
Tengo el botón de tuitear que tenía antes y ahora el nuevo botón de seguir. Fíjate que pone “Follow”, no pone “Seguir”.
Aquí tenemos en el configurador de botones una opción para elegir el idioma, y te he dicho antes que lo iba a dejar en automático. El botón está saliendo en inglés. ¿Por qué no me sale en español?
Si vuelvo a mi código fuente de la página, comprobamos que no he fijado el idioma de la página, no he puesto el atributo lang. Si le pongo lang=“es”, español, y grabo la página, ahora recargo mi página y fíjate como “Follow” cambia a “Seguir”.
¿Cómo es esto posible? Es muy sencillo, el código de Twitter que yo he pegado detecta, busca el idioma de la página. Fíjate lo importante que es, configurar, definir el idioma de una página web. Se emplea para muchas cosas, y este es un buen ejemplo de ello, para que el código insertado por terceras partes aparezca correctamente en el idioma que queremos.
Y esto es todo, en este vídeo te he mostrado cómo emplear el generador, el configurador de botones de Twitter para insertar un botón en tu página web.
Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora.
Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.
Muchas gracias por tu atención.