Comment mettre en place une fenêtre contextuelle avec une boîte similaire pour Fanpage sur Blogger
Les pages Facebook offrent un monde de possibilités aux créateurs de contenu. C’est un moyen de se connecter avec la communauté et si vous utilisez Blogger, vous pouvez mettre une fenêtre contextuelle sur votre blog pour que vos abonnés aiment votre page de fans.
Avantages d’avoir une Fanpage
Une Fanpage peut rassembler des personnes ayant les mêmes goûts et préférences. En plus d’offrir la possibilité aux abonnés de certains types de contenu d’ avoir une communication plus directe avec les clients .
Votre entreprise ou votre marque personnelle aura une plus grande visibilité et vous aurez également la possibilité de vous positionner dans un réseau social de portée mondiale. Sans oublier que c’est une excellente option pour envoyer du trafic vers votre blog et mener des campagnes de marketing digital.
Créer un pop-up blogueur avec la page Facebook est une tâche facile en quelques clics.
Comment mettre une page de fan comme un pop-up sur Blogger
- Connectez-vous à votre compte Google et accédez à Blogger à partir du bouton Applications Google. Sélectionnez l’option Conception dans le menu et choisissez l’option Ajouter un gadget.
- Une nouvelle fenêtre s’ouvre dans laquelle vous devez sélectionner l’ option HTML / JavaScript .
- Il y a une nouvelle fenêtre où le code doit être placé dans la zone de contenu . Le champ de titre peut être laissé vide et vous pouvez choisir s’il est visible ou non.
<script src = ‘http: //ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js’ type = ‘text / javascript’> </script>
<style>
#fanback {
display : rien;
arrière-plan: rgba (0,0,0,0,8);
largeur: 100%;
hauteur: 100%;
position: fixe;
haut: 0;
gauche: 0;
indice z: 99999;
}
# fan-exit {
largeur: 100%;
hauteur: 100%;
}
#JasperRoberts {
arrière-plan: blanc;
largeur: 420px;
hauteur: 270px;
position: absolue;
haut: 58%;
gauche: 63%;
marge: -220px 0 0 -375px;
-webkit-box-shadow: encart 0 0 50px 0 # 939393;
-moz-box-shadow: encart 0 0 50px 0 # 939393;
boîte-ombre: encart 0 0 50px 0 # 939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
rayon de la bordure: 5px;
marge: -220px 0 0 -375px;
}
#TheBlogWidgets {
float: right;
curseur: pointeur;
arrière-plan: url (http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/s1600/TheBlogWidgets.png) répéter;
hauteur: 15px;
rembourrage: 20px;
position: relative;
padding-right: 40px;
margin-top: -20px;
marge droite: -22px;
}
.remove-borda {
hauteur: 1px;
largeur: 366px;
marge: 0 auto;
arrière-plan: # F3F3F3;
marge supérieure: 16px;
position: relative;
marge gauche: 20px;
}
# linkit, # linkit a.visited, # linkit a, # linkit a: hover {
color: # 80808B;
taille de la police: 10px;
marge: 0 auto 5px auto;
float: centre;
}
</style>
<script type = ‘text / javascript’>
// <! [CDATA [
jQuery.cookie = function (clé, valeur, options) {
// clé et au moins valeur donnée, définir cookie…
if (arguments .length> 1 && String (valeur)! == «[objet objet]») {
options = jQuery.extend ({}, options);
if (valeur === null || valeur === non définie) {
options.expires = -1;
}
if (typeof options.expires === ‘nombre’) {
var jours = options.expires, t = options.expires = new Date ();
t.setDate (t.getDate () + jours);
}
valeur = chaîne (valeur);
return (document.cookie = [
encodeURIComponent (clé), ‘=’,
options.raw? value: encodeURIComponent (valeur),
options.expires? ‘; expires =’ + options.expires.toUTCString (): », // utilisation expire l’attribut, max-age n’est pas pris en charge par IE
options.path? ‘; path =’ + options.path: »,
options.domain? ‘; domain =’ + options.domain:»,
options.secure? ‘; secure ‘: »
] .Join (»));
}
// clé et éventuellement options données, récupère le cookie…
options = valeur || {};
var result, decode = options.raw? fonction (s) {return s; }: decodeURIComponent;
return (result = new RegExp (‘(?: ^ |;)’ + encodeURIComponent (clé) + ‘= ([^;] *)’). exec (document.cookie))? décoder (résultat [1]): null;
};
//]]>
</script>
<script type = ‘text / javascript’>
jQuery (document) .ready (function ($) {
if ($. cookie (‘popup_user_login’)! = ‘yes’) {
$ ( ‘#fanback’). delay (15000) .fadeIn (‘medium’);
$ (‘# TheBlogWidgets, # fan-exit’). click (function () {
$ (‘# fanback’). stop (). fadeOut (‘medium’);
});
}
$ .cookie (‘popup_user_login’, ‘yes’, {path: ‘/’, expire: 7});
});
</script>
<div id = ‘fanback’>
<div id = ‘fan-exit’>
</div>
<div id = ‘JasperRoberts’>
<div id = ‘TheBlogWidgets’>
<div class = ‘remove-borda’>
</div>
<iframe allowtransparency = ‘true’ frameborder = ‘0 ′ scrolling =’ no ‘src =’ // www.facebook.com/plugins/likebox.php?
href = http://www.facebook.com/gatosgraciososHD & width = 402 & height = 255 & colorscheme = light & show_faces = true & show_border = false & stream = false & header = false ‘
style =’ border: none; débordement caché; margin-top: -19px; largeur: 402px; height: 230px; ‘> </iframe> <center>
<span style = »couleur: # a8a8a8; font-size: 8px;» id = »linkit»> Propulsé par <a rel = »nofollow» style = »couleur: # a8a8a8; font-size: 8px;» href = »http://jasperroberts.com»> Jasper Roberts Consulting </a> – <a style = »color: # a8a8a8; font-size: 8px;» href = »http://www.theblogwidgets.com»> Widget </a> </span> <
Recherchez le code www.facebook.com/gatosgraciososHD et remplacez-le par le lien de votre page de fans . Si vous avez des connaissances en HTML, vous pouvez même modifier l’apparence et l’heure exacte à laquelle la notification doit être affichée . C’est une modification qui ne prendra pas plus de cinq minutes et donnera un aspect professionnel à votre blog .
