Comment insérer une fanbox ou likebox sous WordPress ? Facebook est un vecteur de trafic et le nombre de fans détient une place importante pour développer votre fibre sociale.
Étape n°1 – Obtenir le code votre Facebook Fanbox
Rendez-vous dans un premier temps sur Facebook pour récupérer l’URL de votre page. Si vous ne disposez pas d’une adresse personnalisée, je vous recommande d’en obtenir une en cliquant sur le bouton Modifier la Page.
Basculez ensuite dans Informations générales sur la gauche, puis remarquez la présence d’un lien vous invitant à créer un nom d’utilisateur pour votre page fan.
Suivez l’assistant et sauvegarder les modifications.
Une fois l’URL obtenue, rendez-vous sur le site des développeurs pour créer la fan box.
Indiquez l’URL de votre page dans le champ prévu à cet effet puis modifiez les différents réglages :
- Width : largeur de votre fan box (292 pixels par défaut) ;
- Height : hauteur de votre fan (laissez vide pour un ajustement automatique) ;
- Color scheme : vous avez le choix entre un style light (le plus courant) ou dark (très peu répandu) ;
- Show Faces : indispensable pour afficher les amis qui ont déjà aimé la page. Utile dans le sens où l’internaute connecté sur Facebook verra les visages de ces amis et sera donc davantage inciter à cliquer ;
- Border Color : indiquez une valeur hexadécimale pour changer la couleur de la bordure. Par exemple : #DDDDDD ;
- Stream : afficher ou non le flux Facebook de la page fan ;
- Header : afficher ou non la célèbre phrase Retrouvez-nous sur Facebook ;
Une fois que vous serez satisfait de vos réglages – notez au passage la présence d’un aperçu temps réel sur le côté droit, cliquez sur Get Code.
Un pop-up s’affiche vous proposant 3 types de code différents : HTML5, XFBML ou iFrame.
La version iFrame est la plus simple à insérer car il n’y a qu’un seul bloc à coller – de même, elle me semble plus légère en termes de poids.
Voici un exemple pour WordPress Channel :
Si vous disposez d’une application Facebook, il est nécessaire d’indiquer à partir de la déroulante l’application correspondante.
Étape n°2 – Insertion de la Fanbox sous WordPress
#1 – Utilisation d’un widget
Connectez-vous au back office de WordPress puis déroulez Apparence puis Widgets.
Glissez / déposez un widget texte dans la sidebar de votre choix.
Collez le code obtenu sur Facebook.
N’indiquez pas de titre – simple avis personnel, puis faites Enregistrer.
#2 – Insertion dans le thème WordPress
Si votre thème ne dispose pas d’une sidebar ou que vous préférez directement coder la fanbox dans votre thème, il nous faut tout simplement choisir l’emplacement où l’afficher.
Cette décision étant de votre ressort, voici quelques fichiers susceptibles de l’accueillir :
- sidebar.php : ce fichier concerne les colonnes latérales du site, un emplacement de premier choix. Vérifiez toutefois que la fonction de widgetisation n’est pas présente – auquel cas, préférez l’usage d’un widget qui est plus simple à maintenir ;
- footer.php : ce fichier abrite votre pied de page, un emplacement commode mais relativement peu lu par les lecteurs. Collez le code avant la fermeture de la balise </body> ou mieux avant <?php wp_footer(); ?> ;
Retournez sur votre site pour admirer le résultat : il ne vous reste plus qu’à inviter tous vos amis pour liker votre page Facebook !
Bonjour,
Si on peut mettre en iframe avec le nouveau plugin Facebook
le lien dans l’article est obsolète, il faut aller là
https://developers.facebook.com/docs/plugins/page-plugin
Ok donc maintenant on fait comment?
Bonjour à toute l’équipe WordPress Channel,
Depuis quelques semaines Facebook a mis à jour son API et n’autorise plus l’ajout de LikeBox à l’aide d’une IFRAME.
Il pourrait être intéressant pour la communauté de mettre à jour ce tutoriel ^^
Beau travail et merci pour vos nombreux partages.
Bien à vous.
Merci bcp
🙂
bonsoir,
j’utilise le thème Graphene sous WP et je voudrais placer l’icône et le lien facebook vers ma page à côté du logo RSS en tête de page. Où trouver la bonne “area” ?
merci pour le tuto
Merci pour le tuto, simple et efficace ! Fanbox mis en ligne en moins de 10 minutes 😉
Salut et merci pour ce tuto.
Une question: tu as utilisé quel plugin pour avoir “A propos de l’auteur” en bas de l’article ?
Merci
Merci pour l’article. En fait j’avais déjà trouvé la solution toute seule, mais j’ai un souci : quand j’ouvre le site sur un ordinateur la fanbox ne s’affiche pas dans mon widget, alors que quand j’ouvre le site sur une tablette ou un smartphone, elle s’affiche ! Je ne comprends pas…. As-tu déjà eu ce souci ?
Avez-vous essayé dans un autre navigateur ?
Bonjour et merci pour ce tutoriel que j’ai suivi à la lettre, et pourtant la box ne s’affiche pas dans ma sidebar – plus exactement apparaît seulement un espace vierge correspondant à ses dimensions.
J’ai vérifié les restrictions liées au pays et à l’âge et tout semble ok…
Auriez-vous une idée ?
MERCI
Essayez de passer par le plugin JetPack en activant leur module social puis en choisissant le widget Facebook.
Bonjour et merci pour ce tuto , c’est très facile avec tes explications!!
par contre sur mon site ça fait comme si ça loadait toujours et c’est blanc alors que je le voulais noir!
Merci pour ce tutoriel
Je rejoins les derniers commentaires…J’ai testé sur trois sites différents et rien. La likebox ne s’affiche pas…J’aime pas quand je ne comprends pas d’où ça vient 😉
rectification…elle apparaît bien si je suis connectée sur Facebook…Mais si qqn vient sur mon site et n’est pas connecté à Facebook…Ca fait un beau vide dans le footer…:-/
Bon je pense avoir trouvé la solution 😉 j’espère que ça en aidera certains.
D’abord quand on colle le code:
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
devant le //conect il faut ajouter http:
le problème peut venir de là.
ou sinon dans les paramètres de la page Facebook dans restrictions liées au pays , ne rien mettre et dans restrictions liées à l’âge, mettre “tout le monde (+13) ”
Moi j’ai combiné les deux et ça fonctionne 🙂
Si tu utilises les codes officiels de Facebook tu ne dois pas avoir de souci. Il faut toujours vérifier ce que tu dis par rapport aux diverses restrictions d’âge et de pays. 😉
ça ne donne rien a mon niveau
Bonjour,
Merci pour ce tuto mais il semble que j ai un petit problem…
J ai donc suivi a la lettre ce tuto mais la fanbox ne s affiche pas…
Par contre elle s’affiche sur mon site si je suis connecter a facebook sur une autre page…
J ai testé sur firfox et chrome et sur windows et mac
Si la fanbox s’affiche alors que vous êtes connecté à Facebook, vérifiez vos paramètres de confidentialité sur Facebook pour voir s’il n’y a pas une restriction sur le pays.
Bonjour et avant tout merci de nous aider au quotidien. Cherchant à améliorer la vitesse de mon site , je l’ai testé avec GTmetrix.
Toutes images de mes fans sortent dans la rubrique “optimize images” avec un priorité hight
à priori un gain de 17 % pourrait être fait si chacune des images des fans étaient optimisées.
Connaissez-vous une solution , si non un plugin pour optimiser correctement les images ?
merci de votre aide
Je recommande WP-Rocket que j’utilise sur ce site.
MERCI beaucoup, simple, clair , et efficace, fonctionne nickel
cdt
Bonjour. Merci beaucoup pour ce tuto, je l’ai suivi à la lettre et tout fonctionne. J’avais une question plus large : Que pensez-vous de l’achat de fans ? Je pensais faire appel à Boostic pour augmenter ma page de 1000 fans (http://www.boostic.fr/avoir-des-fans-francais-sur-facebook/) car elle reste désespérément bloquée à 1200 fans depuis des mois…
A déconseiller, absolument !
Merci pour le tuto
je voudrais le placer comme vous à droite, mais ne sais pas comment faire…
Pouvez vous m’aider ?
Apparence > Widgets texte ?
bonjour rédacteur de wpchannel
j’ai suivit tous vos conseil mais quand je vais sur mon site la fan page n’apparaît pas. que dois-je faire?
Vérifiez que vous n’avez pas activé des paramètres de restriction par pays. Cela arrive. Sinon, passez par JetPack qui dispose de modules sociaux.
Merci pour cet article c’est un merveille
Bonjour, qu’elle différence entre cette méthode et le widget facebook members ?. J’ai testé les deux ; avec facebook je me retrouve avec les images des fan en double et avec votre méthode (mode widget texte) j’ai ce message d’erreurParam width must be a number (en ayant copié le code Iframe
Au temps pour moment j’ai résolu pour le message d’erreur mais toujours pas pour les images en double des fan
Bonjour,
est t’il possible d’intégrer la fanbox dans une page du site wordpree ?
merci
Salut! je vous propose une seconde alternative à Twitter Fanbox peut voir une démonstration en http://www.musicpaax.com/twitter
Bonjour,
L’article a plus de 4 mois, désolé pour le retard mais je viens d’être confronté à un problème. Je veux aussi utiliser un code iframe, celui ci généré par Apple, il s’agit d’un widget qui permet de rechercher des applications dans l’appstore via le widget. Une fois le code généré, il ressemble tout à fait, à votre : étape n°2 et #1 utilisation d’un widget, le problème c’est que rien est interprété quand je colle mon code iframe dans le widget texte HTML, rien ne s’affiche, j’ai essayé de l’entourer par des balises code, de faire une “DIV”. Impossible.
J’utilise le thème KARMA, se pourrait il que mon thème bloque se genre de chose ?
Merci d’avance pour votre aide.
Je me permet de répondre, pour pas vous ennuyer pour rien. En faite le coupable était AdBlock pour Chrome en le désactivant, le widget apparaît bien.
Merci
Bonjour Parad0xj,
tu es sûr que c’était dû à addblock? J’ai exactement le même problème mais je n’ai pas adblock…
Je ne sais pas comment m’en sortir 🙁
Merci pour ce tuto clair et trés utile.J’avais cherché des applications pour facebook mais j’étais toujours déçu…là c’est clair,rapide et trés pratique.
Salut, je suis en train de monter le blog de la boite ou je bosse (enfin… ou je stage quoi^^) et je viens de passer un petit moment à essayer de regler une faille esthetique :
Si la with/height de la box ne tombe pas sur une bonne valeur le footer de la box ne s’affiche pas, serais-tu si ce bug peut être rectifié? (Je vois que ta propre box n’a pas de footeur du coup de je dis que c’est peut-être pas rectifiable).
Utilises les paramètres proposés par Facebook pour obtenir le résultat recherché. 😉
Ok je regarde ça merci 🙂
Bonjour Aurélien,
Je souhaiterai que la like box s’affiche avant le site comme ici : http://felfelosophy.com/
Comment est-ce possible ?
Merci !
Il y a plein de façons de faire cela comme avec Fancybox.
Merci ! Cependant je ne sais pas où insérer mon code iframe ? J’ai tenté dans l’éditeur de theme, modèle de page d’accueil, avant le <get header… mais rien ne change !
Sais-tu comment je peux m’y prendre ? Merci d’avance !
Ben faut être développeur sinon tu risques de patauger un moment… et le temps me fait défaut…
pas de soucis merci quand même !
Merci pour ce tuto bien pratique. 🙂
Bonjour,
effectivement cette manipulation marche très bien… seulement j’aimerai l’enlever à présent mais la barre de like FB reste bien que j’ai supprimé le widget “texte”… Au secours !
Ne pas oublier de supprimer des bouts de code éventuellement inséré dans le code du thème ou par un plugin.
Bonjour,
Je suis étudiante en école de commerce et nous devons créer un blog sur le domaine du marketing avec wordPress mais nous avons quelques soucis d’utilisation!!! Nous n’avons jamais utiliser wordPress et nous aurions besoins de conseils!!!
J’ai bien créer une page facebook avec une adresse mais je n’arrive pas du tout à le mettre directement sur le blog avec les widgets!!!
Pouvez nous aider à utiliser wordpress?
Merci d’avance pour votre réponse.
Vous pouvez me répondre sur mon adresse mail.
Laetitia
Répondu par mail. 🙂
Bravo! lol Merci de ta réponse …. J’aimerai connaitre un moyen non pas d’inserer un forum mais un groupe similaire a facebook…une idée?
Merci ton site est génialissime!
Oui!
Mais je ne vois pas pourquoi cela ne marche pas! dans” Facebook Page URL (?)” je met : http://www.facebook.com/isabelle.beau
et pourtant ça ne veut pas…
sur mon site y a ce message d’erreur “Une erreur s’est produite lors de la récupération de l’espace J’aime pour la page spécifiée.”
http://isabellebeau.fr/test/
Bon j’avoue je ne suis pas du tout informaticienne..je me lance juste un défi quand à mon site perso 🙂
Merci pour ta réponse!
J’ai plein d’autres questions…car j’essai tout ce que tu a écrit! lol…tel que twitter bouton, j’n’arrrive pas à le faire fonctionner non plus…
La réponse est simple : il faut avoir créer une page comme indiqué dans l’article et non pas un profil Facebook. 😉
Bonjour,
Merci pour tes informations claire et concise..
J’ai un petit bug…alors peut etre parce que facebook à changé : quand tu parles d’obtenir le code votre Facebook Fanbox, je ne vois vraiment pas où aller? Et pourtant url de ma page perso est simple isabelle.beau..mais quand je met cela ça ne fonctionne pas…Merci d’avance pour ton aide 😉
Tu as bien accès à la page de création de la fanbox ?
Salut, ton article m’a beaucoup aidé.
Peux-tu me dire comment tu fais pour ajouter cet effet de “gloss” ou de “shining” (je ne sais pas comment l’appeler en français.) sur tes avatars?
Merci de répondre sur l’adresse mail aussi. Je passerai plus souvent ici dorénavant.
Merci.
Merci beaucoup Aurelien pour ce tuto très clair et très facile
Pour info il a fallu que je copie le code N°2 dans le widget texte
avec le premier ça ne fonctionne pas.
Bonjour,
merci pour ce super article. J’ai un soucis cependant car j’ai bien suivit toutes les étapes mais au moment de valider tout s’efface. une idée?
ps: je suis sous mac et j’ai essayé avec firefox et safari
Bonjour,
Je recherche désespérément le code html du logo de facebook, afin que je puisse l’insérer à côté du logo twitter en page d’accueil, donc de taille plus ou moins équivalente.
En effet, la solution prête à l’emploi où l’on copie-colle le lien de ses pages FB et twitter dans la partie réseaux sociaux n’est pas assez visible à mon goût. Les logos sont “perdus” en haut à droite du site et cela perd de son efficacité.
Pouvez-vous m’aider à trouver ce fameux code? j’ai trouvé les codes de 20 logos facebook, mais jamais le simple “F” en bleu et blanc…
Merci d’avance pour le coup de mail! Très bon tuto sinon.
Si tu cherches à insérer un lien sur un logo Facebook alors oui le te faut en récupérer sur des sites comme iconfinder.
Salut, est-ce que vous connaissez un moyen d’avoir la fan box sans iframe ? Merci
Le site officiel des développeurs Facebook propose plusieurs méthodes comme HTML5. Cela dit, au final, la source génère toujours un iframe.
Avant de critiquer ceux qui donnent de leur temps et leurs conseils il faudrait pour être crédible apprendre la langue française et poster des commentaires sans fautes d’orthographe. Indiquer un url valable serait pas mal non plus. Bravo pour votre soi-disant professionnalisme
Bonjour,
J’avais déjà essayé plusieurs tutos pour créer une fan box sans jamais y parvenir !
Ce matin, je suis tombée sur ce tuto, un must pour ceux qui ne maîtrisent pas les arcanes du code HTML. Merci grâce à vous, je n’ai pas perdu mon temps : j’ai un résultat !
Le problème avec tous ces widgets de réseaux sociaux c’est leur largeur fixe qui passe très mal avec des thèmes en responsive design … Suis à la recherche d’une solution … de ce type (pour des videos youtube par ex): http://webdesignerwall.com/tutorials/css-elastic-videos
Merci!
Je pense que le mieux serait de masquer les widgets sociaux sur les résolutions inférieures à 1024px par exemple. Pour les vidéos, un player en HTML5 doit pouvoir faire cela… ah en fait c’est ce que dis l’article en lien – j’ai répondu en même temps que je lisais le truc 🙂
Bonjour,
Merci pour ce super tuto, très clair et très bien expliqué surtout pour une novice comme moi! Par contre, je ne sais pas si j’ai loupé une étape ou quoi mais sur mon site ça me mets le lien dans la slidebar et non sous forme de la fanbox. Un petit coup main ?
Merci d’avance !
Hum tu as bien inséré un widget texte et pas celui d’un plugin Facebook ?
Merci pour cet article : simple et concis !
J’ai réussi à ajouter ma fanbox en quelques minutes 🙂
Mathieu.
Formidable ! Ce tutoriel me donne la sensation de pouvoir TOUT faire !! Super simple et très clair, merci et bravo !
Bonjour,
merci pour ces explications très claires.
Pour ma part je cherche à faire apparaître dans ma sidebar, les derniers posts présents sur ma page Facebook. Est ce que c’est faisable ? Je précise que je ne cherche pas à utiliser les fonctions de FB Comments qui prendraient la main sur ceux de mon blog… Non ce que je souhaite c’est que ça affiche les derniers posts comme le ferait un agrégateur de flux RSS… Suis-je clair ?
Merci pour vos retours. B
Si tu fais référence à ton flux Facebook, coches Stream dans les options de création de la fanbox. Mais je ne pense pas bien saisir ta question…
Bonsoir Aurélien,
Je mets en place actuellement un site WP pour un client. En parallèle le client va se créer un compte Facebok. Voir même une page Fan de.
Il souhaite pouvoir afficher sur le site les commentaires en provenance de sa page Facebook. Je pense en effet que ce soit le flux dont tu parles.
Suis je plus clair cette fois?
.o)
OK compris. Je pense que tu peux faire cela avec un plugin pour mixer les 2 (ceux de Facebook et ceux de WordPress). Une solution globale est proposée par Disqus. Personnellement, je n’aime pas car c’est très lourd et tu n’est plus maitre de tes commentaires.
Salut Adrien,
Ta première solution de cocher Stream était la bonne ! Client satisfait ! Yesss.
Merci beaucoup pour ton aide.
Ah moi c’est Aurélien 😉
Ravi que cela fonctionne.
ce tuto est tout simplement limpide ,pas trop long … tous ce qui optimal quoi. think tè for u
Félicitation pour cet article, je suis débutante avec worpress et ton article est très clair et bien fait. Petite question, je me demandais si c’était possible d’allonger un peu la boîte afin d’avoir 3 ou 4 lignes d’image de fans plutôt que deux.
merci
De ce côté là je ne pense pas. On est très limité en personnalisation…
Merci de ta réponse. Il faut croire que je m’améliore avec WordPress. Je suis abonné à tes articles depuis quelques temps et au début c’était du chinois. Maintenant je relis tous tes articles et je comprends la plupart, sauf lorsque tu parles du code. Mais ça va venir.
Merci pour tes très bons articles.
bonjour,
il est tout a fait possible d’avoir plus de 2 lignes d’amis.
pour cela il vous suffit de rallonger la hauteur height.
en ajoutant selon le code choisi :
data-height=”600″
—–CODE INVALIDE—–
en passant merci pour votre tuto pour les templates 😉
Merci du partage ! 😉
Le code n’est pas passé mais cela est facile à mettre en oeuvre il me semble…
de rien,
oui très facile 😉
Merci pour ce billet… Je voulais le mettre en place sur mon blog et j’ai suivi votre méthode.
Tout fonctionne, continuez ainsi !
Yann
Bonjour
Cette article est tout simplement médiocre et navrant.
Venez pluto retrouver un site profesionelle à cet adresse:
Http lashon.fr.Une équipe de profesionnel au service de WordPress
Tu peux argumenter ?
Un argument pour lacher de telles conneries ?!
Dire que c’est de la “merde”, c’est cool, mais dire pourquoi c’est de la merde, là ça fait avancer les choses !
C’est sympa l’image que tu donnes à ton site comme ça…
Très bon article : clair, détaillé, simple et efficace…comme toujours sur wp channel
Bravo Aurélien
Lashon… Quand tu arrive à atteindre son site (car il n’est même pas capable de taper correctement son url) et que tu tombe sur un tas d’erreurs et un design digne des débuts d’internet, effectivement tu réalise que là ce sont de véritables professionnels chez Lashon Studio… Quelle misère de faire sa pub d’une telle manière, pour un studio qui n’en a que le nom… Pauvre petit monsieur…
Je n’ai pas parlé des fautes d’orthographe, à partir d’une par mot, je pense qu’il faut éviter de tirer sur l’ambulance…
comment peut-on descendre quelqu’un qui laisse un tuto pour en aider d’autres de manière simple et super efficace. Je ne comprends pas ! Les aigris, les mal-pensant, mais qu’est ce qui vous anime… c’est le manque de boulot qui vous pousse à perdre votre temps à écrire des vomis et à insulter le travail des autres ? Moi je dit BRAVO à Aurélien, en plus il a l’air super sympathique… ce qui est loin d’être le cas de certains…
de plus, je dis encore Bravo à Aurélien de laisser les commentaires assassins de pauvres mecs qui n’ont pas d’amis !
Je confirme qu’un commentaire garni de fautes d’orthographes et négatif comme le tien c’est NAZE !
c’est sur quand il faut payer pour faire un truc aussi simple ca devient logique que son article est mediocre.En tout cas moi son article mediocre m’a bien servie.Encore merci pour cette exelent oups mediocre article qui va en aider plus d’un.
Bonjour Aurelien,
Grand merci pour ce tuto qui tombe bien pour moi. Je suis actu sur la refonte de mon blog et rien qu’hier j’ai crée ma page facebook. Voici qu’aujourd’hui je tombe sur cette mine d’or.
Cordialement et bon dimanche,
Sié Issa