8

With Twitter turning off the API 1.0 faucet on 6/11/2013, we have several sites that now fail to display timelines. I've been looking for an "If you did that, now do this" example. Here was Twitter's announcement. https://dev.twitter.com/blog/api-v1-is-retired

Here is what we were originally doing to show the Twitter timeline via API 1.0.

<div id="twitter">
    <ul id="twitter_update_list"></ul>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script>
    <div style="float:left;"><a href="https://twitter.com/companytwitterhandle" target="_blank">@companytwitterhandle</a> | </div>
    <div class="twitterimg">&nbsp;</div>
</div>

Initially I tried changing the version in the JavaScript reference URL like so, which did not work.

<script type="text/javascript" src="http://api.twitter.com/1.1/statuses/user_timeline/companytwitterhandle.json?callback=twitterCallback2&amp;count=1"></script>

Then I looked at the Twitter API documentation (https://dev.twitter.com/docs/api/1.1/overview) which lacks a clear transition example. I don't have 4 or 5 hours to delve into that, or into this disheveled FAQ (https://dev.twitter.com/docs/faq#17750).

Then I found this API documentation regarding the user timeline. So I changed the URL again as shown below. https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

<script type="text/javascript" src="https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=companytwitterhandle&amp;count=1"></script>

That did not work.

Using jQuery or C# ASP.NET MVC, how can I transition that interface from Twitter API 1.0 to Twitter API 1.1? My first preference would be for a browser client side implementation if that is possible. Please include a code example. Thanks.

hutchonoid
  • 32,982
  • 15
  • 99
  • 104
Ken Palmer
  • 2,355
  • 5
  • 37
  • 57

3 Answers3

0

Okay, I received an answer from a colleague who had to make a similar change at my company. Here is the coded solution. He received this from a company we contracted to build a new interface for us with a Twitter timeline.

<a class="twitter-timeline" href="https://twitter.com/companytwitterhandle" data-widget-id="18DigitMagicNumber" data-chrome="nofooter transparent noscrollbar noheader noborders"  data-tweet-limit="1" >Tweets by @@companytwitterhandle</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>

You will see in the data-widget-id attribute 18DigitMagicNumber. That number is apparently tied to our Twitter handle or our company. I don't know how that gets generated.

As indicated, a contracted company wrote that code for us, so I won't try to explain what it's all doing.

I cut and pasted this from one site into an unrelated site and it worked immediately. The only thing I changed was to remove the actual company handle and data-widget-id, and to replace the single @ with @@ to escape it in MVC.

Hopefully this will help some of you who are also migrating to Twitter 1.1. Thanks.

Irshad
  • 3,071
  • 5
  • 30
  • 51
Ken Palmer
  • 2,355
  • 5
  • 37
  • 57
  • This uses pure JavaScript rather than jQuery as the OP requested, and does not appear to work. https://jsfiddle.net/3xsjn59u/ – Wes Modes May 22 '16 at 22:41
  • @WesModes, I was the OP, and this code worked at the time. The post is nearly 3 years old now, so it may be out of date at this time. No sense in downvoting this though. :) – Ken Palmer May 23 '16 at 13:48
  • Also of note, the fiddle example has the string "18digitmagicnumber" assigned to the data-widget-id, rather than a real Twitter number. You'd need a real account number for Twitter for that code sample to work. When at that previous employer, I didn't feel it was prudent to publish that info. – Ken Palmer May 23 '16 at 13:58
0

This is how I did this:

Please see my question and answer here:

Authenticate and request a user's timeline with Twitter API 1.1 oAuth

Use the above solution and render the json back to the page, store it in a variable called json.

Put a reference to jQuery and the twitter-text js library;

https://github.com/twitter/twitter-text-js

Add a div with an id or results to your aspx:

 <div id="results"></div>

You can render the content with the following javascript:

for (var i = 0; i < json.length; i++) {
                $("#results").append('<div class="tweet"><p><span><strong> - ' + json[i].created_at.substring(0, 16) + '</span></strong></span><br/>' + twttr.txt.autoLink(json[i].text) + '</p>');
                try {
                    for (var j = 0; j < json[i].entities.media.length; j++) {
                        $("#results").append('<a href="' + json[i].entities.media[j].media_url + '"><img src="' + json[i].entities.media[j].media_url + ':thumb" /></a>');
                    }

                } catch(e) {
                }
            }
Community
  • 1
  • 1
hutchonoid
  • 32,982
  • 15
  • 99
  • 104
-1

Create a JavaScript only solution that just works out the box to get Twitter posts on your site without using new API - styling is left up to you - can now specify number of tweets too:

http://goo.gl/JinwJ

Irshad
  • 3,071
  • 5
  • 30
  • 51
Jason
  • 41
  • 1