The Problem
Every news site showing crypto prices faces the same dilemma: API keys. CoinGecko's free tier throttles hard, CoinMarketCap demands attribution, and the moment your traffic spikes, you're rate-li## The Source: Binance's Public Endpoint
Binance exposes a public 24-hour ticker endpoint requiring no authentication:
const symbols = encodeURIComponent(JSON.stringify(['BTCUSDT', 'ETHUSDT', 'SOLUSDT', 'XRPUSDT']));
fetch(`https://api.binance.com/api/v3/ticker/24hr?symbols=${symbols}`)
That's the entire "API integration." No key. No signup. Public data.## The Fallback Problem (The Part Everyone Skips)
A ticker showing nothing when Binance is blocked by some ISP-level filter is worse than a static one. So the render function has two layers:
function render(data) {
const el = document.getElementById('priceTicker');
if (!el) return;
el.innerHTML = data.map(c => {
const up = c.pct >= 0;
return `<span>${c.n} ${fmt(c.price)} <span class="${up ? 'up' : 'down'}">${up ? '▲' : '▼'}${Math.abs(c.pct).toFixed(2)}%</span></span>`;
}).join('');
}
Layer 1: Static fallback prices ship inline with the JS. Users see numbers instantly.
Layer 2: The fetch replaces them with live data when Binance responds.
Users never see an empty bar. Worst case: slightly-stale numbers, clearly rendered.mited into displaying stale numbers.
Here's the setup we shipped instead on our news site: zero API keys, zero rate limits, one 2.1KB JavaScript file.
Top comments (0)