Module AddToAny : Comment ajouter des boutons de partage de médias sociaux à Drupal

De nos jours, nous avons les réseaux sociaux partout, donc avoir la capacité de partager du contenu sur votre site web est essentiel.

Par défaut, Drupal ne fournit pas de boutons de partage de réseaux sociaux de base. Cependant, lors de la fourniture de services Drupal, nous utilisons des modules qui peuvent aider à cela. La solution la plus populaire est le module AddToAny.

Le module AddToAny propose un grand nombre de boutons de partage, y compris le bouton universel (‘+’), Facebook, Twitter, Pinterest, Reddit et bien d'autres.

Et la liste des fonctionnalités populaires d'AddToAny est également impressionnante :

• Barres de partage flottantes pour mobile, bureau et diverses mises en page du site; 
• Boutons de partage d'images pour partager vos images; 
• Comptages de partages et récupération de comptages de partages;
• Intégration Google Analytics; 
• Icônes de partage vectorielles conçues pour les écrans mobiles, Retina et haute résolution PPI; 
• Bouton de partage universel et menu intelligent; 
• Personnalisation pour le visiteur; 
• Support international (i18n/localisation); 
• Accessibilité et dégradation élégante; 
• Compatibilité multi-navigateurs et rétrocompatibilité; 
• Performance optimisée et chargement efficace via des CDN de classe mondiale; 
• Contrôle complet pour les éditeurs & développeurs de toutes tailles

Dates

La première version du module a été publiée le 15 avril 2008, la dernière mise à jour - le 15 mai 2020.

Le module peut être installé sur :

• Drupal 7 (version stable 7.x-4.16); 
• Drupal 8 (version stable 8.x-1.14);
• Depuis la version 8.x-1.13+, il prend également en charge Drupal 9.

Toutes les versions stables de ce projet sont couvertes par la politique de conseil en sécurité.

Popularité du module

Selon les données statistiques de la page du module, il est actuellement utilisé par environ 47 000 sites web.

Créateurs du module

Le module est créé et maintenu par une seule personne - micropat (voir son profil).

À quoi sert le module ?

C'est un module hautement personnalisable, permettant de partager du contenu probablement sur n'importe quel réseau social. Il dispose d'une documentation très conviviale et excellente avec de nombreux exemples.

Ouverture

Pour installer AddToAny, allez sur la page web ou faites-le via composer :

composer require drupal/addtoany

Configurer le placement

Par défaut, les boutons de partage sont désactivés et placés dans la section Gérer l'affichage de chaque type de contenu, par exemple Structure > Types de contenu > Article de blog > Gérer l'affichage. Assurez-vous qu'il est activé avant de continuer.

Configurer AddToAny

Pour configurer les options d'AddToAny, allez dans Administration > Configuration > Services Web > AddToAny.

Passons brièvement en revue chaque section.

Section des boutons

AddToAny utilise des icônes de partage SVG qui peuvent être redimensionnées à n'importe quelle taille, la valeur par défaut est de 32x32 pixels. Vous pouvez personnaliser les boutons de partage en éditant la boîte de "Code HTML des Boutons de Service". Plus de détails peuvent être trouvés dans la documentation officielle, où vous trouverez des exemples de fonctionnalités additionnelles, telles que :

• Gestion et modification des événements de partage; 
• Modèles & paramètres des endpoints; 
• Suivi des liens & réducteurs d'URL; 
• Boutons de couleur personnalisée; 
• Boutons de partage d'images; 
• Compteurs de partage; 
• Récupération des comptages de partage; 
• etc. 

Voici quelques exemples.

Boutons de like :

<a class="a2a_button_facebook_like"></a>
<a class="a2a_button_twitter_tweet"></a>
<a class="a2a_button_pinterest_pin"></a>

Boutons de comptage de partage :

<a class="a2a_button_facebook a2a_counter"></a>
<a class="a2a_button_pinterest a2a_counter"></a>
<a class="a2a_button_tumblr a2a_counter"></a>
<a class="a2a_button_reddit a2a_counter"></a>

Sous la section de bouton universel, vous pouvez également personnaliser le bouton + ou même le supprimer :

Section des options supplémentaires

Ici, vous pouvez ajouter du code JS ou CSS personnalisé pour AddToAny sans avoir besoin de le faire par programmation.

En guise d'option, vous pouvez par exemple définir une couleur personnalisée pour parfaitement correspondre au schéma de couleurs de n'importe quel design. Ajoutez simplement le code JS suivant à votre boîte "JavaScript supplémentaire" sur la page de configuration.

 a2a_config.icon_color = "#0166ff"; 

Section des entités

Dans cette section, vous pouvez activer ou désactiver les entités de contenu avec lesquelles AddToAny sera disponible pour interagir.

Une fois le module AddToAny Share Buttons installé et activé, quelques boutons de partage apparaîtront sur votre page. Voyons comment ils se présentent.

Par défaut, nous avons une icône “+” (appelée le “Bouton Universel”), suivie d'un bouton de partage Facebook, ainsi que Twitter et email. En cliquant sur le “Bouton Universel”, vous verrez tous les boutons de partage disponibles pour d'autres services.

Et voici un exemple de popup de partage Twitter. Lorsqu'un visiteur clique sur l'un des boutons, un post pré-rempli s'affiche.

Plongeons-nous dans la documentation et voyons si nous pouvons ajuster le modèle.

Voilà, vous pouvez changer le message par défaut en ajoutant le code JavaScript suivant :

var a2a_config = a2a_config || {};
a2a_config.templates = a2a_config.templates || {};
a2a_config.templates.twitter = {
    text: "Lire : ${title} ${link} par moi",
    hashtags: "partage,social"
};

Hooks & modèles

Si vous pensez que les paramètres standard ne sont pas suffisants, vous pouvez essayer d'étendre le modèle addtoany-standard.html.twig.

L'implémentation par défaut du thème pour les boutons standards d'AddToAny inclut les variables suivantes :

• addtoany_html : HTML pour les boutons AddToAny;
• button_image : URL pour le bouton universel;
• button_setting : Paramètre du bouton;
• button_size : Taille des boutons;
• universal_button_placement : Valeur de 'avant' ou 'après' pour placer le bouton;
• link_url : Valeur de l'URL à partager;
• link_title : Valeur du titre de la page à partager.

Il existe également un hook qui vous permet de modifier par programmation les types d'entités pour lesquels le pseudo-champ AddToAny est disponible :

/**
 * @param array $types
 *   Les types d'entité.
 */
function hook_addtoany_entity_types_alter(&$types) {
  // Ajoutez le type d'entité "taxonomy_term".
  $types[] = 'taxonomy_term';
}

Solutions alternatives

Il existe quelques autres options que vous pourriez vouloir explorer. Voici la liste :

• Better Social Sharing Buttons (Drupal 8 & 9); 

Dispose de moins d'options de paramètres et de services. Selon la description, ce module offre la solution la plus propre sans effectuer de nombreux appels externes, avoir des scripts de suivi ou même se connecter à des serveurs publicitaires.

• Sharethis (version bêta pour Drupal 8);
• Service links (uniquement version pour Drupal 7);
• Addthis (uniquement version alpha pour Drupal 7). 

Résumé

Vous avez maintenant toutes les informations nécessaires pour ajouter des liens sociaux à votre site Drupal en utilisant l'exemple du module AddToAny. Toutefois, si vous souhaitez en savoir plus sur la manière d'utiliser plus efficacement ce module pour votre site web, veuillez contacter nos consultants Drupal. Une fois que vous avez installé ce module, vous obtiendrez une plateforme très personnalisable avec de nombreuses fonctionnalités fines, qui facilitent le partage de votre contenu.