Embed Twitter User Timeline in Webpage

Question

On my website, a user enters their Twitter username when they register and their timeline is embedded on their profile page. Until now, I've achieved this with the following JavaScript code:

<script type="text/javascript">

    var twitterUsername = // read from database

    new TWTR.Widget({
        version: 2,
        type: 'profile',
        rpp: 4,
        interval: 30000,
        width: 'auto',
        height: 210,

        features: {
            scrollbar: true,
            loop: false,
            live: false,
            behavior: 'all'
        }
    }).render().setUser(twitterUsername).start();
</script>

Recently I noticed the following messages appearing in the JavaScript console

TWITTER WIDGET: This widget is being deprecated, and will cease functioning soon. https://twitter.com/support/status/307211042121973760

TWITTER WIDGET: You can obtain a new, upgraded widget from https://twitter.com/settings/widgets/new/user?screen_name=electricpicnic

It seems that instead of using this widget I should use an embedded timeline. However, the docs seem to suggest that in order to embed a timeline in a page, you need to go to the widgets section of your settings page and setup a widget for each user whose timeline you wish to embed. Twitter gives you the code that will embed this timeline in your page, but this code contains an attribute data-widget-id="275025608696795138" which has a different value for each user.

Obviously this approach won't work for me, because it's not feasible for me to setup a widget for all my users (present and future) and store a data-widget-id for each of them. Is there some non-deprecated way that I can embed timelines, which allows me to provide the Twitter username at runtime?

Update

According to this post in the Twitter dev discussion group, this functionality is not available currently, but will be provided in a future version.

Answer 1

Twitter is deprecating their unauthenticated widgets. You will no longer be able to use those.

But Twitter has an API that you can call, and you can generate your own custom tweet timeline UI without having to use their widget. For an example of the UI, see http://tweet.seaofclouds.com/ .

But you also have to know that you just can't call their API directly from Javascript, since their API has OAuth. You can call their API only from server-side code (I don't know what you're using now, PHP/Ruby/Python/Java?). Good news is, OAuth is an open standard and you can call their API using any language. Here is an example of the same widget , but it gets data by calling the API using PHP. This is a long term solution.

If the Twitter timeline is essential for your site - then you have to go the API way. You must register your site with Twitter , and then use OAuth to get a user's timeline data, and use that data to render the javascript widget.

Answer 2

With the new Twitter widgets, just create an authenticated twitter widget from your own account (eg YourName). Then set the data-screen-name of the user (eg 'twitterUsername') you want to show and you end up with something like this:

<a class='twitter-timeline'  href='https://twitter.com/YourName'  
   data-widget-id='your-widget-id' 
   data-screen-name='twitterUsername'>Tweets by @twitterUsername</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)  [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>

Answer 3

Here is a bit of javascript that you can use to embed a user's timeline in a webpage

Add the script https://www.tweetjs.com/tweetjs.js

Then add the code:

   TweetJs.ListTweetsOnUserTimeline("PetrucciMusic",
    function (tweets) {
        for(var i in tweets)
        {
            document.write(tweets[i].text + "<br>");
        }
    });

... Although I'd recommend using better styling than that :)

Answer 4

This is how I use it, feels pretty decent.

HTML:

    <ul id="twitter_update_list">
    </ul>

Script:

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name=theunexpected1&callback=twitterCallback2&count=10"></script>

Notice the "screen_name" variable sent out to the script. You can customize your callback function (blogger.js) , also you can save this file locally to avoid external request.

Hope this is useful.

For reference, I have created a jsfiddle here, you can take the CSS snippets too from there. http://jsfiddle.net/rahulsv/8fRTD/

UPDATE:

This solution no longer works since Twitter updated to v1.2 - no unauthorized access to tweets.