jquery.tweet.js 插件不工作,如何显示推文

标签 jquery html css twitter

我已经在我的网站上使用这个插件来显示推文,但即使是插件网站也有问题:

http://coda.co.za/content/projects/jquery.twitter/

代码:

<div class="columns">
   <pre class="code">
                    jQuery(function($){
                      $("#twitter").tweet({
                        join_text: "auto",
                        username: "Jquery",
                        avatar_size: 48,
                        count: 4,
                        auto_join_text_default: "",
                        auto_join_text_ed: "",
                        auto_join_text_ing: "",
                        auto_join_text_reply: "",
                        auto_join_text_url: "",
                        loading_text: "loading tweets..."
                      });
                    });
        </pre>
  <div id="twitter"></div>

每个第三方插件(我认为)都不再工作了。我也看到了:

http://tweet.seaofclouds.com/

那么,替代品是什么?

如果您访问过上面的链接,您可能已经明白,问题出在哪里。

最佳答案

由于 twitter 已从未经身份验证的 1.0 API 更改为 OAuth 1.1,如果您想使用该插件,您现在必须通过 PHP 代理 API 请求。

这是代理请求的 PHP。在您的站点中将此页面创建为 twitter-proxy.php,并更新 oauth_access_tokenoauth_access_token_secretconsumer_key 的值>、consumer_secretscreen_name 以反射(reflect)您自己的 Twitter 帐户。

访问https://dev.twitter.com/apps如果您需要创建一个应用程序来获取这些值。

<?php
/* Twitter Proxy for updated OAuth */
$config = array(
    //Twitter OAuth config
    'oauth_access_token' => 'get from twitter',
    'oauth_access_token_secret' => 'get from twitter',
    'consumer_key' => 'get from twitter',
    'consumer_secret' => 'get from twitter',
    'base_url' => 'https://api.twitter.com/1.1/',
    //Request specific user
    'screen_name' => 'your_twitter_screenname',
    'count' => 3
);

$twitter_request = 'statuses/user_timeline.json?screen_name='.$config['screen_name'].'&count='.$config['count'];

// Parse $twitter_request into URL parameters
$url_part = parse_url($twitter_request);

/* url_arguments=
* Array
* (
*    [screen_name] => lcherone
*    [count] => 3
* )
*/
parse_str($url_part['query'], $url_arguments);

$base_url = $config['base_url'].$url_part['path'];
$full_url = $config['base_url'].$twitter_request;

// Set up the OAuth authorization array
$oauth = array(
'oauth_consumer_key' => $config['consumer_key'],
'oauth_nonce' => time(),
'oauth_signature_method' => 'HMAC-SHA1',
'oauth_token' => $config['oauth_access_token'],
'oauth_timestamp' => time(),
'oauth_version' => '1.0'
);

// Build vectors for request
$composite_request = _BaseString($base_url, 'GET', array_merge($oauth, $url_arguments));
$composite_key     = rawurlencode($config['consumer_secret']).'&'.rawurlencode($config['oauth_access_token_secret']);
$oauth_signature   = base64_encode(hash_hmac('sha1', $composite_request, $composite_key, true));
$oauth['oauth_signature'] = $oauth_signature;

// Make cURL Request
$options = array(
CURLOPT_HTTPHEADER => array(_AuthorizationHeader($oauth),'Expect:'),
CURLOPT_HEADER => false,
CURLOPT_URL => $full_url,
CURLOPT_RETURNTRANSFER => true,
CURLOPT_SSL_VERIFYPEER => false
);

$feed = curl_init();
curl_setopt_array($feed, $options);
$result = curl_exec($feed);
$info = curl_getinfo($feed);
curl_close($feed);

// Send suitable headers to the end user.
if(isset($info['content_type']) && isset($info['size_download'])){
    header('Content-Type: '.$info['content_type']);
    header('Content-Length: '.$info['size_download']);
}
exit($result);

function _BaseString($base_url, $method, $values) {
    $ret = array();
    ksort($values);
    foreach($values as $key=>$value)
    $ret[] = $key."=".rawurlencode($value);
    return $method."&".rawurlencode($base_url).'&'.rawurlencode(implode('&', $ret));
}

function _AuthorizationHeader($oauth) {
    $ret = 'Authorization: OAuth ';
    $values = array();
    foreach($oauth as $key=>$value)
    $values[] = $key.'="'.rawurlencode($value).'"';
    $ret .= implode(', ', $values);
    return $ret;
}
?>

现在用下面的函数替换 jquery.tweets.js 文件中现有的 build_api_url 函数,确保替换 yoursite.com

function build_api_url() {
      var proto = ('https:' == document.location.protocol ? 'https:' : 'http:');
      var count = (s.fetch === null) ? s.count : s.fetch;
      var common_params = '&callback=?';
      if (s.list) {
        return 'http://yoursite.com/twitter-proxy.php?url='+s.username[0]+"/lists/"+s.list+"/statuses.json?page="+s.page+"&per_page="+count+common_params;
      } else if (s.favorites) {
        return 'http://yoursite.com/twitter-proxy.php?url=favorites.json?screen_name='+s.username[0]+"&page="+s.page+"&count="+count+common_params;
      } else if (s.query === null && s.username.length == 1) {
        return 'http://yoursite.com/twitter-proxy.php?url='+encodeURIComponent('statuses/user_timeline.json?screen_name='+s.username[0]+'&count='+count+common_params);
      } else {
        var query = (s.query || 'from:'+s.username.join(' OR from:'));
        return 'http://yoursite.com/twitter-proxy.php?url=/search.json?&q='+encodeURIComponent(query)+'&rpp='+count+'&page='+s.page+common_params;
      }
}

2014-12-17 更新:截至 2014-02-27,Twitter requires the use of SSL to connect to its API servers .我已更新代码以反射(reflect)这一点。

关于jquery.tweet.js 插件不工作,如何显示推文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17084201/

相关文章:

html - Bootstrap 导航栏将登录按钮放在 Safari 中的第二行

javascript - 如何使用jquery最接近应用css

javascript - 无法在精细 uploader 中查看缩略图上的图像

jquery - 如何使每篇文章的盒子高度相同,这样就没有空白

html - Windows 浏览器上的视频 z-index 问题

css - 相对元素与 Chrome 中的绝对元素重叠

html - 在html和css中制作全高div

javascript - 如何在img上点击,只显示一个,隐藏其他div

javascript - 使用 jQuery 检查名称未知时检查的所有单选组

javascript检测滚动条不工作