Documentation sur les boutons de partage

Survol


Cette documentation est pour les développeurs qui désirent contrôler l'apparence des contenus de leur site lorsqu'ils sont publiés sur Tumblr à l'aide du bouton de partage.

Pour ajouter un bouton de partage sur votre site, commencez par visiter notre générateur de boutons.

Bouton de base


Sur les pages qui contiennent le JavaScript de notre bouton de partage (ci-dessous), le bouton de partage est simplement une balise d'ancrage avec la classe tumblr-share-button:

<a class="tumblr-share-button" href="https://www.tumblr.com/share"></a>
<script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>

Note : si vous avez plusieurs boutons de partage sur votre page, vous n'avez besoin d'inclure le JavaScript qu'une seule fois, idéalement avant le tag de fermeture </body>.

Billets par défaut

Par défaut, les boutons de partage génèrent soit des billets photo, soit des billets lien en fonction des méta balises Open Graph qu'ils trouvent sur votre page. Vous pouvez toutefois configurer le type de billet que vous voulez (voir les instructions ci-dessous). Voici les options par défaut :

  • Billet photo.  Le bouton de partage générera un billet photo s'il trouve la balise og:image avec une image d'au moins 500 pixels de largeur, avec des proportions de moins de 3:1. Il utilisera la balise og:description pour la légende du billet.
  • Billet lien. Le bouton de partage créera un billet lien s'il ne trouve pas une image appropriée pour créer un billet photo. La balise og:title sera utilisée pour le titre, og:description pour la légende et l'adresse web canonique deviendra l'adresse du billet lien.

Configuration du contenu des billets


Si vous voulez que le bouton de partage serve à créer un type de billet précis, vous pouvez le faire en choisissant parmi les options suivantes. Elles peuvent être configurées en tant qu'attributs de données sur la balise d'ancrage du bouton ou dans les paramètres de la chaîne de recherche dans l'adresse web de l'attribut href du bouton.

OptionDescriptionAttribut de donnéesParamètre de la chaîne de recherche
Type de billetType de billet Tumblr. Les options valables sont : texte, photo, lien, citation, discussion ou vidéodata-posttypeposttype
TagsListe de tags séparés par des virgulesdata-tagstags
TitreUtilisé avec les types de billet texte, lien et discussiondata-titletitle
ContenuLe contenu principal du billet variera selon le type de billet que vous utilisez. Un billet photo comprendra l'adresse web d'une photo et un billet citation, la citation.

Pour en savoir plus, consultez le contenu de billet par type ci-dessous.
data-contentcontent
LégendeUtilisé avec les billets photo, lien, vidéo et citation.data-captioncaption
SourceInclure ou non la source dans le corps d'un billet qui indique "via"data-show-viashow-via

Contenu de billet par type


Texte
data-title : titre du billet texte
data-content : corps du billet texte

Photo
data-content : l'adresse web d'une photo ou la liste des adresses des photos d'un diaporama (séparées par des virgules).
data-caption : légende d'un billet photo.

Citation
data-content : la citation.
data-caption : la source de la citation (auteur et citation).

Lien
data-title : titre du billet lien.
data-content : adresse cible du lien.
data-caption : description du lien.

Discussion
data-title : titre du billet discussion.
data-content : corps du billet discussion (ce que les personnes disent).

Vidéo
data-content : l'adresse web ou le code d'intégration de la vidéo.
data-caption : légende du billet vidéo.

Configuration des boutons


Vous pouvez configurer le style de votre bouton de partage avec ces attributs de données de la balise d'ancrage du bouton :

OptionValeurs possiblesPar défaut
data-colorbleu
noir
blanc
bleu
data-notesen haut
à droite
aucun
aucun

Adresse web canonique


Pour que le décompte des notes s'affiche et fonctionne correctement, vous devez fournir l'adresse web canonique de la page. Le bouton de partage tentera de la retrouver dans ces endroits et dans cet ordre :

PrioritéSource des données
1L'attribut data-href de la balise d'ancrage du bouton
2Élément du lien canonique
3L'élément méta og:url
4L'adresse web de la page

Si vous créez un bouton personnalisé (voir ci-dessous), vous devez placer l'adresse web canonique dans la chaîne de recherche, en plus du contenu du billet. Par exemple :

http://tumblr.com/widgets/share/tool?canonicalUrl=http://cats.com

Bouton personnalisé


Vous pouvez personnaliser complètement l'apparence d'un bouton pour qu'il soit assorti à votre site. Pour cela, créez un bouton personnalisé qui affiche une page avec cette adresse web https://www.tumblr.com/widgets/share/tool et transmettez l'information de tous les contenus de billet comme étant des paramètres de chaîne de recherche, tel qu'expliqué précédemment. L'outil de partage se redimensionnera automatiquement pour cadrer avec le contenu du billet. Nous vous recommandons d'ouvrir une fenêtre de 540 x 600 pixels.

Décompte des notes

Il est possible d'afficher le décompte des notes sur un bouton personnalisé. Vous pouvez faire que l'adresse web de votre page passe par le point de terminaison des outils statistiques de notre API, et récupérer le décompte de notes. Voici un exemple :

http://equipe.tumblr.com/tagged/nouveautes

De votre côté, assurez-vous de mettre la réponse en cache et de retourner la chercher après environ 10 minutes. Tumblr met en cache le décompte des notes pour les adresses web partagées durant 10 minutes.

Langue du bouton


Vous pouvez localiser votre bouton avec la balise data-locale sur la balise d'ancrage du bouton. Tumblr prend en charge les langues suivantes :

LangueValeur locale
Anglaisen_US
Allemandde_DE
Françaisfr_FR
Italienit_IT
Japonaisja_JP
Turctr_TR
Espagnoles_ES
Russeru_RU
Polonaispl_PL
Portugaispt_PT
Portugaispt_BR
Néerlandaisnl_NL
Coréenko_KR
Chinois (simplifié)zh_CN
Chinois (traditionnel)zh_TW