facebook-wall

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. Ce tutoriel vous montre comment intégrer cette boite à fan comme sur WordPress Channel.

É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.

Capture d'écran - Administrer page Facebook
Modifier votre page Facebook pour booster votre positionnement

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.

Capture d'écran - Création d'un nom d'utilisateur
URL personnalisée : http://facebook.com/wpchannel

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 ;
Capture d'écran - Assistant de création d'une like box
Modifiez les options de configuration votre fan box

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.

Capture d'écran - Facebook Like iFrame
Le code iFrame est le plus simple à utiliser

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 :

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fwpchannel&amp;width=260&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23DDDDDD&amp;stream=false&amp;header=true&amp;appId=215550098468187" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:260px; height:290px;" allowTransparency="true"></iframe>

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.

Capture d'écran - Widget texte sous WordPress
Utilisation d’un widget texte pour votre boite à fan

Collez le code obtenu sur Facebook.

Capture d'écran - Copie du code iFrame Facebook
Insérez votre code iFrame dans la zone vide du widget

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 !

Crédits photo : Laughing Squid

92 commentaires

  1. 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

  2. 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

    1. 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…

    2. 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…

      1. 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 !

    3. 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.

  3. 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

      1. 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.

        1. 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

  4. 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

      1. 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)

        1. 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.

          1. Salut Adrien,
            Ta première solution de cocher Stream était la bonne ! Client satisfait ! Yesss.
            Merci beaucoup pour ton aide.

  5. 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 !

    1. 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

  6. 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 !

  7. 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

  8. 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.

  9. 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

  10. 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.

  11. 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.

  12. 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

  13. 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…

  14. 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!

  15. 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

  16. 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 !

      1. 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 !

  17. 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).

  18. 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.

  19. 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.

    1. 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

  20. 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

  21. 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?

  22. 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

  23. 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

      1. 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

  24. 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!

  25. 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

  26. 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 ?

  27. 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

    Laisser un commentaire