CODEWITHSUNDEEP
jqueryhtmlcsstwitter
Asif
Asif

Reputation: 756

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

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.

Upvotes: 5

Views: 17274

Answers (6)

Fiach Reid
Fiach Reid

Reputation: 7059

If you don't want to use PHP, and just want to use Javascript, then you can use the Javascript library "TweetJS", from www.tweetjs.com

You can retrieve and display tweets using this library, but you cannot post out tweets, since this requires authentication. Here's an example on how to display tweets from a timeline (to the console):

TweetJs.ListTweetsOnUserTimeline("PetrucciMusic",
function (data) {
    console.log(data);
});

Upvotes: 1

Lawrence Cherone
Lawrence Cherone

Reputation: 46602

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.

Upvotes: 6

CrazyCoderMonkey
CrazyCoderMonkey

Reputation: 433

see: https://dev.twitter.com/discussions/10193 and https://github.com/StanScates/Tweet.js-Mod for a solution to the twitter api 1.1 compatibility issue

Upvotes: 3

Shabith
Shabith

Reputation: 3005

You can use this version of jQuery.tweet.js instead of that. https://github.com/StanScates/Tweet.js-Mod more information from https://github.com/seaofclouds/tweet/issues/264

Upvotes: 0

wakqasahmed
wakqasahmed

Reputation: 2089

Basically the message returning from twitter is as follows:

{"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}]}

you need to use plugin that is written for v1.1, in new version they have added security layer so you need to be authorized in order to get the tweets via API, here are the links that will be helpful for you

http://www.webdevdoor.com/php/authenticating-twitter-feed-timeline-oauth/ http://www.fullondesign.co.uk/coding/2516-how-use-twitter-oauth-1-1-javascriptjquery.htm

Upvotes: 2

omgmog
omgmog

Reputation: 616

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

Upvotes: 3

Related Questions