Hacer un widget de Twitter personalizado sin un complemento

Algunas veces me han preguntado qué complemento de WordPress utilizo para generar la lista de “Twitter Feed” en el pie de página de mi sitio. En realidad, no uso ningún complemento, es un fragmento de Javascript de Twitter que muestra una lista de mis tweets recientes que diseñé con CSS. En este tutorial, te mostraré:


  • El código HTML y Javascript necesario para obtener los últimos tweets
  • Una descripción general del marcado HTML y los selectores CSS asociados
  • Dos ejemplos de widgets de Twitter de estilo personalizado que he usado yo mismo

Sigue leyendo para ver el resto del tutorial …

El HTML y Javascript

Twitter solía proporcionar este código en su sitio, pero por alguna razón lo eliminaron a favor de estos widgets mucho menos flexibles. Necesitarás dos piezas de código..

Primero, coloque el siguiente código donde desea que aparezca la lista:

  • Carga de feed de Twitter

Nota: los

  • Carga de feed de Twitter
  • no es parte del código original provisto por Twitter, pero es necesario para validar el HTML. También puede proporcionar un mensaje útil mientras se carga el feed, ya que podría tomar unos segundos en un día lento.

    En segundo lugar, deberá colocar las siguientes líneas de Javascript tan cerca de la etiqueta como sea posible.

    Actualmente lo tengo justo encima de mi código de Google Analytics. Debes mantener estas líneas de Javascript lo más bajo posible en la página porque en caso de que Twitter no se cargue, todo lo que esté debajo de ese código se bloqueará (lo cual no es un gran problema si ya está en la parte inferior).

    Información general sobre el marcado HTML y los selectores CSS

    Ahora no puede ver el marcado HTML que genera el widget de Twitter sin usar algo como Web Developer Toolbar. Por suerte para ti, lo he hecho por ti. Aquí hay una lista de muestra con solo un tweet como ejemplo.

    • #twitter_update_list – Selecciona la lista completa
    • #twitter_update_list li – Seleccionar elementos de lista individuales
    • #twitter_update_list li span – Selecciona la parte “tweet” del elemento de la lista, no el enlace de hace tiempo
    • #twitter_update_list li span a – Selecciona el enlace dentro de la parte “tweet” del elemento de la lista
    • #twitter_update_list a [style ="tamaño de fuente: 85%;"] – Selecciona el enlace “hace tiempo”, de una manera algo hacky (ver nota más abajo).

    Nota: Dado que hay un estilo en línea en el enlace de hace un tiempo que establece el tamaño de la fuente en 85%, hace que sea un poco difícil anular sin un código extravagante. He usado esto antes para restablecer el tamaño de fuente al mismo que el resto de la lista:

    #twitter_update_list a [style ="tamaño de fuente: 85%;"] {font-size: 1em! important; }

    Eso probablemente no funciona en las primeras versiones de IE debido a la parte “! Importante”. También puede usar display: block; para mover ese enlace a la siguiente línea.

    Ejemplo en vivo

    Para ver un ejemplo en vivo, consulte el pie de página de Laboratorio de temas. O si estás leyendo esto en tu lector de feeds o en un sitio de scraper no autorizado, mira la captura de pantalla a continuación.

    Feed de Twitter del laboratorio de temas

    Aquí está el código que uso para la lista:

    #twitter_update_list {
    tamaño de fuente: 13px;
    altura de línea: 21 px;
    estilo de lista: ninguno;
    }
    #twitter_update_list li {
    fondo: url (‘images / twitter-divider.gif’) abajo a la izquierda repetir-x;
    relleno inferior: 7px;
    margen inferior: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    color: #ababab;
    decoración de texto: ninguno;
    }
    #twitter_update_list a {
    color: # 6f7276;
    }

    • La primera línea selecciona la lista completa. Establece el tamaño de fuente, la altura de la línea y se asegura de que no aparezcan viñetas.
    • La segunda línea hace que una pequeña imagen 2 × 1 se repita debajo de cada elemento de la lista como una especie de divisor. El relleno establece el espacio entre el tweet y el borde superior del divisor. El margen establece el espacio entre el borde inferior del divisor y el siguiente tweet.
    • La tercera línea establece el color del tweet, incluidos los enlaces, y se asegura de que no aparezcan líneas debajo de los enlaces..
    • La última línea establece el color del enlace “hace tiempo”.

    ¡Y eso es! Si tuviera que cambiar una cosa, diferenciaría los enlaces en el tweet de alguna manera, y tal vez agregaría efectos de desplazamiento en los enlaces también.

    Esto se puede usar en cualquier sitio

    A diferencia de todos los demás Cómo hacer XYZ sin un complemento publicaciones, no hay código de WordPress real utilizado en este tutorial.

    Como esto no usa código de WordPress, no se archiva bajo el Tutoriales de WordPress colección. Se puede usar en casi cualquier tipo de sitio, suponiendo que pueda editar la fuente HTML y CSS.

    Si desea usarlo en WordPress, le sugiero que edite manualmente sus archivos de tema para insertar las dos líneas de Javascript en el pie de página de su sitio, o incluso engancharlo en su gancho wp_footer ().

    En cuanto al widget en sí, puede pegar el código dentro de un widget de texto o codificarlo manualmente en su barra lateral (o donde sea).

    Conclusión

    Espero que les haya gustado el tutorial, me encantaría escuchar su opinión en los comentarios. Si tiene alguna solicitud de sugerencias rápidas de WordPress o CSS, no dude en hacérmelo saber. Puede aparecer en una futura publicación de Tutorial Tuesday en Theme Lab!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map