Cómo cargar Twitter en una web: Cronología, listas o tuits (versión 2020)

Captura de página parcial de la web que facilita Twitter para publicar tuits en otras páginas.

Después de varios años sin actualizar este tipo de entradas, aquí os traigo la versión septiembre 2020 de cómo nos deja Twitter cargar su contenido en nuestras webs. El proceso se ha simplificado bastante desde 2014, ya no hace falta crear widgets. Ahora basta con copiar y pegar, copiar y pegar y, si luego queremos, personalizar un poco. Veamos los pasos que hay que seguir.

Embebe Twitter en tu web

1. Qué quieres insertar

Ten clara la url del tuit, perfil, favoritos, lista, lo que quieras incrustar en tu web.

2. Herramienta de Twitter

Acede a Twitter Publish.

3. Copiar y pegar

Copia la url de antes y pega el enlace en el cuadro que te presenta Twitter. Presiona intro.

4. Opciones para finalizar

Al darle al intro, se pueden dar varias opciones en función de lo que hayas decidido incrustar.

Si es un perfil, por ejemplo, te dejarán elegir entre la cronología de tuits o botones para compartir. Una vez hayas elegido, saldrá en inglés un aviso de que ya está: «Eso es todo lo que necesitas, salvo que quieras personalizarlo un poco».

Si se trata de una lista o favoritos (likes), directamente aparecerá esa misma leyenda sin pasos previos.

Si ya está y no quieres personalizarlo, ahí tienes tu resultado. Pinchas en el botón azul «Copy code» y se copiará el texto html que te facilita Twitter para que lo puedas pegar en tu web.

Continuar leyendo «Cómo cargar Twitter en una web: Cronología, listas o tuits (versión 2020)»

Validación de formularios del lado del cliente: JavaScript Vs HTML5

Imaginad que estáis desarrollando vuestro website modernísimo de la muerte y, por tanto, decidís hacerlo en HTML5. Llegáis a la parte del formulario de contacto, lo validáis con HTML5 y, probando en Safari (porque todos los guays de ahora programan en Mac y tienen Safari y prueban las cosas ahí también), os horrorizáis al ver que Safari suda de vuestra verificación y manda los formularios vacíos o mal completados. Aaaaaamigos, ¡bienvenidos una vez mas al maravilloso mundo de: ¿por qué me dediqué yo a esto con lo feliz que sería haciendo otra cosa?!

Veamos cómo funcionan las validaciones del lado del cliente, es decir, en el dispositivo del usuario que interactúa con nuestra web, no en el servidor donde ésta está alojada (verificaciones estas otras que son también necesarias y deseables pero de las que no hablo en esta ocasión).

Por un lado tenemos la forma de toda la vida de verificar que, cuando alguien nos manda un formulario, al menos haya algo escrito en él: El JavaScript (está también muy de moda la verificación JQuery, pero a fin de cuentas…). Por otro lado, tenemos la forma más reciente propuesta por HTML5. A saber:

 

Ventajas y desventajas de la verificación con JavaScript

A favor

  1. Personalizable
    • En casuística (que para eso la programas)
    • En diseño (para poner colorines y mensajes de alerta)
  2. Mayor compatibilidad con navegadores (casi todos los modernos y no tan modernos)

En contra

  1. Algunos usuarios pueden tener el JS deshabilitado (lo hacen por fastidiar, ¡lo sabemos!)
  2. Hay que programar cada verificación (y eso es un engorro)

 

Ventajas y desventajas de la verificación con HTML5

A favor

  1. Validación nativa, es decir:
    • Rápida para el desarrollador, pues no requiere programar las verificaciones, basta con decir: oye, esto es obligatorio (required)
    • Rápida y segura para el usuario, su navegador lo hace todo, sin complementos
  2. Mayor precisión semántica:
    • De la generalidad del campo de tipo texto, pasamos a poder especificar si se trata de un email, una url, una fecha…
  3. Ideal para dispositivos móviles:
    • Algunos terminales mostrarán distintos tipos de teclado según los datos que se tengan que introducir (números para fechas, @ para emails, .com para urls…)

En contra

  1. Escasamente personalizable:
    • En cuanto a diseño de los errores/alertas (los navegadores se lo guisan, los navegadores se lo comen)
    • En cuanto al control de determinados comportamientos de la validación (ver caso con textarea explicado más abajo)
  2. Menor compatibilidad con navegadores, habiendo casos sangrantes:
    • (a 2014) Safari, aunque reconoce los input types de HTML5, no reconoce el atributo required y, por tanto, envía los formularios sin validar (¡alegría! NO.)

Continuar leyendo «Validación de formularios del lado del cliente: JavaScript Vs HTML5»

De nuevo: Cómo insertar Twitter en tu web y amoldarlo a tu diseño

Aviso para navegantes:

Esta entrada del blog es antigua. La información que recoge este artículo está obsoleta. Hay una versión más reciente de cómo insertar tuits o cronologías de Twitter en tu web en este mismo rincón para escribir.

Aprovechando los recursos que Twitter pone a nuestra disposición (y un poquito más), vamos a ver cómo insertar un timeline de esta red social en una página web.

Nuestro punto de partida: crear un nuevo widget de Twitter, al que se llega logandose en la web > Icono del engranaje > Configuración > Widgets > Crear nuevo

Cómo llegar a la página de creación de widgets en Twitter
Pasos para llegar a la página de creación de widgets en Twitter

Aquí veremos las opciones básicas para sacar un código HTML que deberemos insertar en la parte de la web en la que queramos que aparezcan estos tuits. Tuits que pueden ser los de tu timeline, tus favoritos, una lista, una búsqueda… Tampoco es que esta parte tenga mucho misterio (y hay tutoriales al respecto esparcidos por la red como para aburrir).

Ahora bien, ¿qué pasa si queremos una mayor personalización del widget que nos proporciona Twitter? Cuando vas un paso más allá el tema empieza a complicarse, pero esta vez sin sudores fríos, pues bastará con saber que tenemos que acudir a la documentación que la compañía pone a disposición de los desarrolladores Twitter for Websites (en inglés, como de costumbre y actualizado en noviembre de 2017 porque el otro enlace ha desaparecido) y leerla… o seguir leyendo esta entrada en español :P

Personalización

Anoto por aquí algunos de los parámetros que considero más útiles para sumar al código previamente conseguido:

Anchura: width

Medida en pixeles, aunque NO hace falta especificar la unidad pues está implícita en el código de Twitter, por lo tanto, en lugar de escribir, por ejemplo, 300px como habitualmente haríamos en un código HTML, simplemente especificamos width="300"

Pie y encabezado: data-chrome

  • noheader: Su uso elimina el encabezado del widget, donde suele sugerir que se siga al usuario o donde se muestra el logo de Twitter.
  • nofooter: Lo mismo para el pie. Esta propiedad se puede aplicar a los widgets de timeline de usuario o de búsqueda para eliminar la caja de texto de la parte inferior que permite tuitear directamente. En los casos de favoritos y listas no tiene sentido ya que éstas carecen de pie.
  • noborders: Elimina todos los bordes del widget, los externos y los que separan cada tuit.
Elementos principales del widget de Twitter
Vista aclaratoria de algunos de los elementos del widget de Twitter que pueden ser eliminados
  • noscrollbar: Oculta la barra de desplazamiento vertical, en caso de que la hubiera, impidiendo que se vean más tuits de los que quepan en la altura especificada para el widget. Por defecto Twitter cargará los 20 últimos tuits del usuario/búsqueda/loquesea y si quitamos el scroll y fijamos la altura en 500px, estaremos cargando más tuits de los que puedan llegarse a leer. Quizá antes de especificar una altura fija y eliminar la barra de desplazamiento nos convenga limitar el número de tuits mostrados (ver información un poco más abajo).
  • transparent: Anula el color de fondo del widget, dejándolo transparente, de forma que si lo colocamos sobre una textura u otro color en tu web, será ese el que se muestre en lugar del blanco/negro de los temas por defecto del widget.

Sabido esto, si queremos que, por ejemplo, nuestro recuadro de tuits no tenga cabecera, ni pie, ni bordes, ni fondo, escribiremos: data-chrome="noheader nofooter noborders transparent"

Color del borde: data-border-color

Si en lugar de eliminar los bordes, lo que queremos es que se adecuen a los colores de nuestra web, podremos utilizar esta propiedad como en el ejemplo, sustituyendo la referencia de color por la que deseemos: data-border-color="#cc0000"

Número de tuits mostrados: data-tweet-limit

Como comentaba más arriba, siempre que no se especifique lo contrario, Twitter cargará los últimos 20 tuits del timeline elegido. Para variar esta cantidad, podremos usar el límite de tuits especificando desde un mínimo de 1 a un máximo de 20. Para mostrar sólo 5: data-tweet-limit="5"

Continuar leyendo «De nuevo: Cómo insertar Twitter en tu web y amoldarlo a tu diseño»