Guide 2026 : Ajouter des "Articles Similaires" sur Blogger avec JSON et Vanilla JS (sans plugin)

 

Bonjour à tous, c'est Lucas Martin. Aujourd'hui, pour célébrer une nouvelle étape dans le développement de Cash Astuce, nous allons aborder l'arme absolue pour augmenter le nombre de pages vues par visiteur : la section "Articles Similaires" (Related Posts).

La majorité des blogueurs utilisent des widgets externes pour afficher des recommandations de lecture. Grave erreur en 2026 ! Ces plugins externes injectent des trackers, ralentissent considérablement votre score Google PageSpeed et ruinent l'expérience utilisateur. La solution d'ingénierie ? Utiliser l'API JSON native de Blogger couplée à du Vanilla JavaScript pur.

Dans ce tutoriel, nous allons créer une grille moderne et dynamique qui va chercher instantanément 3 articles de la même catégorie pour les proposer au lecteur à la fin de son parcours, le tout nativement compatible avec le Dark Mode.

Comment fonctionne notre API native Blogger ?

Nous n'avons besoin d'aucun serveur externe. Blogger possède une URL secrète (le flux JSON) qui permet d'interroger la base de données de votre blog. L'algorithme que nous allons coder va :

1. Récupérer la première catégorie (Libellé / Label) de l'article en cours via une expression XML Blogger.
2. Interroger l'API Blogger en arrière-plan via fetch() pour obtenir les articles de cette catégorie.
3. Filtrer les résultats pour exclure l'article actuellement lu.
4. Générer une magnifique grille HTML avec des images haute résolution.

Tutoriel : Intégration du code (HTML, CSS et JS)

Avertissement habituel : Effectuez une sauvegarde de votre thème (Thème > Sauvegarder) avant de manipuler le code XML.

Étape 1 : Le Design de la Grille (Code CSS)

Allez dans Thème > Modifier le code HTML. Localisez votre zone CSS (souvent sous <b:skin><![CDATA[) et ajoutez le style suivant :

/* Design des Articles Similaires - Cash Astuce */
.ca-related-wrapper {
  margin: 40px 0;
  padding-top: 25px;
  border-top: 2px solid #eaeaea;
}
.ca-related-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #222222;
}
.ca-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.ca-related-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ca-related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.ca-related-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-bottom: 3px solid #0056b3;
}
.ca-related-card h4 {
  padding: 15px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #333333;
}
.ca-loading-text { font-style: italic; color: #888; }

/* Compatibilité Dark Mode (Variables) */
[data-theme="dark"] .ca-related-wrapper { border-top-color: #333333; }
[data-theme="dark"] .ca-related-title { color: #e0e0e0; }
[data-theme="dark"] .ca-related-card { background: #1e1e1e; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
[data-theme="dark"] .ca-related-card h4 { color: #e0e0e0; }

Étape 2 : L'Architecture et le Script (XML + JS)

Nous allons placer cette section juste après le contenu de votre article. Cherchez la balise <data:post.body/> (la bonne, celle qui affiche le corps de l'article). Si vous avez déjà ajouté une Author Box, placez ce code juste en dessous du code de l'Author Box.

Collez ce bloc complet qui contient la structure HTML intelligente (avec l'attribut expr:data-label) et l'algorithme JavaScript fetch :

<!-- Articles Similaires JSON par Cash Astuce -->
<b:if cond='data:view.isPost'>
  <b:if cond='data:post.labels'>
    <div class='ca-related-wrapper'>
      <h3 class='ca-related-title'>À lire également :</h3>
      <!-- Récupération dynamique du premier libellé -->
      <div class='ca-related-grid' expr:data-label='data:post.labels.first.name' id='ca-related-posts'>
        <span class='ca-loading-text'>Recherche de pépites...</span>
      </div>
    </div>
    
    <script>
    //<![CDATA[
    document.addEventListener('DOMContentLoaded', () => {
      const container = document.getElementById('ca-related-posts');
      if (!container) return;
      
      const label = container.getAttribute('data-label');
      const currentUrl = window.location.href.split('?')[0]; // URL sans paramètres
      
      if (label) {
        const feedUrl = '/feeds/posts/summary/-/' + encodeURIComponent(label) + '?alt=json-in-script&max-results=4';
        
        // Utilisation de JSONP pour Blogger
        const script = document.createElement('script');
        script.src = feedUrl + '&callback=caProcessRelatedPosts';
        document.body.appendChild(script);
      }
    });

    function caProcessRelatedPosts(data) {
      const container = document.getElementById('ca-related-posts');
      const currentUrl = window.location.href.split('?')[0];
      const entries = data.feed.entry;
      
      if (!entries) {
        container.innerHTML = '
Aucun article trouvé.
';
        return;
      }
      
      let html = '';
      let count = 0;
      
      entries.forEach(entry => {
        let postUrl = '';
        entry.link.forEach(link => {
          if (link.rel === 'alternate') postUrl = link.href;
        });
        
        // Exclure l'article actuel et limiter à 3 résultats
        if (postUrl.split('?')[0] === currentUrl || count >= 3) return;
        
        const title = entry.title.$t;
        // Amélioration HD de la miniature Blogger par défaut (s72-c -> w400-h250-c)
        let imageUrl = 'https://www.cashastuce.site/favicon.ico'; 
        if (entry.media$thumbnail) {
          imageUrl = entry.media$thumbnail.url.replace('s72-c', 'w400-h250-c');
        }
        
        html += `
          
            
            
${title}
          
        `;
        count++;
      });
      
      container.innerHTML = html !== '' ? html : '
Aucun article similaire disponible.
';
    }
    //]]>
    </script>
  </b:if>
</b:if>

Conclusion et Maillage Interne

Félicitations ! Votre blog dispose désormais d'un système de recommandation ultra-rapide qui renforce massivement votre maillage interne (Internal Linking). C'est le secret des silos SEO qui dominent les SERPs de Google en 2026.

Pour maximiser l'efficacité de cette section, elle doit s'intégrer dans un écosystème de rétention. Le lecteur est d'abord rassuré par le Badge indiquant le Temps de Lecture en haut de l'article. Une fois sa lecture terminée, il découvre votre expertise grâce à l'Author Box professionnelle, et immédiatement en dessous, notre nouveau script lui propose 3 autres articles pertinents qu'il s'empressera de cliquer !

Avez-vous remarqué à quel point l'affichage est instantané ? Partagez vos retours dans les commentaires !