Installation d’un pop up avec une Facebook like box [Blogger+WP]

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: 

<style>

/*
ColorBox Style:

*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*User Style:*/
#cboxOverlay{background:#ffffff;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(http://1.bp.blogspot.com/-TcJGMnSfOCY/TxrtzzHDLVI/AAAAAAAAFWc/mdndgrisRuA/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(http://1.bp.blogspot.com/-PPvu-446sn4/Txrt1QsGH1I/AAAAAAAAFWw/_jWYVoR1HX8/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(http://1.bp.blogspot.com/-31strss_1-E/Txrt1J6NThI/AAAAAAAAFWo/4P12CJPj924/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#F1F1F1;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#F1F1F1;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://1.bp.blogspot.com/-FiJ_Xz7txEg/Txrt0sy1TiI/AAAAAAAAFWk/Llzvkeyy_J8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Likebox Facebook popup Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,sans-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->


<div style='display:none'>

<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="http://i1262.photobucket.com/albums/ii617/cdlgraphicart/likeusfb_zpsb9a32bea.png" data-jpibfi-post-excerpt="" data-jpibfi-post-url="https://www.cdl-graphicart.com/installation-dun-pop-up-facebook-like-box/" data-jpibfi-post-title="Installation d’un pop up avec une Facebook like box [Blogger+WP]" data-jpibfi-src="http://i1262.photobucket.com/albums/ii617/cdlgraphicart/likeusfb_zpsb9a32bea.png" ></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/cdlgraphicart&width=300&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>

<div id="center">
Création par <a style="color: #3b78cd;" href="http://cdl-graphicart.com/BLOG">Graphic'art</a> | <a style="color: #3b78cd;" href="http://wp.me/p4uSO6-94">Ajouter ce gadget</a> 
</div>

</div>

</div>

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

Cliquez sur « get code » 

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