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.

Answer 2

You can no-longer use the Twitter 1.0 API as they retired it on June 11th 2013.

You can see the cause of the problem if you try and request the 1.0 API, like this:

https://api.twitter.com/1/statuses/user_timeline.json?screen_name=omgmog

{
    "errors": [
        {
            "message": "The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.",
            "code": 68
        }
    ]
}

The only way to get Tweets on to your site now is to either:

• Use the Twitter widget that they provide at https://twitter.com/settings/widgets
• Set up some server-side script to fetch tweets from the 1.1 API, and then modify the jquery.tweet.js plugin to use that.

You can read more about the 1.1 API here: https://dev.twitter.com/docs/api/1.1/overview

It's really annoying, I've got a bunch of sites that need to be migrated now