Question

I am trying to add an option to a profile page for twitter widget and I have a field where users can add their twitter accounts and below it shows a preview of the widget. It works fine if I enter an account and click save and come back. But what I am trying to do is make it dynamic, to refresh the widget with corresponding account when blur event occurs on the text-field.

I have the following code:

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();
    });

In this case it works wrong: it shows only the newest tweets from all the accounts that I entered and in general I’m getting an empty widget.

If I delete the object and create a new one it makes the page blank and then adds the widget.

Does anyone know some public methods for the TWTR.Widget() like re-render() or something like that?

Thanks.

Answer 1

The documented Twitter widget source code is available at http://twitter.com/javascripts/widgets/widget.js and reading through it will tell you everything you need to know about how to manipulate its behavior. Briefly, the widget works like this:

When the widget is first created with new TWTR.Widget it calls .init() and takes note of where it’s embedded in the page, inserting the widget HTML code into the DOM at that position. (It always assumes you’re embedding, which is why if you create a new widget in a head script or in the context of the window it will end up embedding itself in the root of the window.)

But, you can still create the widget using a function (as long as it’s called from the embedded script) and then hold onto a reference to the widget for later. When you call .render() later the widget just re-renders itself wherever it happens to be.

There are some pseudo-private methods on the TWTR object that you might try for fun, such as _getWidgetHtml() – which is called by .render() but you shouldn’t need to use those.

I just wrote the following code, and it works well for me. Call this function from your embedded script (as shown), then call it again later with a new search parameter to re-render it.

<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;
}