Introduction
Introduction
Tracking social media metrics like followers, likes, or shares in real-time can be a powerful way to engage visitors and showcase your online presence. A real-time social media counter dynamically updates these metrics on your website, offering visitors a live view of your social media influence. This tutorial will guide you through creating a real-time social media counter using HTML, CSS, and JavaScript.
Requirements
- Basic knowledge of HTML, CSS, and JavaScript
- Access to your social media account’s API (e.g., Twitter API, Instagram API)
- A text editor (e.g., VSCode, Sublime Text)
Step 1: HTML Structure
Start by setting up the HTML structure for your counter. In your HTML file, add the following code:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time Social Media Counter</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="counter">
<h1>Social Media Followers</h1>
<div id="twitter-followers" class="social-counter">Twitter: <span>0</span></div>
<div id="instagram-followers" class="social-counter">Instagram: <span>0</span></div>
<div id="facebook-likes" class="social-counter">Facebook: <span>0</span></div>
</div>
<script src="scripts.js"></script>
</body>
</html>Step 2: Styling with CSS
Next, style your counter with CSS. In your styles.css file, add the following code:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.counter {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.social-counter {
margin: 10px 0;
font-size: 20px;
}
.social-counter span {
font-weight: bold;
color: #0077b5; /* Adjust color based on social platform */
}Step 3: Adding JavaScript Functionality
Now, add the JavaScript functionality to fetch and display real-time data. In your scripts.js file, add the following code:
const updateCounters = () => {
fetch('https://api.example.com/twitter-followers')
.then(response => response.json())
.then(data => {
document.querySelector('#twitter-followers span').textContent = data.followers;
});
fetch('https://api.example.com/instagram-followers')
.then(response => response.json())
.then(data => {
document.querySelector('#instagram-followers span').textContent = data.followers;
});
fetch('https://api.example.com/facebook-likes')
.then(response => response.json())
.then(data => {
document.querySelector('#facebook-likes span').textContent = data.likes;
});
};
// Update counters every 10 seconds
setInterval(updateCounters, 10000);
// Initial update
updateCounters();
Replace 'https://api.example.com/twitter-followers' with the actual API endpoints for fetching the follower/like counts.