Afficher des icônes de partage sur les images du module Blog de Divi

Oct 27, 2024 | Trucs & Astuces, Divi | 0 commentaires

TRUCS & ASTUCES

5. Afficher des icônes de partage sur les images du module Blog de Divi

Introduction

Les icônes de partage permettent de rendre vos articles de blog plus accessibles en un clic, offrant ainsi à vos lecteurs une option rapide pour partager votre contenu sur leurs réseaux sociaux.

Dans ce tutoriel, découvrez comment intégrer ces icônes directement sur les images de couverture de vos articles, visibles au survol ou en permanence.

RÉSULTAT :

Comment ajouter un texte déroulant avec boutons Lire plus/Lire moins dans Divi

par lddigitalwork.com | 27 Déc 2024 | Blog, Divi, Trucs & Astuces, Wordpress

TRUCS & ASTUCES7. Texte à afficher/masquer dans DiviIntroductionPourquoi utiliser cette fonctionnalité ? Lorsque le texte d’une section devient...

Créer une pagination pour vos rangées de modules Divi

par lddigitalwork.com | 23 Déc 2024 | Divi, Trucs & Astuces

TRUCS & ASTUCES6. Créer une pagination pour afficher vos rangéesIntroductionSi vous souhaitez organiser et afficher plusieurs rangées de modules...

Comment créer un Mega Menu avec Divi

par lddigitalwork.com | 19 Déc 2024 | Trucs & Astuces, Divi, Wordpress

TRUCS & ASTUCES5. Créer un Méga Menu avec Divi(1ère partie)IntroductionDans le monde des sites web modernes, la navigation joue un rôle clé pour...

Table des Matières

Étape 1 : Attribuer une classe au module Blog de Divi
Étape 2 : Ajouter du CSS pour le style des icônes
Étape 3 : Ajouter le JavaScript pour créer les icônes de partage
Étape 4 : Personnalisation
Concluison

Quelles sont les étapes ?

Étape 1 : Attribuer une classe au module Blog de Divi

Avant d’ajouter les styles et scripts, appliquez la classe .divi_blog_with_sharing_icons au module Blog dans Divi: Avancé > ID et Classes CSS > Classe CSS > Ajouter la classe « divi_blog_with_sharing_icons » (sans le .).

Cette classe garantit que les icônes s’afficheront uniquement dans les modules de blog où cette classe est présente.

Étape 2 : Ajouter du CSS pour le style des icônes

Nous allons styliser les icônes pour qu’elles s’intègrent visuellement sur vos images de couverture. Ce code CSS place les icônes en haut à gauche de chaque image.

Dans votre tableau de bord WordPress, allez dans Divi > Options du Thème > CSS Personnalisé

Deuxième option: ajoutez un module Code sous le module Blog ou vous collerez le code CSS et JavaScript.

Ajoutez le code suivant dans le champ CSS personnalisé (ne pas oublier d’ajouter les balises <style> et </style> autour du code CSS):


.tab-container {
/* Styles pour le wrapper des icônes sociales - caché par défaut */
.et_pb_post .divi-social-share-icons-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transition: opacity 0.3s ease; /* Transition douce */
}

/* Afficher le wrapper des icônes au survol de l'image de couverture */
.et_pb_post:hover .divi-social-share-icons-wrapper {
    opacity: 1;
}

/* Style du texte "Partager sur:" */
.divi-social-share-text {
    font-size: 16px;
    color: #ffffff;
    font-weight: bold;
    margin-right: 10px;
}

/* Style des icônes de partage */
.et_pb_post .divi-social-share-icons-wrapper .divi-social-icon-link span::before {
    font-family: ETModules;
    font-size: 16px;
    color: white;
    padding: 4px 8px;
    border-radius: 5px;
    display: inline-block;
}

/* Icône Facebook */
.et_pb_post .divi-social-share-icons-wrapper .divi-social-icon-link .divi-icon-facebook::before {
    content: "";
    background-color: #3b5998;
}

/* Icône Instagram */
.et_pb_post .divi-social-share-icons-wrapper .divi-social-icon-link .divi-icon-instagram::before {
    content: "";
    background-color: #C13584;
}

/* Icône LinkedIn */
.et_pb_post .divi-social-share-icons-wrapper .divi-social-icon-link .divi-icon-linkedin::before {
    content: "";
    background-color: #007bb6;
}

/* Icône X (anciennement Twitter) */
.et_pb_post .divi-social-share-icons-wrapper .divi-social-icon-link .divi-icon-x::before {
    content: "";
    background-color: #111111;
}

/* Image de couverture du Blog */
.et_pb_post .entry-featured-image-url {
    position: relative;
}

Ce code stylise les icônes de Facebook, Instagram, LinkedIn et X (Twitter) pour qu’elles apparaissent en haut à gauche de l’image au survol.

Étape 3 : Ajouter le JavaScript pour créer les icônes de partage

Nous allons ajouter un script pour générer les icônes et les rendre fonctionnelles. Ce script permet d’ouvrir une fenêtre de partage personnalisée pour chaque réseau social.

Dans votre tableau de bord WordPress, allez dans Divi > Options du Thème > Intégration

Collez le code suivant dans la section Ajouter du code au head de votre blog ou dans le module Code que vous avez ajouté auparavant( colle le code JS à la suite du code CSS). Ne pas oubliez d’entourer ce code des balise <script et </script>):

  id="divi-insert-social-icons-for-blog-module-posts">
function addSocialIcons() {
  // Vérifier si le wrapper existe
  if (!document.querySelector('.divi_blog_with_sharing_icons')) {
    return;
  }

  // Fonction pour créer un lien de partage
  function createSocialLink(url, className, iconClass) {
    var a = document.createElement('a');
    a.href = url;
    a.rel = 'noopener noreferrer';
    a.className = className;

    // Ajout de l'icône
    a.innerHTML = '<span class="' + iconClass + '"></span>';

    a.addEventListener('click', function (event) {
      event.preventDefault();
      openPopupCenter(url, iconClass, 600, 400);
    });

    return a;
  }

  function openPopupCenter(url, title, w, h) {
    // Calculer la position pour centrer la popup
    var left = screen.width / 2 - w / 2;
    var top = screen.height / 2 - h / 2;

    // Ouvrir une nouvelle fenêtre centrée
    window.open(
      url,
      title,
      'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width=' +
      w +
      ', height=' +
      h +
      ', top=' +
      top +
      ', left=' +
      left,
    );
  }

  // Sélectionner tous les articles
  var posts = document.querySelectorAll('.divi_blog_with_sharing_icons .et_pb_post');

  // Parcourir chaque article
  posts.forEach(function (post) {
    // Éviter de rajouter des icônes si elles sont déjà présentes
    if (post.querySelector('.divi-social-share-icons-wrapper')) return;

    // Détails de l'article
    var title = post.querySelector('.entry-title').textContent;
    var postUrl = post.querySelector('.entry-title a').href;

    // Créer les URL de partage
    var facebookUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(postUrl);
    var instagramUrl = 'https://www.instagram.com/?url=' + encodeURIComponent(postUrl); // URL fictive, pas de partage natif pour Instagram
    var linkedInUrl = 'https://www.linkedin.com/sharing/share-offsite/?url=' + encodeURIComponent(postUrl);
    var xUrl = 'https://twitter.com/share?url=' + encodeURIComponent(postUrl) + '&text=' + encodeURIComponent(title); // URL de partage pour X (Twitter)

    // Créer les icônes de partage
    var socialContainer = document.createElement('div');
    socialContainer.className = 'divi-social-share-icons-wrapper';

    // Ajouter le texte "Partager sur:" avant les icônes
    var shareText = document.createElement('div');
    shareText.className = 'divi-social-share-text';
    shareText.innerHTML = 'Partager sur:';
    socialContainer.appendChild(shareText);

    // Ajouter les icônes de partage
    socialContainer.appendChild(
      createSocialLink(
        facebookUrl,
        'divi-social-icon-link',
        'divi-icon-facebook',
      ),
    );
    socialContainer.appendChild(
      createSocialLink(
        instagramUrl,
        'divi-social-icon-link',
        'divi-icon-instagram',
      ),
    );
    socialContainer.appendChild(
      createSocialLink(
        linkedInUrl,
        'divi-social-icon-link',
        'divi-icon-linkedin',
      ),
    );
    socialContainer.appendChild(
      createSocialLink(
        xUrl,
        'divi-social-icon-link',
        'divi-icon-x', // Icône X (ancien Twitter)
      ),
    );

    // Insérer les icônes après l'image de couverture
    var imageContainer = post.querySelector('.entry-featured-image-url');
    if (imageContainer) {
      imageContainer.appendChild(socialContainer);
    }
  });
}

// Exécuter lors du chargement initial
document.addEventListener('DOMContentLoaded', addSocialIcons);

// Exécuter après les requêtes AJAX
(function ($) {
  $(document).ajaxComplete(function () {
    addSocialIcons();
  });
})(jQuery)

Ce script crée les liens de partage pour chaque article du module Blog et ajoute un comportement d’ouverture de fenêtre pop-up lorsqu’un utilisateur clique sur une icône.

Personnalisation: Icônes visibles en permanence

Si vous préférez que les icônes de partage soient visibles en permanence (au lieu de s’afficher uniquement au survol), il vous suffit de modifier une seule ligne dans le CSS :

Dans le code CSS que vous avez ajouté à l’étape 1, recherchez cette ligne :

Copier le code

opacity: 0;

Remplacez-la par :

Copier le code

opacity: 1;

Conclusion

Avec ce tutoriel, vous avez maintenant les outils pour afficher des icônes de partage sur les images de couverture de votre module Blog dans Divi. Vous pouvez les personnaliser pour qu’elles apparaissent uniquement au survol ou en permanence. Profitez de cette solution pour encourager le partage de vos articles et augmenter leur visibilité sur les réseaux sociaux !

Prêt à démarrer votre projet ou besoin d’aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

DEVIS Gratuit

NOUS CONTACTER

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Restez informé des dernières nouveautés et offres exclusives en vous abonnant à notre newsletter

0 commentaires

Soumettre un commentaire Annuler la réponse

← Créer des onglets de catégories d'articles avec Divi, HTML, CSS et JavaScript LiteSpeed Cache : le Guide Complet →

FB

TW

In

Afficher des icônes de partage sur les images du module Blog de Divi

TRUCS & ASTUCES

5. Afficher des icônes de partage sur les images du module Blog de Divi

Introduction

RÉSULTAT :

Comment ajouter un texte déroulant avec boutons Lire plus/Lire moins dans Divi

Créer une pagination pour vos rangées de modules Divi

Comment créer un Mega Menu avec Divi

Table des Matières

Quelles sont les étapes ?

Étape 1 : Attribuer une classe au module Blog de Divi

Étape 2 : Ajouter du CSS pour le style des icônes

Étape 3 : Ajouter le JavaScript pour créer les icônes de partage

Personnalisation: Icônes visibles en permanence

Conclusion

Prêt à démarrer votre projet ou besoin d’aide pour optimiser votre site internet ? Contactez-nous dès aujourd’hui pour obtenir un devis gratuit !

Articles similaires

Comment ajouter un texte déroulant avec boutons Lire plus/Lire moins dans Divi

Créer une pagination pour vos rangées de modules Divi

Comment créer un Mega Menu avec Divi

Restez connectés avec nos dernières News et Mises à jour

Joindre notre Newsletter

Merci de vous être abonné!

Suivez-Nous

0 commentaires

Soumettre un commentaire Annuler la réponse

Message de succès

Inscrivez-vous à notre Newsletter

You have Successfully Subscribed!