2016-04-07 6 views
0

私はJavascriptには比較的新しいので、5つの最新のつぶやきを得るためにAPIを使ってTwitterにアクセスしようと決めましたが、難しかったので、助けてくれたことに感謝します。JavascriptとTwitter APIを使ってツイートを読み込んでいます

これはtweets.jsのコードです。私はAPIを注意深く見てきましたが、これが正しいかどうかはわかりません。

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

});

理論上、最新の5つのつぶやきを読み込んでIDタイムラインでULに追加する必要があります。私はあなたがこれを行うにはOAuthが必要かもしれないことを見てきましたが、私はこれを実装する方法がわかりませんでしたか?私は正しいですか? Twitterの古いAPIは1.1ではなく1.1のように動作していたようだ。これで変更されている可能性がありますか?最後に、ここで

だけでULが含まれている私のhtmlページです:

<!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> 

私は私が間違って本当に簡単な何かをやっている可能性を認めるが、私はJavascriptの初心者だと私は見当もつかない!私はいくつかの助けに感謝します!前もって感謝します!

+0

から使用のOAuthを使用すると、コンソール内の任意のエラーを見ていますか? – JordanHendrix

+0

あなたは余分な括弧を持っていました、ここで正しいコードです、あなたはあなたのAPI情報でそれを試すことができますか? https://jsfiddle.net/pjz1fzzg/ – JordanHendrix

+0

それを見つけてくれてありがとう、それはまだ動作していないようです。私はOAuthを調べるべきでしょうか? – BConstable

答えて

3

Twitterの更新されたAPIには、oAuthが必要です。これは、JavaScriptで使用されるサーバー側コンポーネントを作成する必要があります。

あなたの方法論が間違っているわけではありません。 Twitterはちょっとあなたがそのような方法で情報を入手することを望んでいません。

ブラウザでAPIにアクセスすると、エラーが表示されます。 https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=techybox&count=3

主題について、ここで本当に良い記事があります:Simplest PHP example for retrieving user_timeline with Twitter API version 1.1

+0

ありがとうございます:) OAuthで少し読んだだけで、Twitter側の推奨に合わせてJavascriptに実装するのではなく、サーバー側のコンポーネントが必要です – BConstable

0

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); 
    } 
    }); 
関連する問題