SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 171 visiteurs en ce moment

Accueil > Documentation > Tutoriels pour webmasters > Ajouter un lien vers twitter avec une URL raccourcie (bit.ly)

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

22 février 2010 – par k3utchi – 14 commentaires

14 votes

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour 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

CSS (à adapter)

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.

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

Zip - 497 octets
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.

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.

Dernière modification de cette page le 22 février 2010

Retour en haut de la page

Tout afficher

Vos commentaires

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Import ICS 2 (agenda distant)

    2 août – 35 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • Newsletters

    16 janvier 2013 – 374 commentaires

    Ce plugin permet de composer des Info-lettres. Par info-lettre, on désigne ici le contenu éditorial qui va être composé et envoyé par courriel à une liste d’inscrits. Le plugin permet de composer une info-lettre à partir d’un modèle pré-composé, (...)

  • CKeditor 3.0

    4 octobre 2009 – 1217 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • GIS 4

    11 août 2012 – 1284 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • SPIPr

    23 mars 2015 – 75 commentaires

    SPIPr est à la fois une famille de squelettes et un framework pour le développement front avec SPIP. Prêt à l’emploi, thémable, responsive, et conçu dans une approche d’industrialisation et de développement rapide. Documentation source : (...)

Ça spipe par là