X (Twitter) Trends – Worldwide: API के द्वारा रियल-टाइम डेटा कैसे बनाएं?
यदि आप रियल-टाइम में X (Twitter) ट्रेंड्स (Worldwide या किसी विशेष स्थान के) दिखाने वाला टूल बनाना चाहते हैं, तो यह गाइड आपके लिए है। इस पोस्ट में हम आपको HTML, CSS और JavaScript का उपयोग करके Twitter API से रियल डाटा प्राप्त करने और उसे टूल में प्रदर्शित करने का पूरा प्रोसेस बताएंगे। यह गाइड पूरी तरह से यूनिक है और इसे पढ़ने के बाद आपको किसी अन्य जानकारी की आवश्यकता नहीं होगी।
क्या है X (Twitter) Trends Tool?
यह एक टूल है जो आपको Twitter (अब X) से रियल-टाइम में ट्रेंडिंग हैशटैग्स और टॉपिक्स को प्राप्त करने और उन्हें एक सुंदर टेबल में दिखाने की अनुमति देता है। इसमें निम्नलिखित फीचर्स होंगे:
- Worldwide और Specific Location Trends (WOEID का उपयोग करके)।
- हैशटैग के साथ उसका Tweet Volume।
- Copy बटन से हैशटैग को क्लिपबोर्ड में कॉपी करने की सुविधा।
- हर 60 सेकंड में ऑटो-रिफ्रेश, ताकि डेटा हमेशा अपडेट रहे।
कैसे काम करेगा ये टूल?
- Twitter API का उपयोग करके रियल-टाइम ट्रेंडिंग डेटा प्राप्त किया जाएगा।
- API कॉल्स को JavaScript के माध्यम से मैनेज किया जाएगा।
- HTML और CSS के माध्यम से डेटा को एक सुंदर टेबल में प्रदर्शित किया जाएगा।
टूल बनाने के लिए आवश्यकताएं
- Twitter Developer Account:
- Twitter Developer Platform पर रजिस्टर करें।
- API Key, API Secret Key और Bearer Token प्राप्त करें।
- WOEID (Where On Earth ID):
- WOEID एक यूनिक कोड है जो स्थान को दर्शाता है।
- उदाहरण:
- Worldwide:
1 - India:
23424848 - अन्य स्थानों के लिए Yahoo WOEID List देखें।
- Worldwide:
- Basic Web Development Tools:
- HTML, CSS, और JavaScript का ज्ञान।
- एक टेक्स्ट एडिटर (जैसे VS Code)।
चरण 1: HTML संरचना तैयार करें
नीचे HTML कोड है जो आपके टूल का लेआउट तैयार करेगा:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>X (Twitter) Trends - Worldwide</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>X (Twitter) Trends - Worldwide</h1>
<p>Real-time trending topics and hashtags fetched from Twitter API.</p>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Trending Topic / Hashtag</th>
<th>Tweet Volume</th>
<th>Copy</th>
</tr>
</thead>
<tbody id="trends">
<!-- Trending data will be dynamically added here -->
</tbody>
</table>
</div>
<script src="script.js"></script>
</body>
</html>चरण 2: CSS से डिजाइन बनाएं
HTML को सुंदर बनाने के लिए CSS का उपयोग करें। यह फाइल style.css में सेव करें:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #0056b3;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
table th, table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
table th {
background-color: #f2f2f2;
}
.copy-btn {
background-color: #28a745;
color: #fff;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 5px;
}
.copy-btn:hover {
background-color: #218838;
}चरण 3: JavaScript के साथ API इंटीग्रेशन करें
नीचे JavaScript कोड है जो Twitter API से डेटा प्राप्त करता है और उसे टेबल में प्रदर्शित करता है। इसे script.js फाइल में सेव करें:
const apiKey = "YOUR_BEARER_TOKEN"; // अपना Bearer Token यहां पेस्ट करें
async function fetchTrendingData() {
const woeid = 1; // Worldwide WOEID (आप इसे बदल सकते हैं)
const apiUrl = `https://api.twitter.com/1.1/trends/place.json?id=${woeid}`;
try {
const response = await fetch(apiUrl, {
headers: {
Authorization: `Bearer ${apiKey}`, // API Authentication
},
});
if (!response.ok) {
throw new Error(`HTTP Error: ${response.status}`);
}
const data = await response.json();
const trends = data[0].trends; // Extract trends data
loadTrends(trends);
} catch (error) {
console.error("Error fetching data:", error);
alert("Failed to fetch trending data.");
}
}
function loadTrends(trendingData) {
const trendsTable = document.getElementById("trends");
trendsTable.innerHTML = ""; // Clear old data
trendingData.slice(0, 50).forEach((trend, index) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${index + 1}</td>
<td>${trend.name}</td>
<td>${trend.tweet_volume ? trend.tweet_volume + " Tweets" : "N/A"}</td>
<td><button class="copy-btn" onclick="copyToClipboard('${trend.name}')">Copy</button></td>
`;
trendsTable.appendChild(row);
});
}
function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(() => {
alert(`Copied: ${text}`);
});
}
// Fetch data initially and refresh every 60 seconds
fetchTrendingData();
setInterval(fetchTrendingData, 60000); // Auto-refreshचरण 4: API Key सेट करें
YOUR_BEARER_TOKENको अपनी Twitter API Key से बदलें।- आप इसे Twitter Developer Platform पर जाकर प्राप्त कर सकते हैं।
Twitter API के लिए रजिस्ट्रेशन करें
आपको सबसे पहले Twitter Developer Portal पर एक Developer Account बनाना होगा:
- Twitter Developer Platform पर जाएं।
- अपना Developer Account सेटअप करें।
- एक नया प्रोजेक्ट बनाएं और Bearer Token प्राप्त करें।
2. API Key और Token प्राप्त करें
Twitter API पर रजिस्ट्रेशन के बाद:
- API Key, API Secret Key, और Bearer Token जनरेट करें।
- यह टोकन आपके API कॉल्स को प्रमाणित करने के लिए उपयोग किया जाएगा।
अतिरिक्त सुझाव
- ड्रॉपडाउन जोड़ें:
उपयोगकर्ता को स्थान (जैसे India, USA) चुनने का विकल्प देने के लिए एक ड्रॉपडाउन बनाएं। - CORS समस्या का समाधान:
यदि ब्राउज़र में API कॉल करने में CORS समस्या आती है, तो आप एक Backend Proxy Server का उपयोग कर सकते हैं।
इस गाइड में, हमने आपको एक ऐसा टूल बनाने का प्रोसेस दिया जो रियल-टाइम में Twitter API से डेटा प्राप्त करता है। इसमें HTML, CSS और JavaScript का उपयोग किया गया है, और API इंटीग्रेशन को विस्तार से समझाया गया है।
अब आप इसे लाइव बना सकते हैं और अपने वेबसाइट विजिटर्स को रियल-टाइम Twitter ट्रेंड्स दिखा सकते हैं।
उम्मीद है आपने इस पोस्ट को पढ़कर X (Twitter) Trends – Worldwide टुल का निर्माण एचटीएमएल सीएसएस और जावास्क्रिप्ट के मदद से कर लिया होगा अगर अभी भी आपके पास कोई सवाल या सुझाव है तो नीचे कमेंट बॉक्स में लिखकर हमसे जरूर पूछे हम आपके सवालों का जवाब जल्द से जल्द देने की कोशिश करेंगे।
