I have three pieces of code the twitter-proxy.php, jquery.twitter.js, and twitter.html
I want my twitter feed to display on twitter.html, but I am having very little luck if someone can help me troubleshoot I would be grateful.
twitter-proxy.php
<?php
/**
* Usage:
* Send the url you want to access url encoded in the url paramater, for example (This is with JS):
* /twitter-proxy.php?url='+encodeURIComponent('statuses/user_timeline.json?screen_name=socfocus&count=3')
*/
// The tokens, keys and secrets from the app you created at https://dev.twitter.com/apps
$config = array(
'oauth_access_token' => '1',
'oauth_access_token_secret' => '2',
'consumer_key' => '3',
'consumer_secret' => '4',
'use_whitelist' => true, // If you want to only allow some requests to use this script.
'base_url' => 'https://api.twitter.com/1.1/'
);
// Only allow certain requests to twitter. Stop randoms using your server as a proxy.
$whitelist = array(
'socfocus' => true
);
/*
* Ok, no more config should really be needed. Yay!
*/
// We'll get the URL from $_GET[]. Make sure the url is url encoded, for example encodeURIComponent('statuses/user_timeline.json?screen_name=socfocus&count=3&include_rts=false&exclude_replies=true')
if(!isset($_GET['url'])){
die('No URL set');
}
$url = $_GET['url'];
if($config['use_whitelist'] && !isset($whitelist[$url])){
die('URL is not authorised');
}
// Figure out the URL parmaters
$url_parts = parse_url($url);
parse_str($url_parts['query'], $url_arguments);
$full_url = $config['base_url'].$url; // Url with the query on it.
$base_url = $config['base_url'].$url_parts['path']; // Url without the query.
/**
* Code below from http://stackoverflow.com/questions/12916539/simplest-php-example-retrieving-user-timeline-with-twitter-api-version-1-1 by Rivers
* with a few modfications by Mike Rogers to support variables in the URL nicely
*/
function buildBaseString($baseURI, $method, $params) {
$r = array();
ksort($params);
foreach($params as $key=>$value){
$r[] = "$key=" . rawurlencode($value);
}
return $method."&" . rawurlencode($baseURI) . '&' . rawurlencode(implode('&', $r));
}
function buildAuthorizationHeader($oauth) {
$r = 'Authorization: OAuth ';
$values = array();
foreach($oauth as $key=>$value)
$values[] = "$key=\"" . rawurlencode($value) . "\"";
$r .= implode(', ', $values);
return $r;
}
// 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'
);
$base_info = buildBaseString($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', $base_info, $composite_key, true));
$oauth['oauth_signature'] = $oauth_signature;
// Make Requests
$header = array(
buildAuthorizationHeader($oauth),
'Expect:'
);
$options = array(
CURLOPT_HTTPHEADER => $header,
//CURLOPT_POSTFIELDS => $postfields,
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']);
}
echo($result);
?>
jquery.twitter.js
/*
* Change to
*/
$.getJSON('/twitter-proxy.php?url='+encodeURIComponent('statuses/user_timeline.json?screen_name=socfocus&count=3'), function(d){
// Some magic here
}
twitter.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Twitter Feed</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<meta name="description" content="Your description">
<meta name="keywords" content="Your keywords">
<meta name="author" content="Your name">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/preview.css" type="text/css">
<script type="text/javascript" src="js/include_script.js"></script>
<script type="text/javascript" src="js/jquery.twitter.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<!--content wrapper-->
<div id="wrapper">
<section>
<div class="dynamicContent">
<div class="cont_bg">
<div class="inner corr_5">
<div class="container">
<div class="row marg_1">
<div class="span12">
<div class="cont_inner7">
<h2>SocFocus Twitter Feed</h2>
<p>
<div id="twitter"></div>
<!-- Carousel - consult the Twitter Bootstrap docs at http://twitter.github.com/bootstrap/javascript.html#carousel -->
<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
<div class="item">
<img src="http://placehold.it/1200x480" alt="" />
<div class="carousel-caption">
<p>Caption text here</p>
</div>
</div>
</div><!-- /.carousel-inner -->
<!-- Next and Previous controls below
href values must reference the id for this carousel -->
<a class="carousel-control left" href="#this-carousel-id" data-slide="prev">‹</a>
<a class="carousel-control right" href="#this-carousel-id" data-slide="next">›</a>
</div><!-- /.carousel -->
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.carousel').carousel({
interval: 8000
});
});
</script>
</body>
</html>
