
Installation d’un pop up avec une Facebook like box [Blogger+WP]
Bon j’avoue qu’en ce moment vous avez beaucoup vu des articles destinés à la plateforme blogger (oui j’ai tout plein de choses à dire encore!) mais cette fois ci, utilisateurs de 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 cette Facebook like box justement!
Ce tuto sera décomposé en deux parties, une première pour les utilisateurs de la plateforme blogger (encore une fois, un copier/coller et vous aurez fini votre popup), puis un seconde partie destinée aux utilisateurs wordpress.org (évidemment puisque nous allons parler plugin)
Alors d’abord un pop up c’est quoi hein?
C’est tout simplement une fenêtre qui surgit par dessus votre fenêtre de navigation principale, le pop up apparait parfois (même souvent) sans avoir était sollicité par l’utilisateur. Vous savez hein, ces pubs qui vous gavent, qui apparaissent sur fond transparent quand vous surfez sur le net? c’est plus ou moins ça, sauf que dans la pub, le pop up est utilisé de manière très intrusive, jouant même avec les codes visuels en proposant parfois une croix pour fermer, mais qui nous amène évidemment sur le site en question (oui vous connaissez ça aussi hein? et la tu les détestes!)
Dans notre cas, on va utiliser ce petit outil très gentiment afin de ne pas gaver vos lecteurs (non ce n’est pas le but!), je vous expliquerai à la fin comment utiliser votre pop up avec parcimonie…
Et puis, pourquoi je devrais installer ce popup ?
Tout simplement car cela permettra de promouvoir votre page Facebook et donc de faire connaître l’existence de celle ci à vos lecteurs, de ce fait vous pourrez augmenter facilement votre audience et vos nombres de « likes » sur votre page
BLOGGER
1. Rendez vous dans votre interface d’administration Blogger.
2. Dans la bar de menu de gauche allez dans Mise en page > puis ajoutez un gadget HTML/JAVASCRIPT (dans votre sidebar par exemple)
Collez y le code suivant:
Enregistrez votre gadget, puis Enregistrez la disposition !
RESULTAT
PERSONNALISER VOTRE POP UP
Pour personnaliser votre pop up et mettre votre propre page Facebook en lien il vous suffit de remplacer le texte en violet dans le code, ici, c’est la ligne suivante:https://www.facebook.com/cdlgraphicart
Et si vous voulez modifier la couleur qui apparaîtra en transparence derrière votre pop up (celle qui vient « griser » la navigation principale, ici c’est du blanc) vous n’avez qu’à remplacer le code de couleur bleu au début du code par votre propre couleur, c’est la ligne : #ffffff
NB: Merci de ne pas enlever la mention d’attribution et le lien vers l’acquisition du gadget en bas du popup.
LIMITER L’EFFET INTRUSIF DU POPUP
Grâce à un cookie (fichier texte très simple qui s’enregistre sur le disque dur de vos ordinateurs contenant les informations de navigations et vos préférences sur certains sites web) le gadget popup est enregistré dans l’ordinateur de l’internaute, ce qui nous permet de régler la fréquence d’apparition du gadget, dans le code que je vous ai fourni, la fréquence du popup est réglé à une apparition tous les 7 jours.
WORDPRESS
Passons maintenant à wordpress :
1. Pour commencer referez vous au tutoriel « créer une Facebook like box » que j’ai précédemment fait en vous arrêtant à l’étape de récupération du code dans la fenêtre « get code »
2. Rendez vous dans votre interface d’administration puis cliquez sur Extensions > Ajouter
3. Recherchez l’extension Simple Popup Manager puis l’installer et l’activer
4. A présent rendez vous dans Extensions installées et trouvez l’extension puis cliquez sur « Réglages »
5. Cochez la case « activer la popup » et « ajouter un bouton de fermeture » (afin de permettre à l’utilisateur de gérer un minimum le popup)
Vous pouvez personnaliser l’affichage en réglant la couleur de fond intermédiaire (celle qui viendra griser la fenêtre principale, chez moi c’est du rose par exemple), ainsi que la fréquence d’apparition dans la « durée du cookie », chez moi elle est réglée à 4, c’est à dire que l’utilisateur verra mon popup tous les 4 jours (c’est ici qu’il faut utiliser le réglage avec parcimonie, vous pouvez le configurer à 7 afin que les internautes voient le popup une fois par semaine)
Vous pouvez aussi en régler les dimensions, et c’est ici que nous allons régler le « contenu » du popup en y ajoutant la likebox facebook
Nous allons donc y ajouter le code généré par Facebook lors de la création de votre likebox
la fenêtre avec votre code s’ouvre, récupérez le code SDK javascript
Ici, ça risque d’être un peu compliqué en fonction du thème wordpess que vous utilisez, mais je vais essayer de vous expliquer le plus clairement possible de manière à ce que vous puissiez l’adapter à votre propre thème.
1. Rendez vous dans Apparence > éditeur
2. Sélectionnez votre fichier « En tête » header.php
3. A l’aide d’un ctrl/cmd + F recherchez « body«
4. Vous n’aurez peut être pas une simple balise , personnellement j’ai une fonction php > qui attribut une classe au body en fonction du type de page/article
Essayez d’identifier l’ouverture de votre section « body » et coller y le code JavaScript juste en dessous, voila ce que ça donne chez moi :
N’oubliez pas d’enregistrer les modifications.
Pour ajouter la like box à votre pop up, rendez vous dans les réglages du plugin (normalement réglages > réglages popup) et coller y le deuxième code HTML généré par « page plugin » sur facebook comme ci dessous :
Je vous conseille de décochez la case suivante (qui fera en sorte que l’utilisateur pourra cliquer en dehors du pop up pour le fermer, cela limite à nouveau l’effet trop intrusif…) avant d’enregistrer les modifications :
Un exemple de ce que vous pouvez obtenir, avec le pop up que j’ai créé pour le blog :
Voila, à vous de jouer! dites moi si vous l’avez installé que j’aille jeter un coup d’oeil
EDIT du 14/08/2015 : Article mis à jour suite au changement de la likebox facebook
dion isabelle
19 août 2014 at 3 h 16 minVoilà je l’ai installé, pourrais-tu me dire si ça fonctionne ou pas svp et merci pour le code c’est super
graphicart
19 août 2014 at 6 h 10 minoui ça fonctionne très bien
Mlle Lénie
23 août 2014 at 10 h 40 minMerci et bravo pour le code, super simple à installer! Merci de jeter un coup d’œil.
graphicart
23 août 2014 at 12 h 30 mincela fonctionne très bien 😉
My BeautyScope
3 septembre 2014 at 8 h 34 minMerci pour ce super tuto, depuis le temps que je cherchais à installer ce type de gadget! MERCI! Ton blog est une mine d’or!
graphicart
3 septembre 2014 at 18 h 08 minmerci beaucoup à toi
swaallow
3 septembre 2014 at 21 h 44 minCoucou, voilà je l’ai installé, peut tu me dire si cela marche ? Et comment changer le nombre de jour ?
graphicart
4 septembre 2014 at 18 h 51 minsalut !
il fonctionne très bien 😉
swaallow
4 septembre 2014 at 19 h 39 minComment puis je changer le nombre de jour à la place de 7 jours ?
graphicart
6 septembre 2014 at 18 h 35 minDans le code fifteenDays = 1000*60*60*24*7; il faut changer le « 7 » qui défini ici les 7 jours
swaallow
7 septembre 2014 at 12 h 54 minCela ne marche pas quand je met « 0 » pour qu’il s’affiche tout le temps ( ce que je modifierai par la suite ) mais c’est plus simple pour voir les modifications que l’on en fait de suite.
graphicart
7 septembre 2014 at 16 h 29 minOui alors pour cela, je ne sais pas avec quel navigateur tu es? mais il te suffit simplement de désactiver les cookies sur ton navigateur, cela permet d’afficher à chaque fois ton popup…
Saskia B.
5 septembre 2014 at 13 h 04 minSuper merci 😀
https://darkside-of-fashion.blogspot.fr
Saskia! xo
Mel's way of life
16 septembre 2014 at 16 h 43 minJe l’ai installé, il est vraiment top !!
Merci !!
graphicart
16 septembre 2014 at 19 h 02 minil fonctionne très bien sur ton blog
Le carnet de Lou
24 septembre 2014 at 16 h 37 minParfaiiiit ! tu es géniale ! J’ai même trouvé comment l’agrémenter pour qu’il soit un peu plus en accord avec mon blog wordpress ! Bisous
graphicart
25 septembre 2014 at 9 h 30 minavec plaisir
je suis allée voir, tu l’as bien personnaliser, il est très joli comme ça ^^
FanFDAFrance
1 décembre 2014 at 18 h 51 minBonjour,
Je viens d’installer le pop-up en suivant votre tutos mais cela ne marche pas sur mon blog Blogger ? Seriez-vous pourquoi ?
Merci
Dji
19 décembre 2014 at 11 h 12 minCette article est juste génialissime !!!!! MERCI BEAUCOUP !
Oui j’ai installé le gadget 😉 adresse du blog : http://audyfhn.blogspot.fr/
Merci encore et bonne continuation !!!!
A Shot of Beauty
16 janvier 2015 at 12 h 31 minMerci beaucoup pour ce tuto !!
Je l’ai installé sur mon blog et j’ai liké ta page Facebook du coup
graphicart
16 janvier 2015 at 12 h 42 minsuper ! merci
pense à retirer la navbar de ton blog, c’est dommage de la laisser 
et aurelie alors
28 janvier 2015 at 14 h 32 minMerci pour cette astuce ! Par contre, il n’y a pas moyen de changer le texte je pense ? Moi ce serait plutôt « rejoignez moi sur Facebook », je suis toute seule 😉
Bon aprèm
laumake-up
6 février 2015 at 10 h 15 minmerci pour cette article avec lequel j’ai pu installer une fenetre pop up
merci beaucoup
Zina
7 février 2015 at 14 h 21 minTu es géniale, merci !! ça faisait un moment que je cherchais ce gadget mais que je ne trouvais pas !
Je vais prendre un peu le temps de fouiller un peu ton site que je ne connaissais pas, j’ai l’impression que je vais y trouver pleins d’idées sympas et utiles
Sarah Gms
18 février 2015 at 9 h 21 minMerci beaucoup
Je les installer je ne sais pas si il marche :/
graphicart
22 février 2015 at 18 h 40 minBonjour, si il fonctionne très bien, il faut désactiver les cookies pour le voir à chaque fois
Typhanie
22 février 2015 at 16 h 13 minBonjour, j’aimerais utiliser ce pop up sur blogger mais quand je le met ça met ta page facebook et j’arrive pas a changer pour mettre la mienne. Comment faire ?
graphicart
22 février 2015 at 18 h 40 minBonjour, il faut changer cette ligne là https://www.facebook.com/cdlgraphicart et y coller l’url de votre fan page à la place.
Gabrielle
23 février 2015 at 12 h 27 minMerci pour ce tuto miss! Ton blog est top, je m’en vais de ce pas liker ta page facebook 😉 Bonne semaine à toi!
Hillo
24 février 2015 at 16 h 54 minMerci beaucoup grâce à toi mon blog est équipé et je compte bien faire deux trois trucs via tes conseils. Bises
http://hillohoffman.blogspot.fr/
Camille Perazzi
27 février 2015 at 8 h 07 minCoucou !
Merci beaucoup pour ce tutoriel, cependant en l’activant j’ai une fenêtre qui s’affiche encore derrière … Je ne sais pas comment remédier ! C’est peut être à cause de mon thème wordpress ?
Merci
Evangeline
10 mars 2015 at 16 h 09 minMerci pour cette petite pop-in, elle est vraiment top. Je l’ai installée ici : http://evangelines-corner.blogspot.fr/
Ludivine Moon
19 mars 2015 at 11 h 31 minUn grand merci pour ce pop up ! Cela faisait un bon moment que je cherchais a en installer un mais impossible de mettre la main dessus. Donc, encore merci !
Des bisous,
Ludivine Moon
peregrinationgourmande
22 mars 2015 at 21 h 36 minBonjour merci pour ce tuto très clair. J’ai un problème avec la création du code par facebook. Je n’ai pas du tout le même visuel. Je n’obtiens pas du tout les onglets html, iframe, url. J’obtiens un truc bizarre incomprehensible. Avez vous déjà rencontré ce problème? Merci de votre aide. cathy
graphicart
14 août 2015 at 17 h 01 minBonjour Cathy,
C’est normal, la version du plugin facebook a changée entre temps, l’article à été mis à jour, à présent il faut ajouter un morceaux de code JavaScript dans le fichier header.php de votre thème (après l’ouverture de la balise body) puis, ajouter le contenu de la likebox dans l’extension simple pop up manager (code 2. fourni par facebook, deuxième encadré lorsque l’on clique sur le bouton get the code)
J’espère vous avoir aidé.
Bonne soirée,
Charlène.
Majdoubi
27 mars 2015 at 19 h 32 minet bon vous êtes tout simplement magnifique. grand merci.
lola
12 avril 2015 at 23 h 12 minhello, perso ca ne marche pas, la page est différente et je ne vois nulle part un truc iframe :/
Pinklychee
13 avril 2015 at 7 h 52 minMerci pour ce petit gadget super sympa!
Il y a 2-3 trucs super sympas et utiles que je pense utiliser également du coup ^^
Anne est Vernie
18 avril 2015 at 17 h 26 minMerci pour ce gadget bien pratique pour la novice que je suis. Il y a beaucoup de choses super utiles et intéressantes sur ton blog. Merci de partager avec nous tes connaissances.
Noor
28 mai 2015 at 10 h 47 minBonjour
Vous dites » Pour personnaliser votre pop up et mettre votre propre page Facebook en lien il vous suffit de remplacer le texte en violet dans le code, ici, c’est la ligne suivante:https://www.facebook.com/cdlgraphicart »
Mais je n’ai pas compris cette étape : je ne vois pas le texte en violet
Pouvez-vous me l’indiquer svp ?
Merci
PaulineDouceur
30 mai 2015 at 11 h 07 minDepuis le temps que je le cherchais !
Merci beaucoup, trop facile en plus.
Merciiiiii ! ♥
Alli'
8 juin 2015 at 19 h 52 minComment fait-on si on est sur Weebly ?
Julytoseptember
13 juin 2015 at 18 h 10 minMaintenant facebook n’affiche plus que 2 options quand on met « get the code »: Include the SDK JavaScript on your page once, ideally right after the opening tag.
ou
Place the code for your plugin wherever you want the plugin to appear on your page.
Je ne sais pas comment faire rien ne marche :/
julytoseptember
14 juin 2015 at 21 h 00 minYep, même remarque que les filles, la like box de facebook a changé … Donc plus rien ne marche!
graphicart
14 août 2015 at 16 h 57 minHey, désolée pour le retard, Plugin testé / approuvé et article mis à jour aujourd’hui.
Charlotte
25 juillet 2015 at 17 h 52 minMERCI beaucoup pour ce super tuto, j’en cherchais un comme ca depuis longtemps, je suis totalement novice pour tout ce qui est HTML et tout ^^ Est-ce que tu aurais la gentillesse d’aller voir si je l’ai installé comme il faut? Quand je vais sur mon blog moi-même il n’apparait pas. Merci encore <3
Cha
graphicart
12 août 2015 at 14 h 10 minHey! désolée pour le retard de réponse, je viens de vérifier, il ne semble pas être installé, rien n’apparait. Par contre, tu as un chat canon!
à bientôt
Emeline
12 août 2015 at 16 h 02 minHello ! Super tuto mais même problème comme facebook a changé sa like box et bien impossible maintenant de mettre le code dans l’extension.
J’ai seulement réussi à la mettre dans ma sidebar en mettant le SDK javascript dans le header et le code html dans mon head.php
Mais pour la pop-up tu aurais une solution ?
Merci d’avance !
Emeline
12 août 2015 at 16 h 03 minOups rectification.. SDK dans le header.php et le code html dans le texte html des widgets de la sidebar
graphicart
14 août 2015 at 16 h 56 minBonjour Emeline,
Je viens de mettre l’article à jour, j’espère que tu trouveras ta réponse dans l’article.
Bonne soirée.
Emeline
11 septembre 2015 at 16 h 06 minHello ! Merci d’avoir actualisé tout ça

Cela ne marche toujours pas chez moi… je ne comprend pas
Bonne soirée!
graphicart
11 septembre 2015 at 16 h 20 minBonjour, tu es en version gratuite de wordpress?
Swaallow
19 août 2015 at 10 h 36 minSuper tuto ! Le voici sur mon blog :
http://swaallow.com/
Emeline
12 septembre 2015 at 22 h 32 minOui, je crois que le soucis me vient de l’extension TinyMCe c’est possible ?
Cela me met ça : Notice: wp_editor() est appelé avec un argument qui est déprécié depuis la version 3.9 ! TinyMCE editor IDs cannot have brackets. in /home/emyjolieht/www/wp-includes/functions.php on line 3508
Juste à côté de « Contenu de la pop-up »
merci d’avance pour ton aide
QueenC
1 septembre 2015 at 14 h 56 minMerci beaucoup pour ce tuto ! ♥ C’est parfait, ça fait notre promo sans être soulant !
Moi j’ai un soucis mais je pense que c’est mon thème, c’est que les onglets de mon menu s’affichent à travers la pop-up. C’est gérable tu penses ?
Voici le lien : http://myspiritmyworld.blogspot.fr/
Chercherousse
1 octobre 2015 at 17 h 26 minJe viens de tomber sur ton article qui m’a beaucoup aidé depuis le temps que je galerais a installer une pop up, maintenant cela marche (en tout cas ça à l’air)
Je vais partir à la découverte de ton blog qui à l’air super intéressant et super bien fait !
Bonne journée et merci encore
Mélanie
Esnault
3 octobre 2015 at 9 h 05 minMerci beaucoup pour cette application ! C’est vraiment une très bonne idée que je n’aurais pas pu concrétiser toute seule.
Bonne continuation
Victoria Ruthven
5 octobre 2015 at 17 h 16 minHello, je viens d’installer le plugin mais je n’ai pas du tout l’impression qu’il fonctionne : je viens de retourner sur mon blog après m’être déconnectée et avoir supprimé l’historique et rien n’apparaît. Pourrais-tu jeter un œil pour me dire si ça fonctionne? Sinon, merci quand même pour tes tutos, j’ai particulièrement adoré le générateur d’articles au hasard ; )
graphicart
6 octobre 2015 at 11 h 06 minNe fonctionne pas apparemment :/
Mymy
6 octobre 2015 at 17 h 11 minSuper enfin un tuto clair ! J’avais du mal à ajouter la partie « sdk javascript » …
Merci beaucoup cela fonctionne
Emeline
10 octobre 2015 at 17 h 08 minHello ! Excuse moi finalement tout va bien ça marche ! Il fallait juste que je me mette en navigation privée pour que je vois la fenêtre pop-up… !! Une amie m’a prévenue du coup que chez elle ça apparaissait !
Merci pour tout
Bernard Déborah
5 décembre 2015 at 23 h 28 minMerci beaucoup pour cet article très bien expliqué ! Malheureuseument, chez moi ça ne marche pas et je ne sais pas pourquoi
J’ai essayé avec plusieurs navigateurs, sous windows et sous mac, et j’ai bien une fenêtre popup qui s’ouvre mais avec juste un carré blanc Avec écrit le nom de ma page Facebook et le reste est vide… J’ai essayé de placer le code un peu partout derrière le « body » mais rien ne change… Voilà ce que j’ai comme balise de base :
tc_head_display()
do_action( ‘__before_body’ );
?>
<body >
J’ai installé mon code généré par Facebook ici pour que ça soit comme toi, puis j’ai ensuite essayé un peu partout… :
<body
(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&appId=208562739227731 »;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
>
Un grand merci pour le temps que tu prends !
Déborah
Bets Book
9 décembre 2015 at 7 h 08 minCette box me plaît, parce que le fond est blanc. Les autres, c’est tout noir. Moi, quand j’arrive sur un site, je n’aime pas voir du noir. Merci donc.
Thomas
14 janvier 2016 at 22 h 49 minSuper merci pour ce petit code java. De plus j’aime beaucoup le fait d’avoir reguler l’apparition a 7 jours top merci !
Isisya
25 janvier 2016 at 16 h 36 minGénial, ça a l’air de fonctionner par chez moi
Merci beaucoup pour tout tes supers tutos !!!!
Iris
6 février 2016 at 16 h 47 minCc ! Ton tuto est très clair est marche très bien mais j’ai un problème : je ne suis pas sur Facebook ! J’aimerai juste une fenêtre pop up avec où je mettrai un message de bienvenue et au début : me rejoindre sur Google + et sur Hellocoton. En gros j’aimerais juste savoir le code Html juste de « fenêtre pop up ».
PS : encore une demande. Comment tu as fait pour mettre les images…
A bientôt !
Anabelle
29 avril 2016 at 15 h 28 minSupêr merci! Est-ce que ca marche? lol
Merci encore!
Tresor Dux
13 juin 2016 at 9 h 54 minMerci beaucoup pour le tutoriel, super intéressant !!!
Tissam
2 juillet 2016 at 12 h 23 minCoucou et merci pour ce tuto ! 😀
J’ai mis la likebox sur mon site, peux-tu me dire si ça fonctionne? Je n’arrive pas à le voir même en retirant les cookies
Mon blog est http://www.tissamestla.com 😉
Merciiii !
Tissam ♥
Junior
30 novembre 2016 at 11 h 08 minslt merci pour ce code je vois que beaucoup l’ont apprécié, moi également mais sans l’avoir testé. Par contre je voudrais l’installer sur mon site web càd l’inclure dans ma page d’accueil mon index.php. comment devrais-je appliquer ce code ??? merci