Twitframe

Twitframe allows one to display Embedded Tweets on websites to dynamically show retweet and favorite counts, inline media/card data, and allow users to retweet/reply/favorite Tweets, all while isolating the Javascript and DOM manipulation to an embedded iframe. This increases security and speeds up website page loads.

This is an independent service not affiliated with Twitter in any way. No guarantee of availability or security is made by using this service.

Use

Add an <iframe> to your HTML document and pass (at least) the full URL to the Tweet as a URL-encoded parameter url to http://twitframe.com/show:

<iframe border=0 frameborder=0 height=250 width=550
 src="https://twitframe.com/show?url=https%3A%2F%2Ftwitter.com%2Fjack%2Fstatus%2F20"></iframe>

This example code would produce the following (without the gray background):

Note that a height of 250 may be too big for short tweets such as this one, but too small for long tweets with embedded media. See sizing below to automatically size the iframe based on its size.

Graceful Degredation

If the Tweet data is known beforehand, it can be passed to Twitframe to be displayed before Twitter's Javascript loads. The following parameters may be passed:

• tweet - The full text of the Tweet
• author_name - The full name of the Tweet's author
• author_username - The username of the Tweet's author, including the @ sign
• datetime - The date and time of the Tweet, in ISO 8601 format or a Unix timestamp

Each parameter should be properly URL-encoded when used as the URL for the iframe. An example using PHP:

<?php

    $tf = "https://twitframe.com/show?" . http_build_query(array(
        "url" => "https://twitter.com/jack/status/20",
        "tweet" => "just setting up my twttr",
        "author_name" => "Jack Dorsey",
        "author_username" => "jack",
        "datetime" => "1142974214",
    ));

    echo "<iframe border=0 frameborder=0 height=250 width=550 "
        . "src=\"" . $tf . "\"></iframe>";
?>

If Twitter's Javascript could not be loaded, this example would produce the following (without the gray background):

Styling

The following optional parameters may be passed to affect the style of the embedded Tweet. These are passed directly through to Twitter's Javascript.

• align - Alignment of the embedded Tweet inside the iframe - can be left, center, or right
• link_color - Hex code for link color
• theme - Theme of Tweet display (such as dark)
• conversation - Disable showing previous Tweet in a thread when set to none

Sizing

As with any iframe, its height and width within the parent document are static, and must be included as attributes in the <iframe> tag or applied with CSS. Reasonable recommendations to display most Tweets (without embedded media) without scrolling are height=250 and width=550. To automatically resize the height of the iframe after it has loaded, some Javascript is required.

Since a parent HTML page loading an iframe from twitframe.com has loaded a cross-origin resource, the parent HTML page is not permitted to access the iframe's DOM to find out its height. Newer browsers implementing window.postMessage can send a message to the twitframe.com iframe (which it is listening for) and request its height after Twitter's Javascript loads. twitframe.com will send a response message with the height after it has loaded the Twitter content.

Using jQuery, the following code will send a message to each <iframe> element on the page that you have named like "tweet_281974362784022528":

$(document).ready(function() {
    /* find all iframes with ids starting with "tweet_" */
    $("iframe[id^='tweet_']").load(function() {
        this.contentWindow.postMessage({ element: this.id, query: "height" },
            "https://twitframe.com");
    });
});

/* listen for the return message once the tweet has been loaded */
$(window).bind("message", function(e) {
    var oe = e.originalEvent;
    if (oe.origin != "https://twitframe.com")
        return;
	
    if (oe.data.height && oe.data.element.match(/^tweet_/))
        $("#" + oe.data.element).css("height", parseInt(oe.data.height) + "px");
});

This code resizes the Twitframe iframes after they have loaded, increasing the height to display the embedded card information.