Guide 2026 : Intégrer un Résumeur d'Article par IA (Gemini API) sur Blogger en Vanilla JS

 

Bonjour à tous, c'est Lucas Martin. Bienvenue dans la section IA et Automatisation de Cash Astuce ! En 2026, l'Intelligence Artificielle n'est plus réservée aux géants de la Tech. Elle s'invite directement sur nos blogs pour offrir une expérience utilisateur inédite et ultra-moderne.

Vos lecteurs n'ont pas toujours 10 minutes pour lire un guide complet de 2000 mots. Et si vous leur offriez la possibilité d'obtenir un résumé exécutif en 3 points clés généré instantanément par l'IA de Google (Gemini API), directement en haut de votre article ?

Dans ce tutoriel pratique, nous allons coder un widget interactif en Vanilla JS pur qui se connecte à l'API Google Gemini pour analyser le contenu de votre page et générer une synthèse automatique pour vos visiteurs.

Pourquoi intégrer un résumeur IA sur votre blog ?

L'intégration de l'IA directement dans l'interface de votre site apporte des avantages stratégiques majeurs :

• Rétention d'audience (Dwell Time) : Les visiteurs pressés lisent le résumé puis parcourent le reste de l'article au lieu de quitter immédiatement la page.
• Image de marque innovante : Positionne votre blog comme un média d'avant-garde adoptant les technologies IA de 2026.
• Performance maximale : Le script s'exécute côté client en Vanilla JS sans ralentir le chargement initial de la page.

Tutoriel : Créer le Widget Gemini IA sur Blogger

Rappel de sécurité : Effectuez toujours une sauvegarde de votre thème (Thème > Sauvegarder) avant d'insérer de nouveaux scripts XML.

Étape 1 : Le Design du Widget IA (Code CSS)

Allez dans Thème > Modifier le code HTML. Insérez le CSS suivant dans votre zone de styles (sous <b:skin><![CDATA[). Ce design inclut un effet d'animation néon et prend en compte le Dark Mode :

/* Widget Résumé IA Gemini - Cash Astuce */
#ca-ai-box {
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f0fa 100%);
  border: 1px solid #b2d5f8;
  border-radius: 8px;
  padding: 18px 20px;
  margin: 20px 0;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.ca-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ca-ai-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #0056b3;
  font-size: 16px;
}
.ca-ai-title svg { width: 20px; height: 20px; fill: #0056b3; }
.ca-ai-btn {
  background-color: #0056b3;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ca-ai-btn:hover { background-color: #004494; }
#ca-ai-result {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
}
.ca-ai-loading { font-style: italic; color: #666; }

/* Dark Mode */
[data-theme="dark"] #ca-ai-box {
  background: linear-gradient(135deg, #1e2631 0%, #171e27 100%);
  border-color: #2b3a4e;
}
[data-theme="dark"] .ca-ai-title { color: #4da3ff; }
[data-theme="dark"] .ca-ai-title svg { fill: #4da3ff; }
[data-theme="dark"] .ca-ai-btn { background-color: #4da3ff; color: #121212; }
[data-theme="dark"] #ca-ai-result { color: #ddd; }

Étape 2 : Le Script d'Appel API (Vanilla JS)

Descendez tout en bas de votre fichier XML, juste au-dessus de la balise </body>, puis ajoutez ce script. N'oubliez pas d'insérer votre clé API Google Gemini gratuite obtenue sur Google AI Studio :

<!-- Script Résumeur IA Gemini par Cash Astuce -->
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
  const postBody = document.querySelector('.post-body');
  if (!postBody) return;

  // Création du bloc UI
  const aiBox = document.createElement('div');
  aiBox.id = 'ca-ai-box';
  aiBox.innerHTML = `
    

      

        
        Résumé Express par IA
      
      
    
    
Cliquez sur le bouton pour générer une synthèse automatique.
  `;

  // Insertion en haut du corps de l'article
  postBody.insertBefore(aiBox, postBody.firstChild);

  const triggerBtn = document.getElementById('ca-ai-trigger');
  const resultDiv = document.getElementById('ca-ai-result');

  triggerBtn.addEventListener('click', async function() {
    const apiKey = 'VOTRE_CLE_API_GEMINI_ICI'; // Remplacez par votre clé Google AI Studio
    if (apiKey === 'VOTRE_CLE_API_GEMINI_ICI') {
      resultDiv.innerHTML = 'Veuillez configurer votre clé API Gemini.';
      return;
    }

    resultDiv.innerHTML = 'L\'IA analyse l\'article en direct...';
    triggerBtn.disabled = true;

    // Extraction du texte de l'article (max 3000 caractères pour rapidité)
    const textContent = postBody.innerText.substring(0, 3000);
    const prompt = "Fais un résumé ultra-clair en 3 puces (bullet points) en français de ce texte : " + textContent;

    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${apiKey}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON-JSON.stringify({
          contents: [{ parts: [{ text: prompt }] }]
        })
      });

      const data = await response.json();
      const aiText = data.candidates[0].content.parts[0].text;
      resultDiv.innerHTML = aiText.replace(/\n/g, '
');
    } catch (error) {
      resultDiv.innerHTML = 'Une erreur est survenue lors de la génération du résumé.';
      console.error(error);
    } finally {
      triggerBtn.disabled = false;
    }
  });
});
//]]>
</script>
</b:if>

Conclusion et Propectives de l'IA pour le SEO

L'intégration de l'API Google Gemini directement dans vos articles marque le début d'une nouvelle ère pour votre blog. Vous offrez à vos visiteurs un outil de lecture rapide moderne tout en conservant une vitesse de chargement irréprochable.

N'oubliez pas que cette innovation côté utilisateur vient compléter notre travail d'optimisation en arrière-plan. Dans notre précédent tutoriel, nous avons vu comment implémenter les Données Structurées (JSON-LD) pour communiquer efficacement avec les robots de Google. Aujourd'hui, vous utilisez le même moteur d'IA pour ravir vos lecteurs humains.

Avez-vous testé ce résumeur IA sur vos articles ? Dites-moi ce que vous en pensez dans les commentaires !