Comment mettre des likes sur ton blog ? 🎔

 

Comment mettre des likes sur ton blog ? 🎔

 D'après le super tutoriel de "No Tuxedo", un site web qui m'a permis d'installer un bouton "J'aime" et "Je n'aime pas" que vous pourrez voir en cliquant sur la barre "=" en haut à gauche à l'accueil de mon blog.

Donc n'hésiter pas à liker mon blog si vous aimer cet article. 

Je vous préviens tout de suite, le tuto ne sera pas simple au début, moi j'ai réussi après trois essais (mais en même temps j'étais toute seule à faire cela !)

Comment créer un bouton « J’aime » sur Blogger ? Un bouton non lié à Facebook, qui permettra simplement à vos lecteurs de vous laisser une trace de leur passage même s’ils n’ont pas le temps de poster un commentaire ?

Je vous propose, dans ce tutoriel, d’apprendre à installer « LikeBTN ». C’est un bouton très complet, disponible en 40 langues au choix, avec plus de 40 styles possibles (petit aperçu ci-dessous). Quand vous cliquez sur « J’aime », ça fait non seulement grimper le compteur de likes sur l’article mais ça propose aussi au lecteur de partager le post sur les réseaux sociaux.

LikeBTN, bouton J'aime sur Blogger – Les styles disponibles

Personnaliser son bouton J’aime

Commencez par aller sur le générateur de LikeBTN pour Blogger.

Dans le menu déroulant en haut de page, choisissez « FREE » qui correspond au bouton gratuit.

Vous avez ensuite accès à toute une série de menus en accordéon qui permet de paramétrer votre bouton.

Les réglages de base

La liste déroulante « Theme » permet de choisir le style du bouton J’aime. Le menu « Language » vous permettra de mettre le bouton en français, parmi d’autres langues disponibles. Vous pouvez également choisir le texte qui s’affiche pour liker le post et choisir un effet quand on clique sur le bouton. A tout instant, vous prévisualisez le bouton sur la droite de l’écran.

Attention : pour que le bouton fonctionne bien sur Blogger, la partie intitulée « Custom name » doit rester vide.

Générer le code du bouton J'aime sur Blogger

Si vous le souhaitez, vous pouvez en rester là. Il existe aussi des réglages plus approfondis.

Les réglages avancés du bouton J’aime

Si vous voulez aller plus loin dans la personnalisation du bouton J’aime sur Blogger, vous pouvez le faire à l’aide des autres menus disponibles sur la page. Regardons ensemble les plus intéressants.

Le menu Button Elements vous permet de choisir si vous affichez ou pas un texte sur les boutons (Show like/dislike label), si vous affichez ou pas les icônes de chaque bouton (Show like/dislike icon) et si vous affichez le bouton J’aime, le bouton Je n’aime pas ou les deux. Vous pouvez également afficher les boutons J’aime/Je n’aime pas l’un au-dessus de l’autre au lieu de les mettre sur la même ligne.

Le menu Voting permet de contrôler le comportement du bouton. « Allow voting » doit être activé pour permettre à vos lecteurs de voter. Vous pouvez ensuite les autoriser à annuler leur vote (Allow to cancel a vote), à aimer et ne pas aimer en même temps (Allow to like and dislike at the same time) et définir au bout de combien de secondes un lecteur peut voter à nouveau.

Le menu Counter définit l’affichage du compteur de votes, vous pouvez le montrer ou le cacher (Show votes counter) et en contrôler l’affichage (y a-t-il des séparateurs de milliers, la valeur 0 s’affiche-t-elle ?).

Le menu Popup vous permet de décider de la manière dont s’affiche le pop-up de partage sur les réseaux sociaux une fois qu’un visiteur a voté pour votre article : sa position, son style, sa largeur.

Le menu Sharing offre peu d’options en version gratuite mais vous permet de définir la taille des icônes de partage sur les réseaux sociaux (Share buttons size). La taille « large » permet d’avoir des icônes bien visibles pour chaque réseau.

Le menu Loading permet par exemple de charger le bouton seulement au moment où il s’affiche sur la page (« Lazy Load ») et non par défaut à l’ouverture de la page.

Le menu Texts permet de définir des textes personnalisés pour le Like Button… et de personnaliser par exemple le texte du bouton « Je n’aime pas » (Dislike button text).

Comment afficher le bouton J’aime sur Blogger ?

Maintenant que vous avez personnalisé votre bouton J’aime, vous obtenez un code (sous l’aperçu du bouton). Nous allons devoir l’ajouter à votre blog pour qu’il s’affiche sous chaque article !

Rendre le code compatible avec Blogger

Vous allez copier le code du bouton J’aime dans le Bloc-Notes de Windows (ou similaire) et y ajouter ces mots : expr:data-identifier='data:post.id'

A quel endroit les ajouter ? Juste après span class="likebtn-wrapper", en respectant bien les espaces comme en rouge sur mon exemple ci-dessous. Bien sûr, faites-le avec votre propre code.

<!-- LikeBtn.com BEGIN -->
<span class="likebtn-wrapper" expr:data-identifier='data:post.id' data-theme="mid" data-lang="fr" data-i18n_like="J'adore cet article" data-ef_voting="push" data-loader_show="true"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script>
<!-- LikeBtn.com END -->

Ajouter le code sur Blogger

Commencez par vous connecter à l’administration de votre blog puis cliquez sur « Thème » dans le menu de gauche et sur « Modifier le code HTML ». Tout le code qui contrôle l’affichage de votre blog apparaît à l’écran. Si vous n’êtes pas sûr de vous, pensez à en faire une sauvegarde pour pouvoir remettre en place votre blog facilement en cas d’erreur.

Recherchez sur la page cette ligne de code : <data:post.body/> (pour aller plus vite, vous pouvez faire Ctrl + F sur PC, ⌘ + F sur Mac puis entrer la ligne de code dans le champ de recherche qui s’affiche).

Il est possible qu’elle apparaisse plusieurs fois. Vous allez devoir afficher le code du bouton J’aime personnalisé juste après chacune des lignes <data:post.body/>. Voilà un exemple :

Afficher le code du bouton J'aime sur Blogger

Le bouton va s’afficher sur tous vos articles. Si vous souhaitez qu’il ne soit visible que lorsque l’article est affiché en pleine page, il faut modifier un peu le code en ajoutant les parties en vert comme sur l’exemple ci-dessous :

<!-- LikeBtn.com BEGIN -->
<b:if cond='data:blog.pageType == "item"'><span class="likebtn-wrapper" expr:data-identifier='data:post.id' data-theme="mid" data-lang="fr" data-i18n_like="J'adore cet article" data-ef_voting="push" data-loader_show="true"></span>
<script>(function(d,e,s){if(d.getElementById("likebtn_wjs"))return;a=d.createElement(e);m=d.getElementsByTagName(e)[0];a.async=1;a.id="likebtn_wjs";a.src=s;m.parentNode.insertBefore(a, m)})(document,"script","//w.likebtn.com/js/w/widget.js");</script></b:if>
<!-- LikeBtn.com END -->

Et hop, voilà le résultat :

Bouton Like sur Blogger

J’espère que ce tutoriel vous aidera !