Comment ajouter une boîte J'aime / Boîte Fan Facebook dans WordPress

Vous avez travaillé dur pour développer votre audience Facebook, mais les visiteurs de votre site web ne se connectent pas à votre page. Frustrant, n'est-ce pas ?

Nous avons testé diverses méthodes pour intégrer Facebook à WordPress, et nous avons constaté qu'une simple boîte J'aime peut faire une réelle différence dans la croissance de votre audience sociale.

Une boîte J'aime Facebook bien placée comble le fossé entre votre site web et les réseaux sociaux, permettant aux visiteurs d'interagir avec votre page Facebook sans quitter votre site. C'est l'une de ces petites additions qui peuvent avoir un grand impact sur votre preuve sociale.

Dans ce guide, nous vous montrerons deux méthodes simples pour ajouter une boîte J'aime Facebook à votre site WordPress : une approche avec un plugin de boîte J'aime Facebook et une solution de code.

Pourquoi ajouter une boîte J'aime Facebook sur votre site WordPress ?

Ajouter une boîte J'aime Facebook à votre site WordPress présente de grands avantages.

Premièrement, cela aide à engager les gens en leur permettant de liker facilement votre page fan ou votre page professionnelle Facebook. Cela signifie que vos publications apparaîtront dans leur fil d'actualité Facebook, vous permettant ainsi de continuer à toucher des personnes au-delà de votre site web.

De plus, la boîte J'aime de la page Facebook indique combien de personnes ont aimé votre page Facebook. Cela peut servir de preuve sociale et encourager davantage de visiteurs à cliquer sur 'J'aime'.

Ce tutoriel vous montrera deux façons d'ajouter une boîte J'aime Facebook : une utilisant un plugin social et l'autre avec du code. Vous pouvez utiliser les liens rapides ci-dessous pour naviguer dans notre article :

• Méthode 1 : Utiliser un plugin WordPress de boîte J'aime Facebook (pour débutants)
• Method 2: Adding a Facebook Like Box With Code

Méthode 1 : Utiliser un plugin WordPress de boîte J'aime Facebook (pour débutants)

Cette première méthode est la façon la plus simple et recommandée pour les débutants d'ajouter une boîte J'aime Facebook à leurs sites. Elle vous permettra également d'afficher votre flux Facebook sur votre site web si vous le souhaitez.

Cette méthode utilise Smash Balloon, qui est un plugin WordPress convivial vous permettant d'intégrer divers flux de médias sociaux dans WordPress, ainsi qu'une boîte J'aime.

Pour ce tutoriel, vous pouvez utiliser la version gratuite du plugin de flux de publications sociales Smash Balloon. Mais si vous souhaitez des fonctionnalités au-delà de la boîte J'aime (comme l'affichage de vidéos, de photos et d'événements), nous vous recommandons de passer à la version Pro.

Configuration du plugin Smash Balloon Facebook Feed

Tout d'abord, vous devez installer le plugin WordPress dans la zone d'administration. Ensuite, allez dans Flux Facebook » Tous les flux et cliquez sur « Ajouter un nouveau ».

Maintenant, sélectionnez le type de flux « Timeline » (Comment afficher votre chronologie Facebook dans WordPress).

Ensuite, cliquez simplement sur le bouton « Suivant ».

À ce stade, vous devrez connecter votre page Facebook à votre site Web WordPress.

Ce que vous devez faire, c'est cliquer sur le bouton « Ajouter ».

Smash Balloon vous dirigera vers un nouvel écran.

Ici, sélectionnez simplement « Page » pour le type de source, puis cliquez sur « Connecter à Facebook ».

Maintenant, vous devez vous connecter à votre compte Facebook.

Après cela, choisissez la ou les pages pour lesquelles vous souhaitez afficher la boîte « Like » sur votre blog WordPress ou votre site Web. Ensuite, cliquez sur « Suivant ».

Vous verrez maintenant les paramètres d'autorisation de Smash Balloon. Nous vous recommandons de les activer tous pour vous assurer que tout fonctionne correctement.

Maintenant, cliquez sur « Terminé ».

La dernière fenêtre contextuelle confirmera simplement que vous avez bien lié Smash Balloon à Facebook.

Cliquez simplement sur « OK » pour continuer.

Smash Balloon vous redirigera maintenant vers la zone d'administration, où vous devrez sélectionner une page Facebook à utiliser dans votre flux de chronologie.

Choisissez simplement une page et cliquez sur « Ajouter ».

Vous verrez maintenant la page Facebook que vous venez de connecter comme source sur la page du plugin Smash Balloon.

Sélectionnez-la simplement et cliquez sur « Suivant ».

Personnaliser la boîte « J'aime » de Facebook

À ce stade, Smash Balloon vous amènera à l'éditeur de flux Facebook.

La première étape consiste à cliquer sur « Disposition du flux » au-dessus de l'option « Schéma de couleurs ».

Faites simplement défiler vers le bas jusqu'à la section « Nombre de publications ».

Après cela, définissez le nombre pour le bureau et le mobile sur 0. Cela supprimera l'affichage de toutes vos publications récentes et permettra au flux d'afficher uniquement la boîte « J'aime ».

Alternativement, si vous souhaitez également afficher votre flux Facebook avec la boîte « J'aime », vous pouvez suivre notre tutoriel sur comment créer un flux Facebook personnalisé dans WordPress.

Maintenant, revenez en arrière.

Ensuite, cliquez sur « Personnaliser » pour revenir à la page de l'éditeur de flux.

À ce stade, vous pouvez supprimer l'en-tête de votre flux Facebook.

Ce que vous devez faire, c'est descendre à la partie « Sections » et sélectionner « En-tête ».

Ce paramètre d'en-tête détermine l'apparence de l'en-tête de votre flux Facebook.

Mais dans ce cas, vous devez le masquer, alors désactivez simplement le bouton « Activer ».

Revenons maintenant à la page principale de l'éditeur de flux et ouvrons le paramètre « Boîte J'aime ». Ensuite, activez simplement la fonctionnalité « Boîte J'aime ».

Sur cette page, vous pouvez également ajuster la taille de la boîte « J'aime », sa position, l'affichage de la photo de couverture, la largeur personnalisée, le texte d'appel à l'action personnalisé, etc.

Une fois cela fait, appuyez simplement sur le bouton « Enregistrer » dans le coin supérieur droit.

Intégrer la boîte « J'aime » de Facebook sur votre page ou publication WordPress

À ce stade, vous pouvez afficher la boîte J'aime de Facebook sur une page ou une zone prête pour les widgets comme une barre latérale.

Pour ce faire, cliquez sur « Intégrer » en haut à droite. Maintenant, la fenêtre contextuelle « Intégrer le flux » apparaîtra, vous donnant deux options pour afficher la boîte J'aime.

L'une consiste à utiliser un shortcode, et l'autre à l'ajouter directement à une page ou à une zone prête pour les widgets. La deuxième option est beaucoup plus facile, nous allons donc vous montrer cette méthode en premier.

Si vous souhaitez ajouter la boîte J'aime à une page spécifique, cliquez sur le bouton « Ajouter à une page ».

Maintenant, sélectionnez simplement une page à laquelle ajouter la fonctionnalité et cliquez sur « Ajouter ».

Vous arriverez maintenant à l'éditeur de blocs Gutenberg.

Cliquez sur le bouton « + Ajouter un bloc », comme indiqué par Smash Balloon.

Une fois la bibliothèque d'insertion de blocs ouverte, vous devez trouver le bloc Flux Facebook.

Ensuite, faites-le simplement glisser et déposez-le là où il convient le mieux sur la page.

Dans le bloc, sélectionnez le flux Facebook avec la boîte J'aime que vous venez de créer précédemment.

Le bloc affichera alors la boîte J'aime.

Mais que faire si vous avez plusieurs pages Facebook et que vous avez configuré une boîte J'aime pour chacune d'elles en utilisant Smash Balloon ?

Vous pouvez également basculer entre elles dans la barre latérale des paramètres du bloc en choisissant un flux dans le menu déroulant « Sélectionner un flux ».

Tout ce que vous avez à faire maintenant est de cliquer sur le bouton « Mettre à jour » pour officialiser les changements.

Voici à quoi ressemble notre boîte J'aime sur notre site de démonstration :

Si vous utilisez un thème WordPress basé sur des blocs, vous pouvez également utiliser l'éditeur complet de site pour ajouter le bloc Boîte J'aime Facebook aux modèles de page de votre thème.

Pour plus d'informations sur l'éditeur complet de site, lisez notre guide pour débutants sur l'édition complète de site.

Intégrer le widget Boîte J'aime Facebook dans WordPress

Si vous utilisez un thème WordPress classique, vous voudrez peut-être afficher la boîte J'aime Facebook dans une zone prête pour les widgets, comme une barre latérale, un en-tête ou un pied de page. C'est un excellent moyen d'afficher la boîte J'aime sans distraire les utilisateurs du contenu principal de la page.

Dans la fenêtre contextuelle Intégrer le flux, sélectionnez « Ajouter à un widget » pour accéder à l'éditeur de widgets basé sur des blocs.

Maintenant, comme dans la méthode précédente, cliquez simplement sur le bouton « + Ajouter un bloc », trouvez le bloc Flux Facebook et faites-le glisser sur la zone souhaitée.

Sur notre site de démonstration, nous voulons utiliser la boîte J'aime comme widget de barre latérale WordPress.

Dans le bloc, sélectionnez le flux Facebook avec la boîte J'aime que vous avez créée précédemment.

Ensuite, cliquez sur « Mettre à jour » pour rendre les changements effectifs.

Et vous avez terminé !

Voici à quoi ressemble la barre latérale de notre site de test avec le widget Like Box :

Intégrer le widget Facebook Like Box avec un shortcode

Si les deux méthodes précédentes ne fonctionnent pas, nous vous recommandons d'ajouter la boîte Facebook Like Box ou Fan Box à l'aide d'un shortcode.

Copiez simplement le shortcode de la fenêtre contextuelle Embed Feed précédente et ajoutez-le n'importe où sur votre site Web.

Pour plus d'informations sur l'utilisation des shortcodes, vous pouvez lire notre guide sur comment ajouter des shortcodes dans WordPress.

Méthode 2 : Ajouter une boîte Facebook Like Box avec du code

Si vous souhaitez uniquement afficher une boîte Facebook Fan Box ou Like Box sans ajouter d'autres types de flux Facebook, l'utilisation d'un plugin de page Facebook peut sembler excessive. Dans ce cas, vous pouvez ajouter la Like Box en utilisant du code à la place.

Cette méthode peut sembler intimidante pour les débutants, mais nous vous montrerons un moyen infaillible d'insérer du code à l'aide de WPCode. C'est un plugin WordPress qui facilite l'ajout d'extraits de code personnalisés à WordPress sans casser votre site.

Pour ce guide, la version gratuite de WPCode est suffisante, bien que vous puissiez passer à la version Pro pour des fonctionnalités avancées comme le mode test et une bibliothèque d'extraits de code basée sur le cloud.

Tout d'abord, installons le plugin dans WordPress. Une fois qu'il est actif, allez dans Extra » + Ajouter un extrait. Sélectionnez ensuite « Ajouter votre code personnalisé (Nouvel extrait) » et cliquez sur « + Ajouter un extrait personnalisé ».

Vous arriverez maintenant dans l'éditeur de code. Donnons d'abord un nom à votre extrait de code personnalisé afin que vous puissiez l'identifier facilement plus tard. Pour celui-ci, nous l'appellerons « SDK JavaScript Facebook » car c'est ce que nous allons ajouter ici.

Maintenant, gardez cet onglet ouvert et créez un nouvel onglet dans votre navigateur pour aller sur la page des développeurs Facebook.

Dans le menu, cliquez sur « Connexion » pour vous connecter à votre compte Facebook.

Si c'est la première fois que vous accédez à la page, terminez l'assistant d'intégration pour créer un compte gratuit.

Vous serez ensuite dirigé vers le tableau de bord des développeurs Facebook. Cliquez sur le bouton « Créer une application ».

Sur la page suivante, sélectionnez simplement « Autre » pour le cas d'utilisation.

Après cela, cliquez sur le bouton « Suivant ».

Vous verrez maintenant toutes les différentes applications que vous pouvez créer pour votre page Facebook.

Pour créer une boîte J'aime, vous pouvez simplement sélectionner « Entreprise » puis cliquer sur « Suivant ».

Donnons maintenant un nom à votre application. Cela peut être n'importe quoi, car c'est juste pour référence. Vous pouvez également saisir votre adresse e-mail et sélectionner un compte professionnel facultatif.

Enfin, cliquez simplement sur « Créer une application ».

Allons maintenant sur la page des développeurs Facebook pour les plugins sociaux.

Ensuite, faites défiler vers le bas jusqu'à ce que vous trouviez une section comme dans la capture d'écran ci-dessous :

Ici, assurez-vous de remplir l'URL de votre page Facebook, de vider le champ « Onglets » et de spécifier la largeur et la hauteur de la boîte J'aime si nécessaire.

Vous pouvez également choisir d'utiliser un en-tête plus petit, de désactiver la photo de couverture, et plus encore. Nous avons également choisi d'adapter la boîte J'aime pour qu'elle s'adapte à la largeur du conteneur afin que la taille s'ajuste de manière réactive à l'endroit où elle est placée sur le site Web.

Une fois terminé, cliquez sur le bouton « Obtenir le code ». Vous verrez alors une fenêtre contextuelle qui vous montrera deux types d'extraits de code : le SDK JavaScript et l'iFrame. Les deux afficheront votre boîte J'aime, mais en général, le SDK JavaScript est une bien meilleure option.

Les SDK JavaScript sont généralement plus rapides car ils sont directement intégrés dans la page Web, ce qui leur permet de se charger dans le cadre du document principal. Les iFrames nécessitent le chargement d'un document HTML entier, ce qui peut ralentir le temps de chargement de la page.

Dans l'onglet SDK JavaScript, assurez-vous que le nom de l'application que vous avez créé précédemment a été sélectionné.

Ensuite, copiez le code de l'API du SDK JavaScript de l'étape 2. Maintenant, laissez cet onglet ouvert, mais passez à l'onglet WPCode et collez le code ici.

Vous pouvez laisser le type de code sur « Extrait HTML ».

Maintenant, faites défiler jusqu'à la section « Insertion ».

La méthode d'insertion peut être laissée sur « Insertion automatique », tandis que l'emplacement doit être modifié en « Corps de tout le site ».

Enfin, rendez le code actif et cliquez sur « Enregistrer l'extrait ».

Ensuite, vous allez créer un deuxième extrait de code. Vous pouvez suivre les mêmes étapes qu'auparavant et l'appeler quelque chose comme « Boîte J'aime Facebook ».

Après cela, revenez à la page Développeurs Facebook pour les plugins sociaux et copiez le code de l'étape 3.

Accédez à nouveau à l'onglet WPCode et collez le code de l'étape 3 dans la boîte d'aperçu du code. Le type de code peut être « Extrait HTML ».

Faisons défiler jusqu'à la section « Insertion ».

Si vous utilisez « Insertion automatique », vous pouvez faire apparaître la boîte J'aime automatiquement dans plusieurs endroits qui correspondent à la catégorie d'emplacement.

Dans notre exemple, nous avons décidé de choisir l'emplacement « Pied de page de tout le site », ce qui signifie que la boîte J'aime apparaîtra dans le pied de page.

Il existe d'autres options, comme « Insérer avant l'article », pour afficher la boîte J'aime avant tous vos articles de blog WordPress.

D'un autre côté, la méthode « Shortcode » vous permet de créer un shortcode personnalisé.

Vous pouvez ensuite l'ajouter à des parties spécifiques de votre site web en utilisant le bloc shortcode.

Une fois que vous avez configuré les paramètres d'insertion, activez simplement le code et cliquez sur « Enregistrer le snippet ».

C'est tout ! Vous pouvez ensuite visiter votre site web pour voir à quoi ressemble la boîte Like :

Pour plus de guides sur l'affichage des flux sociaux sur votre site WordPress, consultez notre article sur l'ajout de flux de médias sociaux dans WordPress.

Bonus : Autres façons d'intégrer Facebook à WordPress

Vous souhaitez faire passer votre intégration Facebook au niveau supérieur ? Consultez ces guides supplémentaires :

• Comment créer une popup de boîte d'abonnement Facebook dans WordPress – Augmentez l'engagement avec une popup de boîte d'abonnement stratégiquement chronométrée.
• Comment intégrer des publications de statut Facebook dans WordPress – Partagez des mises à jour Facebook spécifiques directement sur votre site.
• Comment intégrer un flux de groupe Facebook dans WordPress – Affichez les discussions de votre communauté sur votre site Web.
• Comment afficher les avis de votre page Facebook dans WordPress – Présentez la preuve sociale avec les avis clients de Facebook.
• Moyens rapides d'obtenir plus de J'aime Facebook en utilisant WordPress – Mettez en œuvre ces stratégies pour développer votre audience Facebook.
• Comment afficher le Twitter et le Facebook des auteurs sur la page de profil – Connectez vos lecteurs avec vos contributeurs sur les réseaux sociaux.
• Comment ajouter des réactions J'aime de Facebook à vos articles WordPress – Apportez la fonctionnalité de réaction populaire de Facebook à vos articles de blog.
• Comment créer une page de destination pour les publicités Facebook dans WordPress – Concevez des pages de destination à fort taux de conversion pour vos campagnes publicitaires Facebook.
• Comment publier automatiquement sur Facebook depuis WordPress – Optimisez votre stratégie de médias sociaux avec la publication automatique.

Nous espérons que cet article vous a aidé à apprendre comment ajouter une boîte J'aime ou une boîte Fan Facebook dans WordPress. Vous voudrez peut-être aussi consulter notre feuille de triche ultime sur les médias sociaux et notre liste des meilleurs plugins de médias sociaux pour WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.