Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loading Tweets using JavaScript and Twitter API

I'm relatively new to JavaScript and decided to try and access Twitter through the API to get my 5 latest tweets however I'm running into difficulty and I would be grateful for some help.

This is the tweets.js code. I've looked carefully at the API to form this but not sure if it is right.

tweets = {
    loaddata: function() {
        $.ajax({
            url: 'https://api.twitter.com/1.1/statuses/user_timeline.json',
            type: 'GET',
            dataType: 'json',
            data: {
                screen_name: 'techybox',
                include_rts: false,
                count: 5,
                include_entities: true
            },
            success: function(data, text) {
                var html = '<li class="tweet">TWEET</li>';
                $('#timeline').append(html.replace('TWEET', tweets(data.text)));
            }
        });
    };
}

$(document).ready(function() {
    tweets.loaddata();

});

In theory that should load the 5 latest tweets and append them to the UL with the id timeline. I've seen that you may need OAuth to do this but I was unsure how i would implement this? Am I correct? Twitter's old API seemed to work without this but 1.1. may have changed with this?

Finally here is my html page that just contains the UL:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tweets</title>
</head>
<body>
    <h1>Tweets</h1>
    <ul id='timeline'></ul>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="tweets.js"></script>
</body>
</html>
like image 385
BConstable Avatar asked Jan 07 '23 07:01

BConstable


2 Answers

Twitter's updated API requires oAuth, which would require you to write a server-side component that gets used by your javascript.

So it's not that your methodology is wrong. Twitter just doesn't want you to get the information that way anymore.

Notice if you go to the API in a browser, you'll just get an error. https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=techybox&count=3

There's a really good post here about the subject: Simplest PHP example for retrieving user_timeline with Twitter API version 1.1

like image 131
adammy Avatar answered Jan 19 '23 08:01

adammy


Use oauth from here

var oauth = require('oauth.js');

var urlLink = 'https://api.twitter.com/1.1/statuses/update.json';

var twitterStatus = "Sample tweet";

var oauth_consumer_key = "d6T0PcnqxxxxxxxxxxUB7Jok2f";
var consumerSecret = "NFbG1H7CGRxukJTPxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxze02qH8";

var oauth_token = "306673734-RQanTkxxxxxxxxxxxxxxxxxxeH4NuqQ8Z";
var tokenSecret = "YnF5vpjclMMVWhuxxxxxxxxxxxxxxxl3xejqAu";

var nonce = oauth.nonce(32);
var ts = Math.floor(new Date().getTime() / 1000);
var timestamp = ts.toString();

var accessor = {
    "consumerSecret": consumerSecret,
    "tokenSecret": tokenSecret
};

var params = {
    "status": twitterStatus,
    "oauth_consumer_key": oauth_consumer_key,
    "oauth_nonce": nonce,
    "oauth_signature_method": "HMAC-SHA1",
    "oauth_timestamp": timestamp,
    "oauth_token": oauth_token,
    "oauth_version": "1.0"
};
var message = {
    "method": "POST",
    "action": urlLink,
    "parameters": params
};

//lets create signature
oauth.SignatureMethod.sign(message, accessor);
var normPar = oauth.SignatureMethod.normalizeParameters(message.parameters);
var baseString = oauth.SignatureMethod.getBaseString(message);
var sig = oauth.getParameter(message.parameters, "oauth_signature") + "=";
var encodedSig = oauth.percentEncode(sig); //finally you got oauth signature

$.ajax({
    url: urlLink,
    type: 'POST',
    data: {
        "status": twitterStatus
    },
    beforeSend: function(xhr){
        xhr.setRequestHeader("Authorization",'OAuth oauth_consumer_key="'+oauth_consumer_key+'",oauth_signature_method="HMAC-SHA1",oauth_timestamp="' + timestamp + '",oauth_nonce="' + nonce + '",oauth_version="1.0",oauth_token="'+oauth_token+'",oauth_signature="' + encodedSig + '"');  
   },
   success: function(data) { 
        alert("Tweeted!"); 
   },
   error:function(exception){
       alert("Exeption:"+exception);
    }
  });
like image 30
Mohit Avatar answered Jan 19 '23 09:01

Mohit