Create a Dynamic Twitter Feed Widget

July 22, 2024
Pushp Goyal

Introduction

Embedding a dynamic Twitter feed on your website can keep your visitors engaged with your latest tweets and updates. It also allows you to showcase your social media activity directly on your site, encouraging more followers. This tutorial will guide you through creating a dynamic Twitter feed widget using Twitter API and JavaScript.

Requirements for creating a simple Twitter feed widget

Basic knowledge of HTML, CSS, and JavaScript
A Twitter Developer account
Access to the Twitter API
A text editor (e.g., VSCode, Sublime Text)

Step 1: Setting Up Twitter API Access

Create a Twitter Developer Account: Go to the Twitter Developer site and create an account.
Create an App: In your developer dashboard, create a new app to get your API keys.
Generate Access Tokens: Obtain your API key, API secret key, access token, and access token secret.

Step 2: HTML Structure

Create an index.html file with the following content to set up the basic structure of your webpage:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitter Feed Widget</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="twitter-feed" id="twitter-feed">
        <!-- Tweets will be inserted here -->
    </div>
    <script src="scripts.js"></script>
</body>
</html>

Step 3: Styling with CSS

Create a styles.css file to style your Twitter feed:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.twitter-feed {
    width: 400px;
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background: #fff;
    padding: 20px;
}

.tweet {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.tweet:last-child {
    border-bottom: none;
}

.tweet p {
    margin: 0;
}

Step 4: Fetching Tweets with JavaScript

Create a scripts.js file to fetch and display tweets:

const apiKey = 'YOUR_API_KEY';
const apiSecretKey = 'YOUR_API_SECRET_KEY';
const accessToken = 'YOUR_ACCESS_TOKEN';
const accessTokenSecret = 'YOUR_ACCESS_TOKEN_SECRET';

const fetchTweets = async () => {
    const response = await fetch('https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=YOUR_TWITTER_HANDLE&count=5', {
        headers: {
            'Authorization': `Bearer ${accessToken}`
        }
    });
    const tweets = await response.json();
    return tweets;
};

const displayTweets = (tweets) => {
    const twitterFeed = document.getElementById('twitter-feed');
    tweets.forEach(tweet => {
        const tweetElement = document.createElement('div');
        tweetElement.classList.add('tweet');
        tweetElement.innerHTML = `
            <p>${tweet.text}</p>
            <small>${new Date(tweet.created_at).toLocaleString()}</small>
        `;
        twitterFeed.appendChild(tweetElement);
    });
};

const loadTweets = async () => {
    const tweets = await fetchTweets();
    displayTweets(tweets);
};

loadTweets();

Replace 'YOUR_API_KEY', 'YOUR_API_SECRET_KEY', 'YOUR_ACCESS_TOKEN', 'YOUR_ACCESS_TOKEN_SECRET', and 'YOUR_TWITTER_HANDLE' with your actual Twitter API credentials and Twitter handle.

Conclusion

Embedding a dynamic Twitter feed widget on your website can enhance user engagement by displaying your latest tweets and updates in real-time. This tutorial provided a simple way to integrate Twitter posts into your website using HTML, CSS, and JavaScript.

Try
RecurPost

Schedule and Publish your posts on multiple social accounts, read and reply to incoming messages with social inbox, and collaborate with your team and clients with ease.