Mettre le Bouton Twitter sur son Site

Comme je vous l’annonçais, Twitter lance son bouton Tweeter pour partager rapidement du contenu sur le réseau social. Voici quelques explications ou devrais-je dire lignes de code pour intégrer le bouton Tweeter sur son site web. Le bouton Twitter peut être insérer sur un site de 3 manières différentes, en utilisant du code Javascript, iFrame ou avec une ligne de code HTML personnalisée.

Par défaut, les liens partagés en utilisant twitter.com/share utilisent http://t.co pour effectuer la réduction d’URL.

Afin d’aider nos amis français pas très à l’aise avec l’anglais, voici une traduction-adaptation des explications de Twitter. (voir la page Tweet Button)

Codes pour Installer le Bouton Tweeter

Bouton Tweeter Javascript

Un joli bouton Tweet sur son site et le tout en Javascript ! Voici une façon simple et rapide d’intégrer le bouton Tweet sur votre site en utilisant simplement quelques lignes de code Javascript et une ancre HTML pour la page. Vous pourrez paramètrer et personnaliser le bouton en jouant sur les données attributs (data) ou les données supplémentaire de l’hyperlien (le « query string » : ?url=twoutils.com&via=twoutils).

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<a href="http://twitter.com/share" class="twitter-share-button">Tweet</a>

Ce qui donne :

Exemple de code pour le Bouton Tweeter configuré avec les attributs data :

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://www.twoutils.com"
data-via="twoutils"
data-text="Mettre le Bouton Twitter sur son Site"
data-related="twitter,twitfond"
data-count="vertical"
data-lang="fr">Tweeter</a>
</div>

Exemple de code pour le Bouton Tweeter configuré avec le query string :

<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
<div>
<a href="http://twitter.com/share?url=http%3A%2F%2Fwww.twoutils.com&amp;via=twoutils>Tweet</a>
</div>

Bouton Tweeter iFrame

Certains préfèreront l’iFrame qui permet d’afficher dans un cadre sur une page le contenu d’une autre page web. Voici donc le code iFrame pour insérer le bouton Tweet sur son site internet, le code pouvant être personnalisé en modifiant les requêtes query string.

<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3A%2F%2Fdev.twitter.com"
style="width:130px; height:50px;"></iframe>

Bouton Tweeter Personnalisé

Vous pouvez également choisir de mettre le bouton Twitter que vous voulez sur votre site, par exemple Twitter en propose des sympas dans sa section goodies (noir, bleu ou blanc). Voici donc la simple ligne de code HTML pour personnaliser son bouton comme bon lui semble :

<a href="http://twitter.com/share" target="_blank" rel="external"><img src="http://twitter-badges.s3.amazonaws.com/twitter-a.png" /></a>

Ce qui pourra donner par exemple ce type de bouton :

Le bouton pourra être paramètré avec le querystring.

Exemple de Bouton Twitter Personnalisé :

<style type="text/css" media="screen">
#custom-tweet-button a {
display: block;
padding: 2px 5px 2px 20px;
background: url('http://twitter-badges.s3.amazonaws.com/twitter-a.png') left center no-repeat;
border: 1px solid #ccc;
}
</style>
<div id="custom-tweet-button">
<a href="http://twitter.com/share?url=http%3A%2F%2Fwww.twoutils.com"
rel="external"
target="_blank">Tweet</a>
</div>

Tutorial pour Paramètrer le Bouton Tweeter

Valeurs paramètrables du Bouton Tweeter

C’est avec cette méthode qu’il est possible de configurer et personnaliser les 3 types de bouton (Javascript, iFrame et HTML personnalisé). Voici donc les différentes valeurs « query string » pour l’URL http://twitter.com/share pouvant être configurées. Si la valeur pour le query string n’est pas renseignée, alors le bouton Tweet utilisera la valeur par défaut de la page web.

Paramètre	Description
url	URL de la page à partager
via	Nom d’utilisateur à qui attribuer le tweet
text	Texte du Tweet par défaut
related	Comptes rattachés
count	Position du compteur
lang	Langage (fr,de,es,ja)

 

Personnalisation du Bouton Tweet en Javascript

Le tableau suivant montre les attributs que vous pouvez personnaliser pour les boutons Javascript. Le Javascript du bouton applique ces attributs dans un ordre définit. Par exemple, en determinant l’URL à utiliser, le Javascript :

1. utilisera l’URL dans le querystring du lien (http://twitter.com/share?url=http%3A%2F%2Fwww.twoutils.com)
2. sinon, il utilisera l’attribut du data-url de la balise <a> (<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.twoutils.com">)
3. sinon, il utilisera la valeur de la balise méta rel="canonical" dans l’en-tête du codage
4. sinon, il utilisera l’URL de la page.

Source	Ordre	URL à tweeter	Nom d’attribution (@twoutils)	Texte du Tweet	Comptes rattachés	Position du compteur
« query string »	1	url	via	text	related	count
data- attribut d’une balise	2	data-url	data-via	data-text	data-related	data-count
rel= attribut d’un lien	3	rel="canonical"	rel="me"
Par Défaut	4	URL de la page		Contenu de la balise : title		horizontal

 

Choisir la Position du Compteur du Bouton Tweeter

Les chiffres du compteur qui peut être situé à côté du bouton Tweet ou au dessus de celui-ci, correspondent au nombre de fois que l’URL de la page a été publiée sur Twitter (tweets publics). Vous avez également la possibilité de ne pas faire apparaitre le compteur. Voici les différentes valeurs à donner au paramètre count :

count=	none	horizontal	vertical
Résultat	Tweet	Tweet	Tweet

 

Si vous n’attribuez pas de valeur au paramètre count pour votre bouton Tweet, c’est la valeur par défaut qui se met c’est-à-dire le bouton avec le compteur horizontal. Les valeurs données ci-dessus sont à attribuer au paramètre count dans l’URL pour les query string et à définir pour data-count dans le cas des attributs en Javascript.

Articles Complémentaires :

1. Twitter lance son Bouton de Partage « Tweeter »
2. Le bouton « Actualiser » devient « Tweeter » sur Twitter

Tagué comme : Bouton, HTML, iFrame, Installer, Javascript, Partager, Tweet