Épisode - Item 2 de l’épisode 4
Cet épisode 4.2 concernant l’implémentation d’un bouton J’aime de Facebook, fait partie de l’épisode 4 de la série PrestaShop. Mais afin de ne pas avoir un épisode/tutoriel de plusieurs heures, je l’ai donc partitionné. Voici les différentes parties de l’épisode 4 :
- Épisode 4.1 : Intégration de Google Tag Manager dans PrestaShop et configuration avec Analytics.
- Épisode 4.2 : Intégration d’un bouton J’aime de Facebook sur la boutique PrestaShop.
- Épisode 4.3 : Intégration d’une vidéo YouTube sur la boutique PrestaShop.
- Épisode 4.4 : Intégration du gestionnaire de cookies selon RGPD sur la boutique PrestaShop et paramétrages des services.
- Épisode 4.5 : Réglages et personnalisation du gestionnaire de cookies.
Préambule
Dans ce nouvel épisode de la série PrestaShop, nous verrons comment mettre en place un bouton “J’aime” de Facebook. Pour ce tutoriel, j’utiliserai le code du bouton sans lien avec mon compte entreprise Facebook, ou plutôt maintenant mon compte Meta.
Sachez que si vous utilisez Facebook Ads pour vos publicités, il vaudra mieux alors lier ce bouton avec votre application Facebook. J’en parlerai brièvement lors de la récupération du code.
Concernant le module Facebook, depuis novembre 2023, Facebook demande un abonnement pour utiliser celui-ci et obtenir ainsi les données analytiques pour vos campagnes publicitaires.
Alors prêt à mettre ce bouton “J’aime” sur votre boutique PrestaShop. On y va.
Suivez moi ! Encouragez moi !
Produire du contenu comme ce tutoriel me prend pas mal de temps. Pensez à la rédaction du tutoriel pas à pas, le tutoriel vidéo, la préparation, les tests, les captures d’images, l’enregistrement, le montage, le code, et vous comprendrez rapidement que cela est chronophage.
Si cette série ou cet épisode vous sont plaisants et vous intéresses, merci de prendre quelques secondes ou minutes pour me suivre et m’aider dans mon référencement :
- S’abonner à ma chaîne YouTube.
- S’abonner à ma page Facebook.
- S’abonner à ma page Instagram.
- S’inscrire sur le site.
Merci sincèrement de me soutenir et m’encourager !!
Le choix du roi
Comme toujours sur le blog Activateur Web, vous le savez, vous avez le choix entre suivre ce tutoriel par le biais du tutoriel vidéo, ou vous pouvez également suivre ce tutoriel à lire où je vous guide pas à pas dans la mise en place des différentes étapes.
A vous de voir, mais vous êtes libres de faire les 2 à la fois, bien entendu.
Bon visionnage ou bonne lecture.
Tutoriel Vidéo : PrestaShop : Bouton J'aime Facebook sur la boutique
Tutoriel à lire et à suivre pas à pas
Cliquez sur la double flèche de la table des matières pour ouvrir ou fermer celle-ci.
Table des matières - Sommaire
Prérequis
Boutique sur environnement local
Comme toujours, je développerai sur ma boutique située sur mon serveur local, et depuis mon thème enfant. Je pourrai ainsi faire mes tests sans devoir mettre ma boutique réelle en ligne en mode maintenance. Lorsque mes tests seront faits et validés, je pourrai alors pousser le code sur ma boutique en ligne située sur mon serveur distant.
Bien entendu, vous pouvez choisir de modifier directement votre boutique de production (en ligne), sans passer par le développement en local, mais c’est un risque que personnellement, je ne préfère pas prendre.
Pour la configuration de la boutique PrestaShop, je vous invite à lire l’article consacré aux réglages de la boutique, intitulé “mode Développement VS mode Production”. Vous pouvez aussi télécharger le guide des différents réglages que j’ai créé pour l’occasion.
Éditeur de code
Nous aurons besoin d’un éditeur de code. Pour ma part, j’utilise VSCode, mais libre à vous d’utiliser votre éditeur préféré. Si vous n’avez pas encore d’éditeur de code, vous pouvez installer Visual Studio Code (gratuit) en suivant l’article de blog que j’ai rédigé.
Bouton J’aime Facebook : choix de l'emplacement.
Pour la mise en place du bouton “J’aime”, nous devons en premier lieu, choisir où nous allons mettre cet élément.
Si vous avez suivi cette série, vous avez vu dans l’épisode “Modifier un thème depuis le thème enfant”, que nous avons mis en place un compte à rebours pour la période des promotions. Je vais donc décider de mettre mon bouton “J’aime” sous cet élément.
À vous de voir, où vous souhaitez positionner le bouton. La démarche sera exactement la même. Il faut juste s’assurer d’être sur le bon template, et de voir ensuite dans quelle balise “block”, vous devrez insérer le code du bouton.
Récupération du code du bouton J’aime.
Pour récupérer le code à intégrer de ce bouton “J’aime”, nous pouvons faire une recherche depuis le navigateur. Nous pouvons ensuite accéder à la page des plugins sociaux pour les développeurs Meta. Comme nous sommes francophones, nous allons sur la version traduite en français. Dans la liste des plugins, le bouton rechercher s’y trouve ! Ça tombe bien ! Vous devriez donc être sur la page : Bouton J’aime pour le Web. Sinon, cliquez sur ce lien.
Bouton J'aime : Configuration
Vous le voyez, sur cette page, Meta nous donne la possibilité de personnaliser ce bouton.
Nous pouvons définir les paramètres suivants :
- URL vers J’aime : l’URL de votre site ou de votre page.
- Width : largeur du plugin en pixels.
- Disposition : 4 choix possibles : standard, box_count, button_count, button.
- Type d’action : 2 choix possibles : like ou recommend.
- Taille du bouton : 2 choix possibles : small ou large.
- Ajouter un bouton Partager : case à cocher pour l’ajouter
À vous de faire votre choix. Vous pouvez tester différentes configurations.
Sans connexion à Facebook.
Pour le moment, sur cette page “Meta for Developers”, je ne suis pas connecté avec mon compte Facebook. Je vais laisser comme cela, et vous montrerai la différence lorsque nous possédons un compte Facebook entreprise.
Mais pour l’instant, je fais comme si je n’avais pas de compte Facebook.
Après avoir choisi ma configuration du plugin, je clique sur le bouton “Obtenir le code”.
Bouton J’aime : Code du plugin
Après le clic sur le bouton “Obtenir le code”, une fenêtre modale s’ouvre.
On nous indique que l’intégration du plugin comporte 2 étapes :
- Étape 1 : inclure le SDK JavaScript, idéalement après l’ouverture de la balise “body” de notre page.
- Étape 2 : placer le code du plugin à l’endroit où nous voulons l’afficher sur notre page.
Bouton J’aime : Intégration du code du plugin dans le code de la boutique PrestaShop
Étape 1 : Inclure le code SDK JavaScript
La première chose à faire, vous vous en doutez, est d’ouvrir le dossier contenant notre boutique PrestaShop dans notre éditeur de code.
Comme toujours, je ne touche pas aux fichiers du thème parent, mais je vais ajouter ce code aux fichiers du thème enfant (qui étendent les fichiers du thème parent, pour rappel).
Comme je veux placer mon bouton sur la page d’accueil, je dois donc intégrer le code du SDK, après l’ouverture de ma balise body. Si vous avez suivi la série, vous savez que nous avons déjà utilisé le template et cette balise block pour intégrer Google Tag Manager.
Le template utilisé pour la mise en page de la page d’accueil est le template nommé “layout-both-columns.tpl”. Comme ce fichier de template est déjà créé dans mon thème enfant, j’ouvre donc ce fichier.
Et comme nous avions déjà utilisé le bloc nommé “hook_after_body_opening_tag”, nous pouvons donc coller le code du SDK à la suite de notre code Google Tag Manager.
Je copie donc le code qui nous est donné dans la fenêtre modale, à l’étape 1.
À noter : Si vous n'avez pas suivi la série
Si vous n’avez pas suivi la série, et que vous utilisez un thème enfant, vous devez recréer la même structure de dossiers et de fichiers dans le thème enfant que celle de votre thème parent (thème classic par défaut). Ensuite, vous étendez le thème parent depuis votre thème enfant en ajoutant ce code en première ligne de votre fichier :
{extends file='parent:layouts/layout-both-columns.tpl'}
Jamais de code en dehors d'une balise block
Tout le code doit être placé dans une balise block. Et si nous regardons dans le template “layout-both-columns.tpl” du thème parent, on peut y voir une balise block nommé “hook_after_body_opening_tag”. Que l’on pourrait traduire en français, crochet après ouverture de la balise body.
C’est donc de cette balise que nous aurons besoin pour mettre le code du SDK JavaScript.
Nous pouvons donc copier ce bloc depuis le fichier du thème parent et le coller dans le fichier du thème enfant. Ensuite nous déposons le code du SDK JavaScript de Facebook à l’intérieur.
Sans thème enfant ?
Si vous n’utilisez pas de thème enfant, bien entendu, il vous suffit alors de mettre le code du SDK dans ce bloc “hook_after_body_opening_tag” situé dans le layout-both-columns.tpl du thème parent.
Mais je ne le dirai jamais assez : les modifications faites directement dans le thème parent seront supprimées lorsque vous ferez une mise à jour de votre boutique ! Ce qui ne sera pas le cas, si vous utilisez un thème enfant.
Étape 2 : Placer le code où nous voulons l’afficher
La deuxième étape consiste à placer le code du plugin à l’endroit où nous souhaitons l’afficher.
Pour ma part, j’ai dit que je voulais le mettre sous mon compte à rebours de promotion.
Ce compte à rebours se trouvant sur la page d’accueil, c’est donc toujours dans le fichier “layout-both-columns” que je vais trouver la balise block qui contient son code.
Je copie donc le code qui nous est donné dans la fenêtre modale, à l’étape 2.
Je vais ensuite coller ce code sous mon compte à rebours.
Si vous vous rappelez, lorsque nous avons codé notre compte à rebours, nous avons créé un bloc nommé “counter”. Je vais donc me servir de ce bloc, et mettre le code du plugin à la suite du code du compte à rebours.
Si vous souhaitez mettre ce code ailleurs, assurez vous simplement de la mettre dans une balise block. Cette balise block doit être existante dans votre thème parent. Sinon vous pouvez également en créer une, et l’étendre ensuite depuis votre thème enfant.
Bouton J'aime Facebook : Affichage.
Les 2 étapes pour intégrer notre bouton J’aime de Facebook sont maintenant réalisées.
Parfait, il nous reste plus qu’à tester l’intégration du code en nous rendant sur la page d’accueil de la boutique PrestaShop.
Il nous reste à actualiser notre page d’accueil afin de tester si notre intégration fonctionne.
Parfait ! Nous venons de voir dans ce tutoriel comment intégrer un bouton “J’aime” Facebook sur votre boutique PrestaShop.
Avec connexion à Facebook.
Je vous ai dit un peu plus tôt que je reviendrai sur ce point.
Si vous possédez un compte Facebook Entreprise, et que vous créez des campagnes publicitaires avec Facebook Ads, vous pourrez retrouver toutes les données analytiques liées à ce bouton sur votre compte Meta.
Pour cela, vous devrez tout d’abord créer une application en lien avec votre identifiant de pixel Facebook. Vous aurez également mis en place votre pixel Facebook sur votre boutique en ligne. Je vous conseille pour cela d’utiliser le gestionnaire de balises que nous avons mis en place, dans l’épisode précédent, le célèbre Google Tag Manager.
Je publierai bientôt des articles sur ces sujets, mais le but de ce tutoriel n’est pas là.
Sachez donc que si vous avez lié correctement votre pixel à votre boutique PrestaShop et que vous créez une application, vous aurez une vue un peu différente lors de la configuration de votre plugin de Bouton J’aime.
Aperçu du plugin de bouton J'aime
Tout d’abord, en étant connecté, vous verrez un aperçu du plugin qui sera affiché.
Il faudra peut être pour cela décocher, puis cocher de nouveau la case à cocher “Ajouter un bouton Partager”.
Pour être totalement honnête, je ne suis pas certain que cet aperçu fonctionne correctement, car malgré plusieurs paramétrages différents, je n’ai vu aucun changement de cet aperçu !
Liaison avec le pixel Facebook
Ensuite dans la fenêtre modale qui s’ouvrira lorsque vous aurez cliqué sur le bouton “Obtenir le code”, il vous sera demandé de choisir l’ ID de l’application qui sera lié à votre plugin, ainsi que la langue utilisée.
Analytiques en dehors de la connexion Facebook.
Vous pouvez suivre les données analytiques de ce bouton J’aime en dehors de la connexion à Facebook.
Pour cela, il vous suffit de créer et de configurer une balise depuis votre espace de travail Google Tag Manager. Vous reproduirez ce que nous avons fait pour la configuration de chaque clic sur le bouton d’inscription à la newsletter de la boutique. Cette fois, vous ciblez ce bouton J’aime, mais la configuration sera globalement la même que ce que nous avons déjà fait. Je ne reviens donc pas dessus, car je suis sûr que vous maîtrisez cela maintenant.
Et rien de mieux que la pratique pour se rappeler et devenir expert.
C’est d’ailleurs en étant bûcheron que Léonard devint scie !! Léonard De Vinci… Ok, je sors…
Conséquences de l’intégration du bouton J’aime
Nous avons mis notre bouton en place et cela fonctionne ! Mais vous vous en doutez peut-être, il y a des conséquences à cela. Pour pouvoir recueillir des données analytiques, il faut bien les stocker quelque part.
Si nous allions inspecter maintenant notre site, avec nos outils de navigateur ?
J’utilise Google Chrome, mais les outils de navigateur sont présents sur tous (Firefox, Edge, etc.). Ce qui diffère est le nom donné à ces outils (onglets) parfois.
Pour ouvrir ces outils, je vous le rappelle, 2 choix possibles :
En ayant ouvert la page à inspecter dans le navigateur :
- Taper sur la touche F12 du clavier.
- Faites un clic droit, puis sélectionnez “Inspecter”.
Cookies, cookies, cookies...
Allons ensuite dans l’onglet Appli, et dans la liste se situant à gauche, dans le panneau Stockage, ouvrez la liste des cookies.
Vous le voyez, nous avons maintenant le service Facebook, et en cliquant dessus, on peut voir que ce service délivre pas moins de 10 cookies !!
Voici la conséquence de notre acte !! Il va bien falloir assumer !
Et c’est exactement pourquoi ce tutoriel est inscrit dans un item de l’épisode 4.
À la fin de cet épisode 4, nous verrons comment mettre en place un gestionnaire de cookies selon les règles du RGPD.
Transparence avec nos utilisateurs et clients
Nous ne pouvons pas délivrer des cookies à nos utilisateurs et clients sans leur demander leur consentement. Il vous faudra alors avertir vos utilisateurs et leur donner la possibilité de faire un choix.
Mais cela fera partie d’un épisode et tutoriel à part entière… Continuez à me suivre et nous ferons cela ensemble.
Conclusion
En ce qui concerne ce tutoriel, il est maintenant terminé.
J’espère qu’il aura pu vous être utile et également qu’il aura pu vous faire prendre en compte du fait qu’il ne suffit pas de mettre en place des choses sur notre site, mais que nous devons également penser aux conséquences. Parfois, on peut se dire que mettre un bouton en place pour un développeur est facile. Et c’est le cas, nous l’avons vu. Mais le travail ne s’arrête pas là pour faire les choses proprement et pour respecter les données de nos utilisateurs.
Il faut aller plus loin.
Suivez moi, laissez vos commentaires, contactez moi
C’est pourquoi je vous propose de continuer à me suivre, et nous irons plus loin ensemble.
N’hésitez pas à faire appel à mes services, si besoin !
Je développe des sites web sur mesure, des boutiques PrestaShop, implémente pour vous les suivis analytiques et établit avec vous une stratégie marketing pour votre entreprise. Je développe et mets en place également des modules afin de personnaliser vos boutiques en ligne.
Suivez moins sur les réseaux et laissez vos commentaires pour m’encourager à continuer de produire du contenu comme celui-ci.
Je vous remercie d’avoir suivi ce tutoriel.
À bientôt sur Activateur Web, et en attendant prenez soin de vous, et surtout restez curieux !
