So fügen Sie Ihrer Website einen anklickbaren Besucherzähler hinzu

Ich habe über etwas Lustiges und Interaktives nachgedacht, das ich meinem Portfolio hinzufügen könnte, und ein anklickbarer Zähler, den Besucher nutzen können, um eine kleine „Ich war hier“-Nachricht zu hinterlassen, kam mir wie eine großartige Idee vor. Es ist einfach, ansprechend und eine großartige Möglichkeit, Ihre Website etwas persönlicher zu gestalten. Wenn das nach etwas klingt, das Sie gerne erstellen würden, führt Sie dieser Leitfaden Schritt für Schritt durch die Umsetzung.

Wir werden Schritt für Schritt durch den Aufbau eines voll funktionsfähigen Ansichtszählers gehen. Sie müssen kein erfahrener Entwickler sein, um mitzumachen. Lasst uns eintauchen!

1. Das HTML: Aufbau der Struktur

Zuerst richten wir die Struktur für den Aufrufzähler ein. Während Sie jedes beliebige Symbol oder jeden beliebigen Schaltflächenstil verwenden können, verwende ich für dieses Tutorial ein Augensymbol. Hier ist der HTML-Code:

<div>



<h2>
  
  
  2. The CSS: Styling the Counter
</h2>

<p>Let’s add some simple styling to make the counter look clean and centered. Here’s the CSS:<br>
</p>

<pre class="brush:php;toolbar:false">.eye-counter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.eye-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #333;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.eye-button:hover {
  transform: scale(1.05);
  background-color: rgba(255, 255, 255, 0.2);
}

.eye-icon {
  fill: currentColor;
}

.view-count {
  font-size: 1rem;
  font-weight: bold;
}

Dieses CSS zentriert den Zähler auf der Seite und fügt einige Hover-Effekte für die Schaltfläche hinzu.

3. Mit Javascript zum Leben erwecken

Jetzt zum Hauptereignis: Damit der Schalter funktioniert.
Hier ist das JavaScript, zur Vereinfachung in Funktionen unterteilt:

// Run code after the page has loaded
document.addEventListener('DOMContentLoaded', async () => {
  const eyeButton = document.querySelector('.eye-button');
  const viewCount = document.querySelector('.view-count');

  const BIN_URL = 'https://api.jsonbin.io/v3/b/YOUR_BIN_ID'; // Replace with your bin URL
  const API_KEY = 'YOUR_API_KEY'; // Replace with your API key

  // Function to get the visitor's IP address
  async function getVisitorIP() {
    try {
      const response = await fetch('https://api.ipify.org?format=json');
      const data = await response.json();
      return data.ip;
    } catch (error) {
      console.error('Error fetching IP:', error);
      return null;
    }
  }

  // Function to fetch data from JSONBin
  async function fetchBinData() {
    const response = await fetch(BIN_URL, {
      headers: {
        'X-Master-Key': API_KEY
      }
    });
    const result = await response.json();
    return result.record;
  }

  // Function to update data in JSONBin
  async function updateBinData(data) {
    await fetch(BIN_URL, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json',
        'X-Master-Key': API_KEY
      },
      body: JSON.stringify(data)
    });
  }

  // Main logic
  const visitorIP = await getVisitorIP();
  if (!visitorIP) {
    eyeButton.classList.add('disabled');
    return;
  }

  const binData = await fetchBinData();
  viewCount.textContent = binData.totalClicks;

  if (binData.clickedIPs.includes(visitorIP)) {
    eyeButton.classList.add('disabled');
  }

  eyeButton.addEventListener('click', async () => {
    if (!eyeButton.classList.contains('disabled')) {
      binData.totalClicks += 1;
      binData.clickedIPs.push(visitorIP);

      await updateBinData(binData);

      viewCount.textContent = binData.totalClicks;
      eyeButton.classList.add('disabled');
    }
  });
});

Aufschlüsselung:

1. Besucher-IP abrufen: Ruft die IP-Adresse des Besuchers mit ipify ab.
2. Bin-Daten abrufen: Ruft die aktuelle Gesamtzahl der Klicks und die IP-Liste von JSONBin ab.
3. Bin-Daten aktualisieren: Aktualisiert die Klickanzahl und die IP-Liste in JSONBin.
4. Mehrfachklicks verhindern: Überprüft, ob der Besucher bereits geklickt hat und deaktiviert die Schaltfläche, wenn dies der Fall ist.

4. JSONBin einrichten

Wenn Sie JSONBin noch nie zuvor verwendet haben, machen Sie sich keine Sorgen! Befolgen Sie diese Schritte:

1. Gehen Sie zu JSONBin.io und registrieren Sie sich für ein kostenloses Konto.
2. Erstellen Sie eine neue Bin mit den folgenden Ausgangsdaten:

   {
     "totalClicks": 0,
     "clickedIPs": []
   }

1. Kopieren Sie nach dem Speichern der Bin die Bin-ID von der Bin-Detailseite.
2. Gehen Sie zu Ihren Kontoeinstellungen, um einen API-Schlüssel zu generieren.
3. Ersetzen Sie YOUR_BIN_ID und YOUR_API_KEY im JavaScript-Code durch Ihre tatsächliche Bin-ID und Ihren API-Schlüssel.

Das ist es! Sie haben einen unterhaltsamen und interaktiven Zuschauerzähler gebaut. Dies ist eine einfache Möglichkeit, Besucher anzusprechen und Ihrer Website einen Hauch von Persönlichkeit zu verleihen.

Schauen Sie sich gerne mein Portfolio an, um es in Aktion zu sehen.