Ajouter un lien vers twitter avec une URL raccourcie (bit.ly)

This is an « educational contribution » which shows, with concrete example, how to develop a new functionality for SPIP.

Objectif : insérer sur chaque page un lien vers la page d’envoi de twitter en peuplant le tweet avec le titre de la page et une url raccourcie (avec bit.ly).

Si l’utilisateur est authentifié sur son compte twitter, il arrive directement sur la page d’envoi, le tweet est pré-complété avec la référence de la page et une adresse courte bit.ly. Sinon, il est d’abord invité à s’identifier.

Lien vers twitter

Il est facile d’insérer un lien vers la page de saisie d’un tweet, en passant dans l’url du lien l’adresse de la page qui servira à peupler le tweet.

<a rel="nofollow" href="http://twitter.com/home?status=Titre+de+la+page+http%3A%2F%2Fdomain.name%2Fpage">Tweet this page</a>

Le lien mène vers la page twitter de saisie d’un tweet, le tweet est pré-rempli de ce qu’on a fait passer dans status.

Notes
-  Pour les accents et les caractères spéciaux, prévoir un encodage compatible avec une url, d’où les % dans l’exemple.
-  On utilise l’attribut no follow pour ne pas fausser le référencement, et parce que les robots des moteurs n’envoient pas de tweets de toutes manières.

Avec SPIP, le contenu peut être généré par le squelette, les balises suivantes récupèrent le titre de l’élément actif (article, rubrique, mot, site) ou le nom du site à défaut, et l’url de la page active. Le filtre PHP urlencode() s’occupe de formater le tout.

<a href="http://twitter.com/home?status=[(#TITRE|sinon{#NOM_SITE_SPIP}|urlencode)]+[(#SELF|urlencode)]">Tweet this page</a>

Inséré dans un squelette, ce code génèrera la cible du lien à chaque calcul du squelette.

Avec un peu de css et en récupérant une image de bouton dans les goodies de twitter, on crée un joli lien.

HTML

<a rel="nofollow" class="tweetlink" href="http://twitter.com/home?status=[(#TITRE|sinon{#NOM_SITE_SPIP}|urlencode)]+[(#SELF|urlencode)]">Tweet this page</a>

CSS (à adapter)

.tweetlink {background: transparent url(mon.image.png) no-repeat 0 50%;padding-left:20px}

URL raccourcie avec bit.ly

La nécessité de tenir dans 140 caractères rend l’utilisation d’un service d’url courtes obligatoire dans les tweets.

bit.ly est un de ces services, et il propose une API pour entre autres générer des URL courtes à partir des longues qu’on lui soumet.

Première étape, il faut s’inscrire sur bit.ly pour disposer d’un compte et d’une clé (apiKey).

Le site bit.ly propose un wiki, où on trouvera toute la doc nécessaire pour utiliser l’API, ainsi que des exemples.

Nous allons utiliser un des exemples donnés quasiment tel quel : ApiExamples

Le principe est simple : lorsque notre lien de classe .tweetlink est cliqué, le navigateur le soumet à bit.ly pour obtenir une url courte, construit le tweet en ajoutant le titre de la page, et remplace le lien d’origine. Si javascript est désactivé, le lien généré par le squelette reste valable, mais propose une url non raccourcie.

Il faut être authentifié auprès de l’API de bit.ly, et disposer de jquery. Le code suivant doit être ajouté dans le <head>, en indiquant votre login et votre apiKey.

<script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=votre_login&apiKey=R_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>

Jquery est inclus aux dernières versions de SPIP, s’il n’est pas disponible on ajoute dans le <head> le lien suivant

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
js_tweetthislink.js
Nécessite jquery - source - ApiExample - bitly wiki

Ci-contre le script à placer en ligne. L’instruction jquery peut être déplacée au besoin.

Le script doit être appelé dans le <head> de la page.

<script type="text/javascript" charset="utf-8" src="js_tweetthislink.js"></script>

Personnalisation du script

L’exemple proposé construit le tweet en ajoutant devant l’url raccourcie le contenu de la balise <title> du document. On peut le modifier à loisir (notamment pour ajouter un texte fixe, un @utilisateur ou des #hashtags).

javascript vs php

On peut aussi récupérer l’url raccourcie en php, et l’inclure en dur sur chaque squelette généré, ce qui reviendrait à indexer systématiquement toutes les pages du site sur bit.ly. La solution javascript est basée sur les choix de l’utilisateur, et ne sont indexées que les pages qui auront suscité suffisamment d’intérêt chez le lecteur. bit.ly propose également un système de suivi des statistiques de chaque index créé, qui permet de voir en temps réel quelles pages sont les plus tweetées et quels liens sont suivis dans les tweets envoyés.

updated on 2 October 2019

Discussion

12 discussions

  • Elkharouf

    parfait le raccourci que j’attendais

    Reply to this message

  • Bonjour,

    Depuis deux jours j’aissai votre tuto, mais impossible d’avoir le résultat attendu, c’est a dire des URL Raccourcis.

    Quand j’essai dans une page neutre, c’est a dire hors spip cela fonctionne, mais dans spip 2.1 ncela ne fonctionne pas.

    J’ai URL entier qui s’affiche sur Twiiter.

    Reply to this message

  • Bonjour,

    Excusez moi, ma demande est un peu d’un autre ordre mais je tombe sur votre forum quand je tape “comment insérer un lien dans un nom twitter” , ce que je cherche à faire c’est simplement insérer le lien du compte d’une personne via son nom twitter : par ex: @pseudonyme qu’on puisse accéder à son compte directement en cliquant sur le lien sans avoir à faire ctrl+clic pour etre diriger vers la page. l

    Pouvez-vous m’expliquer quelle est la démarche à suivre, j’ai conscience que cela doit peut être bête à faire, mais je n’arrive pas à insérer un lien direct sur le nom d’un compte utilisateur.
    Je l’ai vu dans des mails pro sous cette forme @pseudonyme (souligné car c’est un lien + @ barré)

    Merci de votre aide !

    Kelly

    Reply to this message

  • Orpheusolaf

    Bonjour,

    Merci pour la contribution.

    J’ai essayé le code suivant (#SELF">Tweet this page.

    Le filtre urlencode corrige bien tous les espaces mais ne supprime pas les accents du texte, ce qui fait que twitter retourne le message d’erreur suivant : Invalid Unicode value in one or more parameters.

    Auriez-vous une idée me permettant de contourner ce problème?

    Grand merci d’avance

    Reply to this message

  • 1

    A noter que SPIP dispose nativement d’un système de raccourcis avec la syntaxe

    http://tld/id_article

    par ex. http://www.spip-contrib.net/4158.

    • A condition que l’hébergement accepte l’url rewriting et que le .htaccess de spip ait été installé.
      Sinon on peut toujours s’en sortir par http://tld/?articlexxxx où xxxxx est l’id de l’article. (valable notamment chez free qui n’offre pas l’url rewriting).

    Reply to this message

  • paillasson absorbant

    merci beaucoup

    Reply to this message

  • accessoires iphone 5

    Merci beaucoup ça marche bien ^^

    Reply to this message

  • référencement naturel

    Ca fonctionne bien merci beaucoup

    Reply to this message

  • Reply to this message

  • 1

    Sur l’espace ressources de twitter, on trouve le code suivant à insérer dans notre site.

    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    est ce que cela correspond à la même chose que ce que vous décrivez ici. Et surtout, quelqu’un peut-il expliquer à quel endroit précis, il faut insérer ce code ?

    • je renvoie le message complet :

      < a href="http://twitter.com/share“class=”twitter-share-button“data-count=”none“data-via=”moncomptetwitter“data-lang=”fr">Tweet

      <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom