De nos jours, des millions de personnes passent un temps considérable sur Facebook. Par conséquent, partager vos articles sur ce réseau social constitue un moyen incontournable pour améliorer votre visibilité et augmenter la fréquentation dans votre blog .
Dans ce tutoriel, je vous propose deux procédures pour créer et ajouter votre page de fans Facebook ou Facebook Likebox dans votre blog Blogger. Ainsi, les visiteurs pourront aimer et partager votre page sans avoir à quitter votre blog.
Cette stratégie vous permettra de développer votre popularité, d'augmenter vos nombres de « Likes », et d'atteindre une nouvelle audience grâce au partage. En effet, plus la page est partagée, plus elle générerait des clics potentiels.
La première méthode consiste à ajouter votre page Facebook dans la barre latérale ou dans le pied de page sous la forme d'un gadget Blogger. Elle sera visible sur toutes vos pages. Les visiteurs pourront ainsi aimer et partager votre page Facebook avec un simple clic sans quitter votre blog. Le visuel ressemblera à ça :
Dans la deuxième méthode, votre page de fans apparaitra sous forme de fenêtre pop-up devant la fenêtre de navigation principale de votre blog lorsque le visiteur y accède pour la première fois. L'objectif étant de l'inciter à aimer votre page Facebook.
Le rendu final de la fenêtre pop-up ressemblera à ça :
Sans plus tarder, passons au tutoriel pratique.
Créer un gadget Facebook Likebox sur Blogger
Vous pouvez insérer votre nouveau gadget soit dans la barre latérale ou dans le pied de page de votre blog.
1. Connectez-vous à votre compte Facebook et copiez l'adresse URL de votre page de fans. Ça ressemble à ça : https://www.facebook.com/votrenomdepage
Voici par exemple l’adresse de ma page de fans Facebook
https://www.facebook.com/universblogger
2. Rendez-vous ensuite à la page de plugins Facebook en cliquant sur le lien suivant : https://developers.facebook.com/docs/plugins/page-plugin
3. Dans le champ "URL de page Facebook", collez l'adresse URL de votre page de fans ou remplacez simplement Facebook avec le nom de votre page de fans comme ceci : https://www.facebook.com/votrenomdepage
En défilant vers le bas, vous pouvez constater les changements directement dans la boîte de prévisualisation.
4. Dans le champ "Onglets", saisissez :
- "timeline" si vous souhaitez afficher votre journal de publications
- "events" pour afficher les évènements
- "messages" pour afficher les messages.
Si vous laissez le champ "Onglets" vide. Votre gadget à l'image ci-dessus.
5. Personnalisez ensuite la hauteur et la largeur de votre Facebook Likebox dans les champs largeur et hauteur.
6. Enfin, cochez ou décochez les champs suivants selon vos propres besoins :
- Afficher les visages de vos amis
- Masquer la photo de couverture
- Adapter la largeur de la Likebox à la zone de gadget.
Une fois que le résultat vous convient, cliquez sur le bouton bleu "Obtenir le code" et suivez les étapes d'intégration de votre Facebook Likebox dans la section qui suit.
Insérer la page de fans Facebook dans un gadget Blogger
1. Connectez-vous à Blogger
2. Cliquez sur "Thème"> "Modifier le code HTML"
Rappel : avant d'entamer toute modification du code HTML de votre thème, je vous conseille vivement d'enregistrer une copie de votre thème. Si vous ne savez pas comment procéder, cliquez ici.
3. Dans la barre de recherche, cherchez la balise suivante </body>. Collez ensuite le premier code "JavaScript SDK " juste au-dessus de </body>
4. Maintenant, copiez le deuxième code qui figure dans "Step 3". On va le coller dans un gadget HTML/JavaScript à l'endroit où l'on souhaite voir s’afficher notre Facebook Likebox. Généralement, c'est soit dans la barre latérale ou dans le pied de page.
5. Dans votre tableau de bord, cliquez sur le menu "Mise en page" et ensuite sur "Ajouter un gadget". Défilez vers le bas jusqu’au gadget HTML/JavaScript, puis sélectionnez-le.
6. Collez le deuxième code à l'intérieur et cliquez sur "Enregistrer"
7. Visualisez les résultats dans un nouvel onglet. Votre Facebook Likebox devrait apparaitre dans la barre latérale ou dans le pied de page selon l'emplacement que vous avez choisi lors de l'intégration de votre gadget Blogger.
Ajouter une fenêtre pop-up Facebook Likebox à votre blog Blogger
Insérer le code JavaScript dans le code HTML de votre thème
1. Cliquez sur "Thème"> "Modifier le code HTML"
2. Cherchez la balise suivante </body>. Collez ensuite le code suivant de préférence juste au-dessus de </body> (vous pouvez l’insérer librement entre la balise <body> et </body>)
<div id="fb-root"></div>
<script>(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&appId=2453877004897332&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Facebook-jssdk'));</script>
IMG
3. Sur la ligne suivante :
js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&appId=2453877004897332&version=v2.0";
appId=2453877004897332 : changez ce numéro avec le numéro d'identification de l'application que vous avez créée préalablement sur la plateforme developers.facebook.com. Si vous ne possédez pas encore l'ID Facebook de votre blog, vous pouvez le créer facilement en quelques étapes en suivant ce tutoriel.
En effet, la création de cette application permettra de lier votre blog Blogger à votre page Facebook.
4. À la suite de ces modifications, enregistrez votre thème.
Créer un nouveau gadget et ajouter le code de personnalisation
1. Dans le menu à gauche de l'écran, cliquez sur "Mise en page". Cliquez ensuite sur "Ajouter un gadget" dans la section barre latérale ou dans le pied de page.
2. Défilez vers le bas jusqu’au gadget HTML/JavaScript, puis sélectionnez-le.
3. Dans le gadget HTML/JavaScript, collez le code ci-dessous puis enregistrez :
<style scoped='' type='text/css'>
#likebox-fb {display:none;background:rgba(1, 20, 74, 0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#likebox-close {width:100%;height:100%;-webkit-transform:translateZ(0);}
#likeboxvu {position:absolute;top:33%;left:37%;border-radius:3px;}
#likeboxvfr {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;}
#likeboxvfr:before {content:"X";padding:5px 8px;background:#f42403;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#likebox-link a.visited,#likebox-link a,#likebox-link a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Paramètres des cookies
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() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
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 type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup-fb') != 'yes'){
$('#likebox-fb').delay(2000).fadeIn('fast');
$('#likeboxvfr, #likebox-close').click(function(){
$('#likebox-fb').stop().fadeOut('fast');
});
}
$.cookie('popup-fb', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='likebox-fb'>
<div id='likebox-close'>
</div>
<div id='likeboxvu'>
<div id='likeboxvfr'>
</div>
<div class='fb-page' data-href='https://www.facebook.com/universblogger' data-width='340' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:339px;height:200px;'></div>
</div>
</div>
Sur la ligne :
<div class='fb-page' data-href='https://www.facebook.com/universblogger'
Remplacez "universblogger" avec le nom de votre page Facebook : https://www.facebook.com/votrenomdepage
Ou vous pouvez simplement remplacer cette adresse URL avec celle de votre page Facebook.
Dans la ligne suivante : $('#likebox-fb').delay(2000).fadeIn('fast');
Plus précisément le code delay(2000) vous permet d'ajuster le délai avant l'apparition de la fenêtre pop-up. En effet, le chiffre 2000 correspond à 2 secondes. Si vous souhaitez par exemple retarder l'apparition de votre fenêtre pop-up Facebook à 5 secondes, remplacez le chiffre 2000 par 5000. 3 seconde, 3000...ainsi de suite.
4. Enfin, cliquez sur "Enregistrer" et visualisez les résultats.
Félicitations ! votre nouvelle page de fans Facebook est maintenant intégrée à votre Blog.
Vous pouvez choisir soit de fixer votre Facebook Likebox dans la barre latérale ou de la faire apparaitre dans une fenêtre pop-up qui s’activera automatiquement devant la fenêtre de navigation principale de votre blog.
Merci d'avoir pris le temps de lire ce tutoriel. N'hésitez pas à le partager sur les réseaux sociaux si vous jugez qu'il pourrait être utile pour d'autres personnes.