Ajouter la nouvelle Likebox Facebook sur WordPress

facebook likebox
ARTICLE MIS A JOUR LE 29/01/2017

Nouveau module Likebox Facebook : installation sans plugin

La Facebook Like box n’est plus : elle est même complètement inutilisable depuis 23 juin 2015. Rassurez-vous, pour ceux qui n’ont pas mis à jour leur likebox existante, celle-ci a été automatiquement  reconvertie dans le nouveau plugin Like Box de Facebook (dixit Facebook).

Mais vous qui n’en avez pas encore ou qui voulez le mettre à jour, voici la démarche à suivre. C’est tout frais, je viens de créer ma page 🙂 :

Pour partager votre page Facebook sur votre site :

Aller sur la page du plugin

 

page plugin Facebook

 

Entrer les informations demandées :

  • Adresse URL de votre page Facebook
  • Width : largeur du module (minimum 280px, maximum 500px), par défaut 340px
  • Height : hauteur (height – minimum 130px), par défaut 500px

Si vous ne mettez rien, vous pouvez voir dans le tableau un peu plus bas (Settings) les valeurs par défaut qui seront attribuées.

 

Testez les différentes propositions :

Sans bandeau de couverture

plugin Facebook sans image de couverture

Avec les photos de vos amis

plugin facebook avec visage des amis

Avec les photos + les derniers posts

plugin Facebook avec posts

Cliquez sur le bouton Get Code

 

plugin code facebook

 

C’est là qu’on va aller mettre les mains dans le cambouis de WordPress…

 

Partie 1 du code Facebook

Dans le fichier functions.php de votre thème enfant (si vous n’en avez pas, je vous conseille vivement de lire, par exemple, ce bon post à ce sujet), rajoutez ce code (intégrant la partie 1 du code donné par Facebook) :

 

 

En gros, on crée une fonction (theme_enfant_footer_script) qui va exécuter le script de Facebook et on lui demande de se déclencher (add_action) dans le footer (wp_footer), juste avant la fermeture de la balise </body>.

Code mis à jour le 29/01/2017 (version 2.8 du plugin Facebook)

 

Partie 2 du code Facebook

Pour la deuxième partie du code (entourée en noir), il faut aller la placer à l’endroit où vous voulez afficher le module :

 
Pour un widget, créez un widget « texte », collez le code donné par Facebook et enregistrez : pas plus dur que ça !
 
Dans une page ou un article, cliquez sur l’onglet « texte » à côté de « visuel », puis collez votre code à l’endroit voulu dans votre page (n’hésitez pas à prévisualiser votre page avant de l’enregistrer, pour être sûr !)
 
A noter :

dans la fonction theme_enfant_footer_script(), on peut également rajouter d’autres scripts (après la balise </script>), qui seront exécutés aussi en fin de footer.

Remarques :

Pour les puristes, on peut aussi utiliser wp_enqueue_script, mais c’est moins simple à expliquer et ça marche très bien avec la méthode ci-dessus !

Et évidemment, il existe des plugins WordPress qui font le même boulot : mais bon, on vous l’a dit (enfin j’espère), moins il y a de plugins sur votre site, mieux ce sera pour la vitesse du site et son référencement !

 

Et hop, voilà, une belle promo pour sa page FB sur son site, ça vaut le coup, non ?

Comme vous avez pu le constater, je n’ai pas encore beaucoup de Likes sur ma page Facebook toute neuve : n’hésitez pas à m’encourager  🙂

Et n’hésitez pas à laisser vos commentaires !

10 commentaires sur “Ajouter la nouvelle Likebox Facebook sur WordPress

Bonjour, merci pour ces explications, face à la pléthore de plugins, je reste tenté par ce qui semble plus simple, cependant je ne suis pas sur de comprendre : Cette méthode que vous décrivez n’est-elle faite que pour insérer sur ma page web du contenu en provenance de FB ou permet-elle aussi en cliquant sur un bouton FB présent sur une page du site (pas forcément dans le sidebar), d’insérer du contenu sur le profil FB ?
– La seconde condition est celle que je cherche à réaliser: insérer du contenu sur mon profil FB via une page de mon site.
Merci d’avance pour votre réponse
Bien cordialement

    Aude de Gouville Auteur de l'article

    Bonjour JMP,
    En effet, il s’agit d’insérer un extrait de votre page Facebook sur votre site. Mais en fait, il y a aussi un bouton « partage » sur le bandeau, qui permet donc de partager l’article ou la page sur Facebook 🙂

    Ceci dit, si vous n’avez besoin QUE du bouton partage, vous pouvez rajouter ce code à l’endroit où vous voulez, en mode « texte » :

    Ca affichera le bouton comme ça :

    J’espère avoir répondu à votre question.

    Bon dimanche !

    Aude de Gouville Auteur de l'article

    Bonjour Darknote,
    tout d’abord, oui, c’est mieux de mettre le code dans la balise, mais à la fin, juste avant la fermeture de la balise : cela permet de charger le contenu de la page en premier, on gagne quelques millisecondes importantes.
    Pour répondre à la question, c’est mieux de le mettre dans le fichier functions.php pour cette raison principale : si vous utilisez un thème enfant (grandement conseillé), il vous faudra copier-coller le fichier footer.php dans votre thème enfant et le modifier pour ajouter le code. C’est votre nouveau footer.php qui sera alors chargé dans le site à la place de l’original : c’est déjà plus compliqué comme démarche que de placer le code dans functions.php 🙂

    De plus, en cas de mise à jour du thème principal, si le fichier original footer.php a été modifié les changements ne seront pas répercutés, ça peut poser problème.
    Après, bien sûr, c’est possible, mais moins simple 🙂

    Dernière recommandation : dans les bonnes pratiques, il vaut mieux regrouper les scripts au même endroit, dans un fichier externe, ne serait-ce que pour ne pas oublier ce qu’on a modifié à droite à gauche. C’est le boulot du fichier functions.php, ça tombe bien !

    Alors, je vous ai convaincu ?

      Merci Aude pour cette belle vulgarisation dans un contexte (WordPress) pas toujours simple. Moi j’aimais bien les iframes pour FB mais ils ne les supportent plus. Dommage, pourquoi faire simple quand on peut faire compliqué. J’avais un iframe dans un widget de mon footer mais il a soudainement disparu. Ce qui m’a amené à votre page. Merci pour les infos.

Bonjour et merci pour le tuto, cependant j’ai un souci avec le code (pour le theme enfant), voilà les lignes de codes du theme enfant par défaut: (créer via plugin)

$link )
if ( 0 === strpos( $link, $home ) )
unset($links[$l]);}
add_action( ‘pre_ping’ , ‘seomix_no_internal_ping’ );

———————–

Et voilà le code facebook que je dois rentrer:

(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/sdk.js#xfbml=1&version=v2.5 »;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));

————————-

J’ai une erreur 500 quand je le rentre dans la page blog (là ou j’aimerais intégrer une like box facebook), je pense que j’intégrer pas au bon endroit mon code, mais je sais pas ou le rentrer ?

    Aude de Gouville Auteur de l'article

    Bonjour Skynet,
    Quel est le plugin que vous utilisez ?

    Pour le code à insérer dans le fichier ‘function.php’ de votre thème, il ne faut pas juste recopier le code, il faut lui indiquer ce qu’il faut en faire en créant une fonction qui va lui dire à quel endroit se placer et s’activer (function theme_enfant_footer_script). Copiez-collez TOUT le code que j’ai mis dans l’article, de la ligne 3 (function… ) jusqu’à la ligne 18 (add action…). J’en ai d’ailleurs profité pour le mettre à jour (version 2.5).
    Placez ce code en-dessous de celui que vous avez déjà sur le ping seomix.
    Vérifiez qu’il y a bien la balise < ?php tout en haut du fichier function.php (normalement elle y est déjà, puisqu'il y a déjà du code). Ne pas la rajouter.

    Vérifiez que cette balise N'EXISTE PAS A LA FIN DU FICHIER : ?> Si elle existe, enlevez-la, ça bloque la lecture.

    Ensuite, allez sur la page de votre blog pour insérer la 2ème partie du code donné par Facebook (celui qui commence par la div class='fb-page'). Si vous voulez l'intégrer dans un article et pas dans un widget, Il faut pour ça être en mode "texte" et pas en mode "visuel". Repérez l'endroit où vous voulez placer la like box et copiez le code.

    J'espère avoir été suffisamment claire, n'hésitez pas à me demander des précisions. Bon courage !

Aude de Gouville Auteur de l'article

Bonjour Émilie,
quelques questions préalables pour vous répondre :
– si vous n’avez pas apparence -> éditeur, est-ce parce que vous avez une ancienne version de WordPress ?
– avez-vous créé un thème « enfant » comme expliqué plus haut ? L’avantage du thème enfant, c’est qu’on peut customiser le thème initial sans que les modifications soient perdues à chaque mise à jour du thème. Sinon il faudra refaire la manip à chaque mise à jour… Personnellement je déconseille de toucher aux fichiers originaux du thème !

Si vous ne pouvez pas accéder au fichier « fonction du thème » via apparence -> éditeur, il va falloir passer par FTP pour accéder au fichier functions.php, qui se trouve dans le dossier wp-content/themes/nom-du-theme-enfant (ou nom-du-theme si vous n’avez pas créé de theme enfant).

Si vous ne savez pas utiliser le FTP, normalement vous devriez aussi accéder à l’arborescence de votre site via votre hébergeur. Par exemple, sur 1&1, vous allez dans HEBERGEMENT -> GERER ESPACE WEB -> 1&1 WEBTRANSFERT. Du coup c’est l’occasion de créer un thème enfant si vous ne l’avez pas fait 🙂 Sinon, sauvegardez le code de Facebook dans un fichier à part ,sur votre ordi, et à chaque mise à jour de votre thème il faudra remettre ce code dans le fichier functions.php.

J’espère avoir répondu à vos questions, tenez-moi au courant.
Cordialement

Bonjour Aude et Merci pour ce tuto, en revanche je ne trouve pas le fichier function.php dans mon theme wordpress, je ne sais pas comment procéder (je n’ai pas Apparence –> Editeur). Pouvez-vous m’aiguiller ?? merci

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *