Le bouton "J'aime" de Facebook, configuration pour Blogger, validé HTML5.Se place en-dessous ou au-dessus de chaque message ou dans un gadget HTML/JS.
3 formats : sur une ligne, compteur vertical, compteur horizontal.
Aime le message, la page courante, le blog ou une autre url.
Avec url canonique.
Profils, langue, police, action, largeur, alignement, etc.
Présentation du bouton
Configuration du bouton
Le script
Version gadget "Add to Blogger" Mise à jour 15/03/2013 !
Divers : OpenGraph Protocol
Divers : Réglages du bouton
Divers : Tableau des dimensions
Divers : Informations complémentaires
Quelques autres modules Facebook
Présentation du bouton
| Format | Version "Light" / "J'aime" | Version "Dark" / "Recommander" |
|---|---|---|
| Standard Sans profil |
||
| Standard Avec profils |
||
| Bouton compteur |
||
| Boîte compteur |
||
| Sans compteur |
Haut de page
Configuration du bouton
<div class="fb-like" expr:data-href="data:post.canonicalUrl" data-layout="standard" data-action="like" data-colorscheme="light" data-width="300" data-show_faces="false"/>
| Où copier ce code ? |
|---|
| Tableau de bord ► Modèle ► Modifier le code HTML ► Gadget Blog1 |
| Déployez les sections suivantes : |
|---|
| <b:widget id='Blog1' locked='true' title='Messages du blog' type='Blog'>...</b:widget> |
| <b:includable id='post' var='post'>...</b:includable> |
| Recherchez dans l'inclusion "post" | |
|---|---|
| Emplacements | A copier juste après (au choix) |
| Entête du message Entre le titre et le message | <div class='post-header-line-1'> |
| Pied du message Ligne 1 | <div class='post-footer-line post-footer-line-1'> |
| Pied du message Ligne 2 | <div class='post-footer-line post-footer-line-2'> |
| Pied du message Ligne 3 | <div class='post-footer-line post-footer-line-3'> |
Haut de page
Le script
<div id='fb-root'/>
<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/all.js#xfbml=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Pour que le bouton devienne fonctionnel, vous devez recopier le script ci-dessus dans le code HTML du blog juste après la balise
<body .....>.Ce script est compatible avec tous les modules officiels Facebook. Si vous en avez déjà installé un autre dans votre modèle, vous n'êtes plus obligé d'ajouter à nouveau ce script.
Haut de page
Version gadget "Add to Blogger"
Si vous n'avez pas réussi a installer le module ci-dessus, vous pouvez essayer la version "Add to Blogger".Selon le type de page, le bouton partagera :
| Type de la page | URL Partagée |
|---|---|
| Index | L'url du blog |
| Archive | L'url du blog |
| Item | L'url de la page courante |
| Page statique | L'url de la page courante |
Après l'avoir ajouté sur votre blog, vous pourrez changer les paramètres (format, action, etc).
Note : Le module est en français.
Haut de page
Divers : OpenGraph Protocol
Afin de mieux contrôler l'affichage des éléments sur Facebook, recopiez les codes ci-dessous.
Si vous préférez personnaliser, rendez-vous sur la fiche :
Si vous préférez personnaliser, rendez-vous sur la fiche :
- Compléter la balise
<html ....>.
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://opengraphprotocol.org/schema/'
- Ajouter des balises
<META>juste après<head>:
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
</b:if>
Haut de page
Divers : Réglages du bouton
| Attributs | Valeurs | Signification |
|---|---|---|
| send | true (vrai) false (faux) | Bouton "envoyer" |
| layout | standard (standard) button_count (bouton compteur) box_count (boîte compteur) | Format du bouton |
| show_faces | true (vrai) false (faux) | photos des profils |
| action | like (J'aime) recommend (Recommander) | Nomination du bouton |
| colorscheme | light (blanc) dark (noir) | Themes de couleurs |
| font | arial lucida+grande segoe+ui tahoma trebuchet+ms versana | Police de caractères |
Haut de page
Divers : Tableau des dimensions
| types de bouton | largeur (width) | hauteur (height) |
|---|---|---|
| standard | Mininum : 225px Default: 450px | Sans photo : 35px Avec photos: 80px |
| button_count | Sans "Send": 90px Avec "Send": 165px | 20px |
| box_count | 55px | Sans "Send": 65px Avec "Send": 85px |
Haut de page
Divers : Informations complémentaires
- Facebook developers - Like button
Haut de page
< > " '