Comment ajouter un compteur de visiteurs cliquable à votre site Web

Je pensais à quelque chose d'amusant et d'interactif à ajouter à mon portfolio et un compteur cliquable que les visiteurs pourraient utiliser pour laisser un petit message « J'étais là » me semblait être une excellente idée. C’est simple, attrayant et constitue un excellent moyen de rendre votre site Web un peu plus personnel. Si cela ressemble à quelque chose que vous aimeriez créer, ce guide vous guidera pas à pas.

Nous allons détailler étape par étape la création d’un compteur de vues entièrement fonctionnel. Vous n’avez pas besoin d’être un développeur expérimenté pour suivre. Allons-y !

1. Le HTML : construire la structure

Tout d’abord, nous allons mettre en place la structure du compteur de vues. Bien que vous puissiez utiliser n’importe quel style d’icône ou de bouton, j’utiliserai une icône en forme d’œil pour ce didacticiel. Voici le code HTML :

<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;
}

Ce CSS centre le compteur sur la page et ajoute quelques effets de survol pour le bouton.

3. Donner vie à Javascript

Maintenant, passons à l'événement principal, faire fonctionner le compteur.
Voici le JavaScript, décomposé en fonctions pour rester simple :

// 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');
    }
  });
});

Le décomposer :

1. Obtenir l'adresse IP du visiteur : récupère l'adresse IP du visiteur à l'aide d'ipify.
2. Récupérer les données du bac : récupère le nombre total actuel de clics et la liste d'adresses IP de JSONBin.
3. Mettre à jour les données du bac : met à jour le nombre de clics et la liste IP dans JSONBin.
4. Empêcher les clics multiples : vérifie si le visiteur a déjà cliqué et désactive le bouton si c'est le cas.

4. Configuration de JSONBin

Si vous n’avez jamais utilisé JSONBin auparavant, ne vous inquiétez pas ! Suivez ces étapes :

1. Allez sur JSONBin.io et créez un compte gratuit.
2. Créez un nouveau bac avec les données initiales suivantes :

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

1. Après avoir enregistré le bac, copiez l'ID du bac à partir de la page des détails du bac.
2. Accédez aux paramètres de votre compte pour générer une Clé API.
3. Remplacez YOUR_BIN_ID et YOUR_API_KEY dans le code JavaScript par votre ID Bin et votre clé API réels.

C'est ça ! Vous avez construit un compteur de vues amusant et interactif. C'est un moyen simple d'engager les visiteurs et d'ajouter une touche de personnalité à votre site.

N'hésitez pas à visiter mon portfolio pour le voir en action.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!