How to Retrieve Twitter Timeline and Hashtags in PHP (Twitter OAuth API 1.1)
So, here we offer a guide that explains how to retrieve user timeline and hashtag with Twitter REST API 1.1.
Before we start, we need:
- You need to create an application.https://dev.twitter.com/apps.
- Now, you need to get your consumer key, consumer secret, access token and access token secret.
- We use a Twitter Library called CodeBird-PHP.
- To make all the tweets we retrieve pretty, we will be using Grid-A-Licious
THE HTML
Since all HTML Markup will be generated by jQuery, we only need a div with an id called#jstwitter
<div id="jstwitter"></div> <div class="item"> {IMG} <div class="tweet-wrapper"> <span class="text">{TEXT}</span> <span class="time"> <a href="{URL}" target="_blank">{AGO}</a> </span> by <span class="user">{USER}</span> </div> </div>
THE CSS
We are going to create a Pinterest style with Grid-A-Licious.
#jstwitter { position: relative; } #jstwitter .item { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-box-shadow:0 0 3px 1px rgba(100,100,100,0.2); -moz-box-shadow:0 0 3px 1px rgba(100,100,100,0.2); box-shadow:0 0 3px 1px rgba(100,100,100,0.2); overflow:hidden; background: #fff; } #jstwitter .tweet-wrapper { padding:10px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; line-height:16px; } #jstwitter .item a { text-decoration: none; color: #03a8e5; } #jstwitter .item img { width:100%; } #jstwitter .item a:hover { text-decoration: underline; } #jstwitter .item .text { display:block; } #jstwitter .item .time, #jstwitter .tweet .user { font-style: italic; color: #666666; }
THE PHP CODE
We're not going to write our own PHP OAuth authentication, we will be using a Twitter Library called CodeBird-PHP (CodeBird Documentation)
<? //We use already made Twitter OAuth library //https://github.com/mynetx/codebird-php require_once ('codebird.php'); //Twitter OAuth Settings $CONSUMER_KEY = '...'; $CONSUMER_SECRET = '...'; $ACCESS_TOKEN = '...'; $ACCESS_TOKEN_SECRET = '...'; //Get authenticated Codebird::setConsumerKey($CONSUMER_KEY, $CONSUMER_SECRET); $cb = Codebird::getInstance(); $cb->setToken($ACCESS_TOKEN, $ACCESS_TOKEN_SECRET); //retrieve posts $q = $_POST['q']; $count = $_POST['count']; $api = $_POST['api']; //https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline //https://dev.twitter.com/docs/api/1.1/get/search/tweets $params = array( 'screen_name' => $q, 'q' => $q, 'count' => $count ); //Make the REST call $data = (array) $cb->$api($params); //Output result in JSON, getting it ready for jQuery to process echo json_encode($data); ?>
The Javascript / jQuery
Depend on the parameters, you can either search for hashtag, or load a user timeline. The script sends the parameters to the PHP file, and PHP script gets us authenticated, and PHP returns Twitter data in JSON format. The following scripts read the data and parse them in to HTML markup.
For more information about the Twitter Object, you can read it here.
User Timeline Search Tweets$(function() { JQTWEET = { // Set twitter hash/user, number of tweets & id/class to append tweets // You need to clear tweet-date.txt before toggle between hash and user // for multiple hashtags, you can separate the hashtag with OR, eg: // hash: '%23jquery OR %23css' search: '%23heroes2013', //leave this blank if you want to show user's tweet user: 'quenesstestacc', //username numTweets: 21, //number of tweets appendTo: '#jstwitter', useGridalicious: true, template: '<div class="item">{IMG}<div class="tweet-wrapper"><span class="text">{TEXT}</span>\ <span class="time"><a href="{URL}" target="_blank">{AGO}</a></span>\ by <span class="user">{USER}</span></div></div>', // core function of jqtweet // https://dev.twitter.com/docs/using-search loadTweets: function() { var request; // different JSON request {hash|user} if (JQTWEET.search) { request = { q: JQTWEET.search, count: JQTWEET.numTweets, api: 'search_tweets' } } else { request = { q: JQTWEET.user, count: JQTWEET.numTweets, api: 'statuses_userTimeline' } } $.ajax({ url: 'grabtweets.php', type: 'POST', dataType: 'json', data: request, success: function(data, textStatus, xhr) { if (data.httpstatus == 200) { if (JQTWEET.search) data = data.statuses; var text, name, img; try { // append tweets into page for (var i = 0; i < JQTWEET.numTweets; i++) { img = ''; url = 'http://twitter.com/' + data[i].user.screen_name + '/status/' + data[i].id_str; try { if (data[i].entities['media']) { img = '<a href="' + url + '" target="_blank"><img src="' + data[i].entities['media'][0].media_url + '" /></a>'; } } catch (e) { //no media } $(JQTWEET.appendTo).append( JQTWEET.template.replace('{TEXT}', JQTWEET.ify.clean(data[i].text) ) .replace('{USER}', data[i].user.screen_name) .replace('{IMG}', img) .replace('{AGO}', JQTWEET.timeAgo(data[i].created_at) ) .replace('{URL}', url ) ); } } catch (e) { //item is less than item count } if (JQTWEET.useGridalicious) { //run grid-a-licious $(JQTWEET.appendTo).gridalicious({ gutter: 13, width: 200, animate: true }); } } else alert('no data returned'); } }); }, /** * relative time calculator FROM TWITTER * @param {string} twitter date string returned from Twitter API * @return {string} relative time like "2 minutes ago" */ timeAgo: function(dateString) { var rightNow = new Date(); var then = new Date(dateString); if ($.browser.msie) { // IE can't parse these crazy Ruby dates then = Date.parse(dateString.replace(/( \+)/, ' UTC$1')); } var diff = rightNow - then; var second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24, week = day * 7; if (isNaN(diff) || diff < 0) { return ""; // return blank string if unknown } if (diff < second * 2) { // within 2 seconds return "right now"; } if (diff < minute) { return Math.floor(diff / second) + " seconds ago"; } if (diff < minute * 2) { return "about 1 minute ago"; } if (diff < hour) { return Math.floor(diff / minute) + " minutes ago"; } if (diff < hour * 2) { return "about 1 hour ago"; } if (diff < day) { return Math.floor(diff / hour) + " hours ago"; } if (diff > day && diff < day * 2) { return "yesterday"; } if (diff < day * 365) { return Math.floor(diff / day) + " days ago"; } else { return "over a year ago"; } }, // timeAgo() ify: { link: function(tweet) { return tweet.replace(/\b(((https*\:\/\/)|www\.)[^\"\']+?)(([!?,.\)]+)?(\s|$))/g, function(link, m1, m2, m3, m4) { var http = m2.match(/w/) ? 'http://' : ''; return '<a class="twtr-hyperlink" target="_blank" href="' + http + m1 + '">' + ((m1.length > 25) ? m1.substr(0, 24) + '...' : m1) + '</a>' + m4; }); }, at: function(tweet) { return tweet.replace(/\B[@@]([a-zA-Z0-9_]{1,20})/g, function(m, username) { return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/intent/user?screen_name=' + username + '">@' + username + '</a>'; }); }, list: function(tweet) { return tweet.replace(/\B[@@]([a-zA-Z0-9_]{1,20}\/\w+)/g, function(m, userlist) { return '<a target="_blank" class="twtr-atreply" href="http://twitter.com/' + userlist + '">@' + userlist + '</a>'; }); }, hash: function(tweet) { return tweet.replace(/(^|\s+)#(\w+)/gi, function(m, before, hash) { return before + '<a target="_blank" class="twtr-hashtag" href="http://twitter.com/search?q=%23' + hash + '">#' + hash + '</a>'; }); }, clean: function(tweet) { return this.hash(this.at(this.list(this.link(tweet)))); } } // ify }; });
And finally, you run the script like this:
$(function () { // start jqtweet! JQTWEET.loadTweets(); });
Janeth Kent
Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.
Related Posts
Examine the 10 key PHP functions I use frequently
PHP never ceases to surprise me with its built-in capabilities. These are a few of the functions I find most fascinating. 1. Levenshtein This function uses the Levenshtein algorithm to calculate the…
How to Track Flight Status in real-time using the Flight Tracker API
The Flight Tracker API provides developers with the ability to access real-time flight status, which is extremely useful for integrating historical tracking or live queries of air traffic into your…
What is a JWT token and how does it work?
JWT tokens are a standard used to create application access tokens, enabling user authentication in web applications. Specifically, it follows the RFC 7519 standard. What is a JWT token A JWT token…
PHP - The Singleton Pattern
The Singleton Pattern is one of the GoF (Gang of Four) Patterns. This particular pattern provides a method for limiting the number of instances of an object to just one.…
How to Send Email from an HTML Contact Form
In today’s article we will write about how to make a working form that upon hitting that submit button will be functional and send the email (to you as a…
How to make a multilingual website without redirect
Today, we're going to talk about how to implement a simple language selector on the basic static website, without the need of any backend or database calls or redirection to…
Starting with Bootstrap-Vue step by step
Today we will show you how to use BootstrapVue, describe the installation process and show basic functionality. The project’s based on the world's most popular CSS framework - Bootstrap, for building…
Bootstrap 5 beta2. What offers?
Since the release of the Bootstrap 4 is three years, in this article we will present what is new in the world’s most popular framework for building responsive, mobile-first sites.…
Graphic design and its impact on Web Development
In today's article we will explain the concept of graphic design, its fundamentals and what it brings into web development. Graphic design is applied to everything visual, believe or not,…
Creating simple CSS spinner-loader
In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image. That can be used…
Validating HTML forms using BULMA and vanilla JavaScript
Today we are going to write about contact forms and how to validate them using JavaScript. The contact form seems to be one of the top features of every basic home…
The State of PHP 8: new features and changes
PHP 8.0 has been released last November 26: let's discover together the main innovations that the new version introduces in this language. PHP is one of the most popular programming languages…