Twitter API prototype

Prototype with new Twitter API

by Ramesh Kanagaraj

HTML

<script src="https://platform.twitter.com/widgets.js"></script>
<button id="create-widget">Create Timeline</button>
<label for="screen_name">using Twitter user: @</label>
<input type="text" id="screen_name" value="NR_Tracker" />
<p></p>
<div id="widget" class="widget-div"></div>

CSS

.widget-div {
    width: 100%;
}

JavaScript

$("#create-widget").on("click", function (e) {
    // create a twitter timeline widget
    // see https://dev.twitter.com/web/javascript/creating-widgets
    twttr.widgets.createTimeline(
        "317788461761429504", // Widget ID from Ed's twitter account
    $("#widget").get(0), // use .get(0) to access HTML Element
    {
        height: 300,
        screenName: $("#screen_name").val()
    }).then(function (element) {
        console.log("timeline creation complete");
        // called when timeline has been successfully created
        // adjust width since twitter uses 520px as maximum
        // see https://dev.twitter.com/web/embedded-timelines#dimensions
        $(element).css("width", "100%");
    }, function (status) {
        console.log('Status' + status);
        // called on failure, not sure what arguments twitter passes
        // it appears to pass back the HTTP status from the API
        // see https://dev.twitter.com/overview/api/response-codes
        // so ((typeof status) === "number") 
        // I can also see that the JSON in the HTTP response header has
        // an error message (string) which makes sense since this library call
        // is presumably using the API (which includes an error message as well)
        // but they don't seem to pass that to this callback
        // they do log it in the JS console though
        // see http://api.jquery.com/deferred.then/ for jQuery documentation
        console.log("timeline creation failed");
    });
});