Pop up Facebook like box sur Blogger et WordPress

Pop up Facebook like box sur Blogger et WordPress

Bon j’avoue qu’en ce moment vous avez vu pas mal d’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!  je vais vous parler aujourd’hui de l’installation d’un pop up avec une Facebook like box afin de promouvoir votre page fan facebook sur votre blog!

Suite à des changements de facebook, ce tutoriel à été mis à jour, testé et approuvé en MAI 2018, tout devrait donc être à nouveau fonctionnel 🙂

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: 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'></script>
<style>
#popupFbLikeBox {display:none;position:fixed;background:rgba(0,0,0,0.7);height:100%;width:100%;left:0;top:0;z-index:99999;}
#popupArea {position:absolute;background:white;height:270px;width:auto;left:63%;top:58%;border-radius: 5px;margin:-220px 0 0 -375px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#popupClose{text-align:right;padding:10px;position:relative;cursor:pointer;background: linear-gradient(#eee, #fff);border-top-left-radius: 5px;border-top-right-radius: 5px;color:#000;}
#popupClose:hover{color:red;}
.fbLikeboxArea {margin:0 auto;width:366px;height:1px;margin-top:16px;margin-left:20px;position:relative;}
@media only screen and (max-width: 500px) {
#popupArea{left:63%;top:58%;margin:-220px 0 0 -250px;}
.fb-like-box,.fb-like-box span,.fb-like-box span iframe[style]{width: 100% !important;}}
</style>
<script>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);if (value === null || value === undefined) {
options.expires = -1;}if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '',
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));}
//get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;};
//]]>
</script>
<script>
jQuery(document).ready(function($){
if($.cookie('logedin_user') != 'yes'){
$('#popupFbLikeBox').delay(2000).fadeIn('medium');
$('#popupClose').click(function(){
$('#popupFbLikeBox').stop().fadeOut('medium');
});
}
$.cookie('logedin_user', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='popupFbLikeBox'>
<div id='popupArea'>
<div id='popupClose'>X
</div>
<div class='fbLikeboxArea'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/cdlgraphicart/&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>

Enregistrez votre gadget, puis Enregistrez la disposition ! 

RESULTAT 

 Ajouter votre propre lien

Pour personnaliser votre pop up et mettre votre propre page Facebook en lien il vous suffit de remplacer le texte en bleu  tout à la fin dans le code, ici, c’est la ligne suivante: https://www.facebook.com/cdlgraphicart

WORDPRESS

Passons maintenant à wordpress :

1. Rendez vous dans votre interface d’administration puis cliquez sur Extensions > Ajouter
2. Recherchez l’extension « Facebook page promoter lightbox » puis l’installer et l’activer
3. A présent rendez vous dans Extensions installées et trouvez l’extension puis cliquez sur « Réglages »
4. Ajouter votre lien de page facebook et configurez l’extension comme ceci :

Vous pouvez personnaliser l’affichage en réglant la fréquence d’apparition dans « show once every », chez moi elle est réglée à 5, c’est à dire que l’utilisateur verra mon popup toutes les 5 jours sur ma page d’accueil (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)

J’ai activé le « overlay click » ce qui permet à l’utilisateur de cliquer à côté du pop up pour le fermer simplement, afin que celui ci ne soit pas non plus trop intrusif.

RESULTAT 

Voila, à vous de jouer! dites moi si vous l’avez installé que j’aille jeter un coup d’oeil 🙂

EnregistrerEnregistrer

EnregistrerEnregistrer