In this tutorial, we will build a simple website that displays tweets with performance indicators like ‘Retweets’ and ‘Favorites’ for any hashtag we desire.
Prerequisites
The code used in this tutorial will be entirely JavaScript, CSS & HTML, so, all you need in place is the following two points.
Apply for a Twitter Developers Account and wait for approval (This could take up to a couple of weeks)
A basic NodeJS & ExpressJS setup, you can follow my earlier tutorial to get this up and running in less than 30 mins!
Installing & Configuring Twit
First up, we need to install the beautiful Twit library which allows us to configure our API credentials and also gives us some pre-defined API functionality. Twit is a neat Twitter API client for Node and saves a boatload of time fleshing out all the code yourself.
Install Twit by running
npm install twitThen, require the library in your server.js file by adding the following code near to the top of the file –
const twit = require("twit")CopyLastly, configure a new Twit instance with your API credentials –
let Twitter = new twit({
consumer_key: 'your_consumer_key',
consumer_secret: 'your_consumer_secret',
access_token: 'your_access_token',
access_token_secret: 'your_access_token_secret',
timeout_ms: 60 * 1000,
// optional HTTP request timeout to apply to all requests.
strictSSL: true,
// optional - requires SSL certificates to be valid.
});Searching for some tweets
Before we make it all beautiful and user-friendly, we can test searching for tweets from a hashtag by running the API call and logging the response to the console. For this example, I used the ‘#100DaysOfCode’ hashtag for the q parameter, which I like to think stands for ‘Query’.
Let’s add the code to search tweets on Twitter, just after the Twit instance setup.
Twitter.get('search/tweets',
{
q: '#100DaysOfCode',
count: 100,
result_type: "mixed"
}).catch(function (err)
{
console.log('caught error', err.stack)
}).then(function (result)
{
console.log('data', result.data);
});Now re-run your server.js file and check out the response in the console, it should look similar to below –
As you can see from the screenshot above, each tweet comes with a lot of useful data, albeit some of it hidden within the console because they are further objects, but still really handy data. The most obvious pieces of data are the retweet_count and favorite_count.
So, how do we make this user-friendly and ultimately digestible information?
Add a single HTML input field to allow submission of hashtags to the backend.
Configuring the server.js file to handle post data from the HTML form and use it within the API call.
Return the response to our index file.
Parse the data and build our beautiful HTML.
Let’s go…
Adding an HTML form to the index.ejs file
Add the following code to your index.ejs file, for quickness I’ve used the bootstrap and font awesome CDN.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Twitter Hashtag Viewer</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"type="text/css">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"type="text/css">
</head>
<body>
<div class="container">
<div class="form mb-2 mt-2">
<fieldset>
<form action="/" method="post">
<div class="input-group">
<input class="form-control" name="hashtag"
placeholder="eg. #100DaysOfCode" required type="text">
<input type="submit" value="Analyze!">
</div>
</form>
</fieldset>
</div>
</div>
</body>
</html>With the above code inserted into your file, it should look something like below –
Configuring Our server.js to handle Post requests
Installing and configuring Body-parser
Now we need to write the logic to handle the posting of input values into the form above. First of all, we need to install some middleware which will give us this functionality, namely body-parser. Body-parser has access to the req and res objects giving us the ability to interrogate what data is passed during the post.
Run the following command to install it –
npm install body-parser --saveThen, at the top of your server.js file, require it, and lastly, tell the app to utilize its power.
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: true }));
Adding our post handler
Add the following JS to your server.js file which will handle a simple posting of the hashtag input form with the name ‘hashtag’.
app.post('/', function (req, res)
{
console.log(req.body.hashtag);
if (req.body.hashtag !== undefined)
{
res.render('index', {hashtag: req.body.hashtag})
}
res.render('index', {hashtag: null})
});Adjusting the index file to print hashtag variable passed in from the post handler
Add the following EJS markup to your index.ejs file, somewhere that you want the hashtag to print out after it’s been submitted to the server and returned as a variable.
<% if(hashtag !== null){ %>
<h3>All popular tweets for <%- hashtag %></h3>
<% } %>Now, if you reboot your server, navigate to the index file and submit a new hashtag, you should see the value printed to the page! See below, I submitted the hashtag ‘code’
Putting it all together and displaying tweets
So, we’ve got our Twitter API client ready, the ability to post data from an HTML form, all is left to do is build the logic for the API call to include the hashtag and return data to the index file. Once that’s done, we can format the data to look good and digestible.
The next pieces of code will need to be completely changed if you want to build more functionality into the project, but for now, it’s sole purpose is to handle hashtag inputs and query the Twitter API with them.
Edit your server.js files post handler
Adjust your Post handler to look the same as below, with your own API credentials –
app.post('/', function (req, res)
{
if (req.body.hashtag !== null)
{
let Twitter = new twit({
consumer_key: 'your_consumer_key',
consumer_secret: 'your_consumer_secret',
access_token: 'your_access_token',
access_token_secret: 'your_access_token_secret',
timeout_ms: 60 * 1000,
// optional HTTP request timeout to apply to all requests.
strictSSL: true,
// optional - requires SSL certificates to be valid.
});
Twitter.get('search/tweets',
{
q: req.body.hashtag,
// use the user posted hashtag value as the query
count: 100,
result_type: "mixed"
}).catch(function (err)
{
console.log('caught error', err.stack)
res.render('index', {
hashtag: null,
twitterData: null,
error: err.stack
});
}).then(function (result)
{
// Render the index page passing in the hashtag and the Twitter API results
res.render('index',
{
hashtag: req.body.hashtag,
twitterData: result.data,
error: nul
l});
});
}
});Edit your index.ejs file to handle the Twitter Data
Adjust your index.ejs file to look similar to below, which does the following –
Uses font-awesome for like and retweet icons
Logic to handle if twitter data is present
JavaScript to build and append HTML to the page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Twitter Hashtag Viewer</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"type="text/css">
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"type="text/css">
</head>
<body>
<div class="container">
<div class="form mb-2 mt-2">
<fieldset>
<form action="/" method="post">
<div class="input-group">
<input class="form-control" name="hashtag"
placeholder="eg. #100DaysOfCode" required type="text">
<input type="submit" value="Analyze!">
</div>
</form>
</fieldset>
</div>
<div class="container-fluid">
</div>
<% if(hashtag !== null){ %>
<h3>All popular tweets for <%- hashtag %></h3>
<% } %>
<div id="tweets"></div>
<% if(twitterData !== null){ %>
<script>
let twitterData = <%- JSON.stringify(twitterData) %>;
let tweetHTML = '<div class="row">';
for (let index = 0; index < twitterData.statuses.length; index++)
{
var createdDateTime = new Date
(twitterData.statuses[index].created_at).toUTCString();
tweetHTML += '<div class="col-sm-4"><div class="card mb-3">'
+'
<div class="card-body">' +'
<h5 class="card-title">@' +
twitterData.statuses[index].user.screen_name + '
</h5>' +'
<h6 class="card-subtitle mb-2 text-muted">' +
twitterData.statuses[index].user.name + '
</h6>' +'
<p class="card-text">' + twitterData.statuses[index].text
+ '<</p>' +'
<p class="card-text"><i class="fa fa-retweet" aria-
hidden="true"></i> ' + twitterData.statuses[index]
.retweet_count + ' <i class="fa fa-heart"
style="color:red;" aria-hidden="true"></i> ' +
twitterData.statuses[index].favorite_count + '</p>' +
// '<a class="card-link" href="#">Another link</a>' +
'<p class="card-text"><small class="text-muted">Created on
'+createdDateTime.toString()+' </small>
</p>' +'
</div>' +'
</div>' +'
</div>';
}
tweetHTML += '</div>';
var tweetsContainer = document.getElementById('tweets');
tweetsContainer.insertAdjacentHTML('beforeend', tweetHTML);
</script>
<% } %>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</body>
</html>Save both files and reboot your Node server, navigate to the index page and search for a tweet. You should now have a very clean HTML page with all of the popular and latest tweets for that hashtag, see example below for #code.
Summary
This tutorial was written to once again show the power of the Twitter API’s many uses, with data like this the information can be forever valuable. Especially to businesses looking for trends. Whatever your ideas, this article gives you a strong foundation to get set up quickly and analyze tweets from within your own project. Check out the Twitter Standard search API documentation for further reading on the API method used in this article.FinishedTwitter is an incredible social media platform for end users but, it’s also immense for data analyzers too. Twitter offers an API to conduct informative searches and display these results in your own web tools. From there, the world is your oyster, especially for social media marketers.
Resource: Codewall.co.uk
The Tech Platform
Comments