J’ai réalisé une page web permettant d’afficher mes dernières activités sur les réseaux sociaux Twitter, Instagram et Soundcloud. Il est aussi utilisable en l’état par n’importe qui sans aucune programmation pour peu que vous preniez le temps de faire un peu de configuration (voir en fin de l’article).

Remarque: c’est un projet minute sans aucune ambition, juste pratique pour moi et ma famille

Social timeline

Motivations

Comme beaucoup de mamans, la mienne aime à avoir de mes nouvelles. Souvent, quand je partage des photos sur les réseaux sociaux, je lui envoie aussi par sms ou mail. Mais parfois, j’oublie. Fils indigne! Et comme elle n’a pas autant de comptes sociaux que moi (Instagram, Twitter, Foursquare/Swarm, …), elle ne peut pas en profiter.

J’ai remédié à ça en faisant une page web regroupant toutes mes activités « publiques » de façon automatique, avec un minimum d’effort.

Ce que fait la timeline sociale

La timeline permet d’afficher vos derniers twitt, vos photos publiées sur Instagram et les derniers favoris ajoutés sur Soundcloud.

Je n’ai pas eu le temps de l’élargir à d’autres réseaux ni d’afficher d’autres actions (retweet, favori instagram, ou tout autre chose provenant de Facebook, Dribble, …) mais il serait vraiment très simple d’en rajouter. (depuis j’en ai rajouté un tout petit peu).

Démo en ligne »

De plus cette page web ne coûute rien à son usage: ni base de données, ni hébergement… Lisez l’explication technique pour découvrir comment.

Comment est faite la timeline

Les données en provenance des réseaux sociaux sont enregistrées automatiquement via IFTTT, et aggrégées dans un fichier Google Spreadsheet que j’utilise comme base de données.

La page web charge ensuite la feuille Google Drive au format json, et alimente la timeline avec un rendu adapté en fonction du type de source (twitter, soundcloud, instagram…). Bien entendu, ce chargement en javascript ne permet pas de faire du référencement. Ça tombe bien, je n’en n’ai pas besoin. Mais si je devais le faire, le fichier JSON serait parsé par un script serveur (node, php, …).

Le site est en responsive (mobile first), la compatibilité front a été testée uniquement sur chrome et Safari pour l’heure – toujours dans le cadre d’utilisation de ma maman.

Comment utiiser la timeline avec vos comptes sociaux.

Pour l’utiliser avec vos comptes sociaux et avoir votre propre timeline :

  • Créer une feuille Google Drive
    • nommez la « timeline » et copiez son contenu à partir de ce modèle
    • publiez là pour la rendre accessible en lecture par le site web et notez son ID (voir cet mon article pour plus d’info).
  • Connectez vous sur IFTTT et utiliser une ou plusieurs des recettes
  • Visualisez votre propre timeline en vous rendant sur l’url http://tilap.github.io/social-timeline/?spreadid=[ID DE VOTRE FEUILLE GOOGLE ICI]

Ce projet a été réalisé en moins de 58 minutes, sans ambition. Vous êtes libres de réutiliser ce projet et son code source sous license MIT.

Mises à jour

07/06/2015:

  • Ajout de l’affichage depuis un flux RSS. La recette IFTTT est disponible ici.
  • Ajout de l’affichage de check-ins foursquare/Swarm. La recette IFTTT est disponible ici.