Embedding a tweet widget: Can my app wrap/hook into the DOM update?

[doushio]

Hi all!

I’m using platform.twitter.com/widgets.js to embed tweets into my webapp. In this app, for smooth UX I manually wrap all my DOM updates, for example:

my_wrapper(function () {
     node.textContent = 'changed!';
});

where my_wrapper notices changes to page layout/scroll position as a result of the DOM update, and compensates by adjusting the scroll position.

Now my issue is that Twitter’s widgets.js scans for <blockquote> and turns them into <twitterwidget> asynchronously on its own schedule, resulting in my app’s layout being pushed around unpredictably.

My question is–how can I embed tweets in a controlled manner? Solutions I can think of, in order of preference:

• Predicting the dimensions of an embedded tweet before it loads
• Calling some internal transformIntoTwitterWidget(blockquote) directly
• A hook into the DOM updates
• Somehow coding my app without my_wrapper
• Wrapping the tweet in a fixed-size container with a scrollbar

[niall]

You can use the twttr.widgets.createTweet JavaScript function to add a Tweet to your page controlled by your JavaScript.
https://dev.twitter.com/web/embedded-tweets/javascript-create

You could also listen for the rendered JavaScript event.
https://dev.twitter.com/web/javascript/events

[doushio]

Thanks for the prompt response. It looks like I can get a callback after the tweet is inserted, but is there any way I could get a callback right before it’s inserted?

[niall]

What action would you like to take in between your code calling twttr.widgets.createTweet and a rendered event fires?

[doushio]

Recording the current body size, scroll position, and positions of certain key DOM nodes.

[doushio]

On second thought, the ideal solution for me would be if the OEmbed API returned the width and height of the full tweet embed widget (so I can redo the layout ahead of time).

I can record the DOM state before twttr.widgets.createTweet as a workaround for now. It’s not ideal but it’ll work most of the time.

[benward]

Unfortunately we can’t provide the height of the widget in the OEmbed response as it varies both by Tweet (text length), the browser that displays it (text size) and by the place it’s rendered (e.g. flexible width between desktop and mobile.)

Further, we rely on rendering into the page for the browser to determine the final dimensions of the Tweet, so it’s not going to be possible to generate an event before the insertion happens.

If squeaky-clean scroll position is your top goal though, I’d probably approach it like this:

1. Render embedded Tweets into a container with 1px height, and overflow: hidden
2. The container must be in the DOM, and must be visible (certainly not display: none… playing with visibility might be OK) else the browser will fail to properly render the iframe container and won’t calculate dimensions properly, and so is not supported by us.
3. Wait for the rendered event as it currently exists, and use the element reference as a cue to resize your overflow container and reset scroll position all at once.

Hope that helps,

Ben