A carregar Tweets com a API JavaScript e Twitter

Question

A carregar Tweets com a API JavaScript e Twitter

sou relativamente novo no JavaScript e decidi tentar aceder ao Twitter através da API para obter os meus 5 tweets mais recentes, no entanto estou a ter dificuldades e ficaria grato por alguma ajuda.

Este é o código tweets.js. Eu olhei cuidadosamente para a API para formar isso, mas não tenho certeza se é certo.

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();

});

Em teoria, deve carregar os 5 tweets mais recentes e adicioná-los à UL com a linha do tempo id. Já vi que podes precisar de OAuth para fazer isto, mas eu estava ... não sabe como eu iria implementar isso? Estou certo? A API antiga do Twitter parecia funcionar sem isso, mas 1.1. pode ter mudado com isto?

finalmente aqui está a minha página html que contém apenas o 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>

3

javascript twitter

Author: brasofilo, 2016-04-07

Source

2 answers

score 6 · Answer 1

A API atualizada do Twitter requer oAuth, o que requer que você escreva um componente do lado do servidor que é usado pelo seu javascript. Então não é que a tua metodologia esteja errada. O Twitter já não quer que obtenhas a informação dessa forma.

Note que se você vai para a API em um navegador, você vai apenas obter um erro. https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=techybox&count=3

Há um post muito bom aqui sobre o ... assunto: exemplo de PHP mais simples para obter o user_ Timeline com a versão da API do Twitter 1.1

score 2 · Answer 2

Utilizar oauth de toma.

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);
    }
  });