jquery.tweet.js plugin is not working, how to show tweets

Question

I have used this plugin on my website to display tweets, but even the plugin site has the problem:

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

Code:

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

Every third party plug-in (I think) is not working any more. I have seen also:

http://tweet.seaofclouds.com/

So, what would be the replacement?

If you have visited the links above you might have understood, where is the problem.

Answer 1

Since twitter has changed from non authenticated 1.0 API to OAuth 1.1, you now have to proxy the API request through PHP if you want to use that plugin.

Here's the PHP to proxy the request. Create this page as twitter-proxy.php in your site, and update the values of oauth_access_token, oauth_access_token_secret, consumer_key, consumer_secret and screen_name to reflect your own Twitter account.

Visit https://dev.twitter.com/apps if you need to create an application to get these values.

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

Now replace the existing build_api_url function in your jquery.tweets.js file with the function below, making sure you replace 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;
      }
}

Update 2014-12-17: As of 2014-02-27, Twitter requires the use of SSL to connect to its API servers. I have updated the code to reflect this.