Métodos de widget de Twitter para la actualización dinámica de widgets

twitter timeline css

Question

Estoy tratando de agregar una opción a una página de perfil para widget de Twitter y tengo un campo donde los usuarios pueden agregar sus cuentas de Twitter y debajo se muestra una vista previa del widget. Funciona bien si ingreso una cuenta y hago clic en guardar y volver. Pero lo que intento hacer es hacerlo dinámico, para actualizar el widget con la cuenta correspondiente cuando ocurre un evento de desenfoque en el campo de texto.

Tengo el siguiente código:

var twitterWidget = new TWTR.Widget({
  version: 2,
  type: ''profile'',
  rpp: 4,
  interval: 6000,
  width: ''auto'',
  height: 300,
  theme: {
    shell: {
        background: ''#cccccc'',
        color: ''#333333''
        },
    tweets: {
        background: ''#ffffff'',
        color: ''#333333'',
        links: ''#0099cc''
        }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: ''all''
  }
});
twitterWidget.setUser(twitterUser).render().start();

    $(''#twitter_widget_id'').change(function(){          
        twitterWidget.setUser($(this).val()).render().start();
    });

En este caso, funciona mal: muestra solo los tweets más recientes de todas las cuentas que ingresé y, en general, obtengo un widget vacío.

Si borro el objeto y creo uno nuevo, deja la página en blanco y luego agrega el widget.

¿Alguien conoce algunos métodos públicos para TWTR.Widget () como re-render () o algo así?

Gracias.

Answer 1

El código fuente del widget de Twitter documentado está disponible en http://twitter.com/javascripts/widgets/widget.js y leerlo le dirá todo lo que necesita saber sobre cómo manipular su comportamiento. En resumen, el widget funciona así:

Cuando el widget se crea por primera vez con el new TWTR.Widget , llama a .init() y toma nota de dónde está incrustado en la página, insertando el código HTML del widget en el DOM en esa posición. (Siempre asume que estás incrustando, por lo que si creas un nuevo widget en un script principal o en el contexto de la ventana, terminará incrustándose en la raíz de la ventana).

Sin embargo, puede crear el widget utilizando una función (siempre que se invoque desde el script incorporado) y luego retener una referencia al widget para más adelante. Cuando llamas a .render() más tarde, el widget simplemente se vuelve a renderizar donde sea que esté.

Hay algunos métodos pseudo-privados en el objeto TWTR que puede probar para divertirse, como _getWidgetHtml() - que es llamado por .render() pero no debería necesitar usarlos.

Acabo de escribir el siguiente código, y me funciona bien. Llame a esta función desde su script incrustado (como se muestra), luego llámelo de nuevo más tarde con un nuevo parámetro de búsqueda para volver a procesarlo.

<div id="my_widget_region">
  <script src="http://widgets.twimg.com/j/2/widget.js"></script>
  <script>do_twitter_widget(''"#winning" or "justin bieber"'');</script>
</div>

function do_twitter_widget(search_query, title, subtitle) {
  if (!window.widgetRef) {
    window.widgetRef = new TWTR.Widget({
      version: 2,
      type: ''search'',
      search: search_query,
      interval: 6000,
      title: title || ''Tweets related to'',
      subject: subtitle || search_query,
      width: ''auto'',
      height: 500,
      theme: {
        shell: {
          background: ''#8EC1DA'',
          color: ''#FFFFFF''
        },
        tweets: {
          background: ''#FFFFFF'',
          color: ''#444444'',
          links: ''#1985B5''
        }
      },
      features: {
        scrollbar: false,
        loop: true,
        live: true,
        hashtags: true,
        timestamp: true,
        avatars: true,
        behavior: ''default''
      },
      ready: function() {
        // when done rendering...
      }
    });

    window.widgetRef
      .render()
      .start();
  }
  else {
    if (search_query != window.old_twitter_search) {
      window.widgetRef
        .stop()
        .setSearch(search_query)
        .setTitle(title || ''Tweets related to'')
        .setCaption(subtitle || search_query)
        .render()
        .start();
    }
  }

  window.old_twitter_search = search_query;

  return window.widgetRef;
}

Answer 2

Puede volver a cargar el widget creando una nueva instancia usando params "id" como id. Html del elemento widget.

Ejemplo a continuación. (Funciona bien para mí)

window.twitterCreateOrUpdateProfile = function (username) {

    var opts = {
        version: 2,
        type: ''profile'',
        rpp: 4,
        interval: 30000,
        width: 298,
        height: 320,
        theme: {
            shell: {
              background: ''#86b9d1'',
              color: ''#ffffff''
            },
            tweets: {
              background: ''#ffffff'',
              color: ''#444444'',
              links: ''#0b0d0d''
            }
        },
        features: {
            scrollbar: true,
            loop: false,
            live: false,
            behavior: ''all''
        }
    };

    if (window.twitterCreateOrUpdateProfile.instance) {
        opts.id = window.twitterCreateOrUpdateProfile.instance.widgetEl.id;
    }
    window.twitterCreateOrUpdateProfile.instance = new TWTR.Widget(opts);
    window.twitterCreateOrUpdateProfile.instance.render().setUser(username).start();
}
window.twitterCreateOrUpdateProfile(''evaisse'');