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)

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, un plugin WordPress convivial qui vous permet d'intégrer divers flux de médias sociaux dans WordPress, y compris une boîte J'aime.

Pour ce tutoriel, vous pouvez utiliser la version gratuite du plugin Smash Balloon Social Post feed. 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 ».

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.

Ensuite, choisissez la ou les pages pour lesquelles vous souhaitez afficher la boîte J'aime sur votre blog WordPress ou votre site web. Cliquez ensuite 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 alors vers la zone d'administration, où vous devrez sélectionner une page Facebook à utiliser dans votre flux de timeline.

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 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, l'autre à l'ajouter directement à une page ou à une zone prête pour les widgets. La deuxième option est beaucoup plus simple, 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 les blocs, vous pouvez également utiliser l'éditeur complet du site pour ajouter le bloc de boîte J'aime Facebook aux modèles de page de votre thème.

Pour plus d'informations sur l'éditeur complet du site, lisez notre guide pour débutants sur l'édition complète du 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 J'aime ou Fan Box Facebook à 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 de fans Facebook ou une boîte J'aime 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 boîte J'aime en utilisant du code à la place.

Cette méthode peut sembler intimidante pour les débutants, mais nous allons vous montrer un moyen infaillible d'insérer du code à l'aide de WPCode. C'est un plugin WordPress qui facilite l'ajout de snippets 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 telles que le mode de test et une bibliothèque de snippets de code basée sur le cloud.

Tout d'abord, installons le plugin dans WordPress. Une fois qu'il est actif, allez dans Snippets de code » + Ajouter un snippet. Ensuite, sélectionnez 'Ajouter votre code personnalisé (Nouveau snippet)' et cliquez sur '+ Ajouter un snippet 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 accéder à 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. Il peut s'agir de n'importe quoi, car ce n'est qu'à titre de 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 ».

Accédons maintenant à 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 renseigner 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 un pop-up qui vous montrera deux types de snippets de code : JavaScript SDK et iFrame. Les deux afficheront votre boîte J'aime, mais en général, le JavaScript SDK est une bien meilleure option.

Les SDK JavaScript sont généralement plus rapides car ils sont directement intégrés à 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 JavaScript SDK de l'étape 2. Maintenant, gardez cet onglet ouvert, mais passez à l'onglet WPCode et collez le code là-bas.

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 de 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 fenêtre contextuelle de boîte J'aime Facebook dans WordPress – Augmentez l'engagement avec une fenêtre contextuelle de boîte J'aime 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 vos avis de page Facebook dans WordPress – Présentez la preuve sociale avec les avis clients de Facebook.
• Moyens rapides d’obtenir plus de J’aime Facebook avec WordPress – Mettez en œuvre ces stratégies pour développer votre audience Facebook.
• Comment afficher le Twitter et le Facebook de l’auteur sur la page de profil – Connectez vos lecteurs à vos contributeurs sur les réseaux sociaux.
• Comment ajouter des réactions J’aime de Facebook à vos articles WordPress – Apportez la populaire fonctionnalité de réactions 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 à forte conversion pour vos campagnes publicitaires Facebook.
• Comment publier automatiquement sur Facebook depuis WordPress – Rationalisez 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 aide-mémoire ultime sur les médias sociaux et notre liste des meilleurs plugins de médias sociaux pour WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.