Installer une likebox facebook sur son blog

installer likebox facebook sur son blog

Installer une likebox facebook sur son blog

 

Les réseaux sociaux sont des outils très importants à exploiter pour votre blog (exploiter oui, mais exploiter correctement, pour avoir plus de détails veuillez vous rendre sur cet article « Quelques pistes pour bien commencer un blog »). 
C’est pour cela que nous allons utiliser la puissance de l’un des géants des réseaux sociaux, à savoir FACEBOOK.
Avec plus de 802 millions d’utilisateurs réguliers, Facebook peut être d’une aide considérable concernant la promotion de vos articles, de votre blog en général et donc d’augmenter votre traffic.

Dans ce tutoriel, nous verrons donc comment installer une Facebook like box sur son blog, de manière assez simple et rapide.
Ce tutoriel est valable et a était testé sur blog wordpress & blogger. (je vous montrerai donc un petit détail pour les deux plateformes.)
Si vous en êtes encore à l’étape :
eeeeehh c’est quoi une likebox?
c’est simplement une petite boîte Facebook reliée à votre page fan qu’on retrouve souvent sur les blogs / sites, elle permet d’afficher l’actualité, de développer l’audience de sa page grâce au bouton « j’aime » enfin plein de trucs quoi, c’est un peu un indispensable :-)

Pour vous monter à quoi ressemble cette like box, voici un exemple de celles installées sur mon blog :

 

Le popup qui s’affiche à l’ouverture de mon blog

 

Pour la likebox dans mon pied de page, vous pouvez voir qu’on ne voit pas les visages des personnes qui aiment, c’est simplement car je ne voulais pas surcharger mon pied de page, à la place, on peut voir un petit compteur.

Pour celle présente dans mon pop up (un pop up est une fenêtre secondaire qui s’affiche au dessus de la page de navigation principale, technique très utilisée dans la pub) , elle comporte les visages des utilisateurs qui aiment la page du blog, vous avez aussi la possibilité d’afficher les publications de votre page dans cette likebox, je vous montrerai toutes les possibilités afin que vous puissiez personnaliser votre likebox au mieux.

Pour commencer ce tuto, nous allons nous rendre directement sur la page consacrée aux outils pour developpeurs de Facebook en cliquant ICI.

 

Vous allez rentrez l’url de la page Facebook de votre blog dans « Facebook page URL » et vous verrez en temps réel une likebox avec la page Facebook de votre blog.

« Color scheme » vous permet de personnaliser la couleur (soit noir, soit blanc)
« Show friends face » permet de montrer ou non le visage des personnes qui aiment votre page facebook
« Show header » permet de laisser l’en tête Facebook avec écrit « Rejoignez nous sur Facebook! », vous pouvez très bien l’enlever.
« Show border » permet d’activer ou non les bordures de la likebox, personnellement j’ai tendance à les enlever.
« Show posts » c’est là que vous choisissez ou non de montrer ce que vous publiez sur votre page Facebook.

Pour connaître la taille de sa sidebar et adapter les dimensions de sa likebox

« Width » et « Height » permettent de gérer les dimensions de la likebox, faites très attention avec ça, car il y a beaucoup de blogs qui ne connaissent pas les dimensions de leurs sidebar et donc qui la gère mal (des pubs qui débordent de la sidebar par exemple), pour cela il existe un petit outil tout simple qu’utilise les developpeurs web et c’est FIREBUG pour firefox téléchargeable ici. Une fois sur la page de votre blog, il vous suffira de cliquer sur la petite bestiole en haut à droite de votre navigateur firefox, une fenêtre s’ouvrira avec le code source de votre page, il vous faudra cliquer sur le deuxième bouton en haut à droite, il ressemble à cela :   firebug

vous pourrez ensuite sélectionner l’élément dont vous voulez connaître la taille (dans notre cas votre sidebar), puis cliquez sur l’onglet apparence comme ci dessous. Vous aurez alors vos dimensions (moi j’avais sélectionné ma bannière)

 

Capture d’écran 2014-07-13 à 13.21.51Petit aparté terminé, pour en revenir à notre tutoriel pour installer sa likebox Facebook, une fois votre personnalisation au point et les dimensions de votre sidebar découvertes, vous n’avez plus qu’à inclure ces dimensions pour votre likebox.

installer Facebook like box

cliquez sur « get code » en bas à gauche de votre fenêtre likebox

Facebook like box

et une fenêtre avec le code de votre likebox apparaitra comme ceci :

Gardez les DEUX morceaux de code de côté (sur un éditeur de texte par exemple) et nous allons procéder à l’installation de ce dernier sur un blog wordpress (en suite je vous montrerai pour blogger, même si le principe reste le même pour les deux)

BLOGS WORDPRESS

Rendez vous dans Apparence > Widgets (ou gadgets pour ceux qui sont en wp.com)

Dans votre sidebar, placez un widget Texte, le widget ressemble à ceci :

text html wordpress

Puis copier / coller l’intégralité du code donné par Facebook dans le widget, c’est à dire les DEUX  morceaux comme ceci :

code Facebook widget wordpress

 

 

Cliquez sur « Enregistrer » et voilà, votre likebox apparaîtra dans votre sidebar!

BLOGS BLOGGER

C’est le même principe que pour WordPress, mais au cas où je vous montre en image :)

Rendez vous dans votre administration blogger, puis « mise en page » dans le menu de gauche.
Une fois arrivé dans votre mise en page, « ajouter un gadget » dans votre sidebar (barre de droite du blog)
Une nouvelle page s’ouvrira avec les différents gadgets, choisissez le gadget « HTML / javascript »

gadget blogger

Tout comme sur wordpress, copier / coller l’intégralité du code donné par Facebook dans le gadget, c’est à dire les DEUX morceaux comme ceci :

code Facebook gadget blogger

Cliquez sur enregistrer, puis sur enregistrer la disposition dans la page de la mise en page

blogger enregistrer la disposition

 

 

Et voila! que vous soyez sur wordpress ou sur blogger, vous devriez avoir réussi à installer votre Facebook like box en cinq petites minutes, pas vrai? 

J’attends vos petits retours et vous dit à très bientôt !

 

 

17 Commentaires
  • Needs and Moods

    22 juillet 2014 at 14 h 46 min Répondre

    Ça y est Charlène!! De mon côté, tout fonctionne parfaitement! =D
    Je vais jeter un œil à tes tutos.
    Des bisous, et bonne journée! ♥

    • graphicart

      22 juillet 2014 at 14 h 55 min Répondre

      Oh je suis super contente, tout semble être résolu alors et pour tout le monde en plus c’est vraiment top! Merci beaucoup pour ta participation en tous cas! A très bientôt bonne après-midi a toi

  • […] mais cette fois ci, mes chouchous WordPress, je ne vous délaisse pas!  Après avoir parlé de l’installation d »une Facebook like box sur vos blogs, je vais vous parler aujourd’hui de l’installation d’un pop up avec […]

  • Just βε Mine

    7 août 2014 at 17 h 27 min Répondre

    Coucou Charlène!
    Je viens te montrer ma nouvelle like box, qui grâce à toi à été crée en 5min.
    Merci beaucoup! De toute manières, j’adore tout ce que tu fais.
    A très vite.
    http://the-justbemine.blogspot.fr/

    • graphicart

      7 août 2014 at 17 h 38 min Répondre

      Super! dans la même thématique j’ai aussi crée un gadget pour l’insérer en pop up sur blogger et wordpress ^^ merci pour ton passage et à bientôt!

  • […] Installer un menu « image » en 5 minutes Supprimer la navbar sur blogger Créer une likebox Facebook pour son blog Installation d’un pop up avec une Facebook like box Une date en forme de rond sur […]

  • Egali-mère

    13 octobre 2014 at 13 h 16 min Répondre

    Et une like box installée en 5 minutes, une !
    Merci pour le tuto très simple d’accès.

  • […] Installer un menu « image » en 5 minutes Supprimer la navbar sur blogger Créer une likebox Facebook pour son blog Installation d’un pop up avec une Facebook like box Une date en forme de rond sur blogger […]

  • Mademoiselle Latinne

    30 janvier 2015 at 10 h 46 min Répondre

    A merci, génial ! Je cherchais désespérément comment toutes les blogueuses avaient mis en place cette mini fenêtre ! Ton blog est super bien fait avec pleins d’astuces qui m’aident beaucoup.
    Des bisoux, ML

  • Mélina & Chocolat

    2 mars 2015 at 13 h 49 min Répondre

    Merci merci ça m’a beaucoup aider!! :)

  • lili

    31 mars 2015 at 15 h 34 min Répondre

    Bon et bien j’ai voulu tenter, mais d’après ce que je comprend sur Facebook developers la like box est supprimée à partir du 23 juin. Je ne trouve aucune info concernant son remplacement. Bizarre, non ?

  • Anaïs

    17 avril 2015 at 20 h 08 min Répondre

    Coucou ! Pour ma part ça ne marche pas car facebook me dit que cette version va être supprimée en juin, et du coup ils me proposent le Page Plugin, mais ça ne marche pas bien quand jecolle le code dans le pluggin texte, en fait ça ne me met pas l’image, juste le titre et en cliquant dessus on arrive sur ma page facebook. Tant pis :(

    • graphicart

      27 avril 2015 at 19 h 50 min Répondre

      Hello! oui en effet la likebox Facebook comme celle ci va disparaître et être remplacée, il faut donc que je re fasse le tuto! :)

  • asciena

    25 avril 2015 at 18 h 13 min Répondre

    J’essaye d’insérer une like box en pop sur mon blog mais je n’y arrive pas Help lol

  • Helcuisine

    16 juillet 2015 at 10 h 45 min Répondre

    Merci beaucoup pour tous tes tutos. J’adore

  • Chloé

    26 août 2015 at 21 h 43 min Répondre

    Merci pour ce billet ! J’ai installé ma likebox en 2 secondes grâce à ça !!! Top !!! Je suis contente du résultat et j’ai appris quelque chose ! Merci encore !!!

Poster un commentaire