En continuant à naviguer sur mon site, vous consentez à ce que j'utilise des cookies pour collecter les statistiques de visites. En savoir plus

#Informatique Développement du site Utopic Radio - Partie 4 : Partager le titre en cours de lecture

On clos le chapître audio pour le moment (le temps que je trouve de quoi faire un compresseur avec un sidechain valable), et on s'attaque plus aux fonctionnalités du site : ici, je détaille le fonctionne du partage du titre en cours de lecture, pour que tous vos auditeurs puissent déclarer publiquement à tous leurs contacts qu'ils écoutent votre radio… ou plutôt qu'ils écoutent une chanson qu'ils aiment, sur votre radio.

Ici, je ne détaillerai que les partages facebook et twitter, puisque ce sont les deux réseaux sociaux les plus utilisés. Et déjà on se trouve face à 3 problématiques :

  1. Qu'est-ce qu'on partage ? Comment faire pour afficher "la bonne" musique qui est en train d'être écoutée par l'auditeur ?
  2. Comment gérer les différents cas des réseaux sociaux qui n'ont pas les mêmes exigences, n'ont pas besoin des mêmes données pour le partage ?
  3. Comment passer outre le cache de ces réseaux sociaux ? Et pourquoi ?

Pour répondre à la première question, il faut d'abord rassembler toutes les données qui vont nous être utiles :

  • Le titre de la musique
  • L'artiste de la musique
  • La pochette d'album
  • Le nom du site
  • Le slogan du site
  • Le logo du site
  • Le nom du compte Twitter de la radio
  • L'URL à partager

Je pense que vous le sentez venir… oui, nous allons avoir besoin du Javascript, et notamment des tags de la musique courante. Mais ça, on sait déjà faire : on pourra donc réutiliser et modifier le script déjà en place.

Il faut également se renseigner sur les API de partage de facebook et twitter.

  • Facebook ne demande qu'une URL de partage. Pour les autres informations (titre, artiste, …) on verra tout à l'heure comment les envoyer à Facebook.
  • Twitter, quant à lui, a besoin du compte "auteur" du tweet (le nom du compte de votre radio donc), ainsi que du texte du tweet à partager. C'est dans ce texte que l'on va indiquer les tags. En revanche, j'ai fait le choix de ne pas partager un lien sur Twitter, car un tweet avec du texte est généralement plus lu au milieu d'un flot de liens. Si vous tenez à partager un lien, la méthode sera quasiment la même que pour Facebook.

On va donc commencer par la génération des liens de partage. Sur mon site j'ai utilisé AngularJS pour réaliser cela, mais ici, je vais le faire sans. Voici le code HTML que nous allons utiliser :

<button data-share-url="https://facebook.com/sharer/sharer.php?s=100&amp;u=http://mon-site-de-radio.fr/share.php?v={TIMESTAMP}">
    Partager sur Facebook
</button>
<button data-share-url="https://twitter.com/intent/tweet?text={TWEET}&amp;via=comptetwitterdemaradio">
    Partager sur Twitter
</button>

Côté JS, voici le code à implémenter pour effectuer l'action au clic (utilisation de jQuery)

$('[data-share-url]').on('click', function(e) {
    e.preventDefault();

    // Fonction pour remplacer les paramètres par leur valeur
    var setParam = function(str, key, val) {
        return str.split('{' + key.toUpperCase() + '}').join(val);
    };

    // On récupère le modèle d'URL et on remplace les paramètres
    var urlTemplate = $(this).attr('data-share-url');
    var url = setParam(urlTemplate, 'TIMESTAMP', +new Date);
    url = setParam(urlTemplate, 'TWEET', getTweet());

    // On ouvre un nouvel onglet pour le partage. Possibilité d'ouvrir une fenêtre pop-up ici.
    window.open(url);
});

Détaillons un peu cette fonction. On est en présence de deux paramètres que l'on va remplacer dans l'URL avant d'ouvrir la pop-up/le nouvel onglet qui continendra le formulaire du partage du réseau social. Les paramètres en question sont TIMESTAMP et TWEET.

TIMESTAMP est nécessaire uniquement pour le réseau social (ici, Facebook). Cela lui fera comprendra qu'à chaque partage effectué, il sera en possession d'une URL différente (à cause du paramètre qui variera en permanence), et permettra donc de passer outre le cache du réseau social.

Pourquoi faire cela ? Tout simplement parce que les réseaux sont équipés de caches relativement puissants, qui peuvent durer plusieurs heures. Or, si on envoyait à chaque fois la même URL, le réseau irait chercher les informations dans son cache, et remonterait les mauvaises informations à votre auditeur, lui indiquant qu'il va partager une chanson qu'il n'est pas en train d'écouter (et là on vient de répondre à la troisième question).

Ensuite, TWEET correspondra à un tweet que l'on va pré-générer pour l'auditeur. Là, soyez inventif, tout en gardant à l'esprit que vous ne disposez que de 140 caractères, moins le nombre de caractères du nom de votre compte, moins le "– via @" qui précédra le nom du compte. Autant dire que certains couple artiste/titre ne passeront pas. J'ai donc fait le choix de n'envoyer que le premier artiste renseigné dans les tags (généralement l'artiste principal de la musique, et donc le plus parlant), ce qui limitera la casse.

Exemple :

(Exemple qui tombait très bien au passage)

La fonction getTweet() ne sera donc qu'une concaténation de chaînes du style :

var getTweet = function() {
    return "En ce moment, j'écoute " + artist + " avec " + title;
};

En considérant que artist et title sont des variables régulièrement mises à jour (à vos d'adapter à votre script).

Le cas de Twitter est complet ! Mais il reste facebook. Comment faire un joli encart sur le réseau social ? Oui parce que contrairement à Twitter, Facebook ne permet pas de pré-inscrire le texte qui sera partager, donc on va se rabattre sur le partage de lien.

Il faut donc partager une page. Oui mais laquelle ? Avec quel contenu ?

C'est là qu'intervient notre petit share.php placé à la racine de notre serveur. Je vous le donne en mille, et on détaille après :

<?php
    $radioName = 'Utopic';
    $advertTagsArtist = 'ADVERT:TARGETSPOT';
    $radioTagsArtist = strtoupper($radioName);
    $data = file_get_contents("http://api.radionomy.com/currentsong.cfm?radiouid=VOTRE-RADIO-UID-ICI&apikey=VOTRE-API-KEY-ICI&callmeback=yes&type=xml&cover=yes");
    $doc = DOMDocument::loadXML($data);
    $title = $doc->getElementsByTagName('title')->item(0)->nodeValue;
    $artist = $doc->getElementsByTagName('artists')->item(0)->nodeValue;
    $ref = strtoupper($artist);
    $siteTitle = 'Utopic Radio | Ta webradio 200% smile !';
    $siteDescription = 'En ce moment, j\'écoute ' . $title . ' de ' . $artist . ' sur Utopic Radio.';
    $image = 'http://monsitederadio.fr/logo_par_defaut.png';

    if ($ref == $advertTagsArtist || $ref == $radioTagsArtist) {
        $description = 'En ce moment, j\'écoute Utopic Radio.';
    }

?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <!-- <meta http-equiv="refresh" content="0; URL=/"> -->
    <meta charset="UTF-8">
    <title><?= $siteTitle ?></title>
    <meta name="description" content="<?= $siteDescription ?>">

    <!-- for Google -->
    <meta itemprop="name" content="<?= $siteTitle ?>">
    <meta itemprop="description" content="<?= $siteDescription ?>">
    <meta itemprop="image" content="<?= $image ?>">
    <link rel="author" href=""/>
    <link rel="publisher" href=""/>

    <meta name="author" content="Utopic Radio" />
    <meta name="copyright" content="" />
    <meta name="application-name" content="Utopic Radio" />

    <!-- for Facebook -->
    <meta property="og:title" content="<?= $siteTitle ?>" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<?= $image ?>" />
    <meta property="og:image:url" content="<?= $image ?>" />
    <meta property="og:url" content="/">
    <meta property="og:site_name" content="Utopic Radio">
    <meta property="og:description" content="<?= $siteDescription ?>" />

    <!-- for Twitter -->
    <meta name="twitter:title" content="<?= $siteTitle ?>" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:description" content="<?= $siteDescription ?>" />
    <meta name="twitter:image" content="<?= $image ?>" />
</head>
<body>
    <h1><?= $siteTitle ?></h1>
    <p><?= $siteDescription ?></p>
    <img src="<?= $image ?>" alt="<?= $siteTitle ?>">
    <div>
        <a href="/">Cliquez ici si vous n'êtes pas redirigé.</a>
    </div>
</body>
</html>

Premièrement, on peut voir un code qui devrait vous sembler familier : la récupération des tags depuis l'API de Radionomy (libre à vous de faire des fonctions qui vous utiliserez dans vos scripts serveur). On effectue les traitements minimals pour pouvoir toujours partager des données cohérentes (donc on n'affichera pas "ADVERT:TARGETSPOT" ou "Jingle" si jamais c'est ce qui est lu au moment du partage…)

Ensuite, tout est dans les meta qui se trouvent au début de notre fichier HTML. Ici, j'implémente Facebook et Twitter pour gérer un maximum de cas d'utilisation possible. Facebook utilise l'Open Graph et Twitter utilise sa propre implémentation des balises meta pour le partage.

Il n'y a plus qu'à faire 3 choses :

  1. Renseigner les différentes valeurs des balises meta (je vous laisse lire le code pour ne rien oublier, et y renseigner les valeurs adéquates)
  2. Ajouter du code HTML minimal, histoire que les visiteurs qui auront cliqué sur le lien partagé soient dans un environnement familier mais temporaire (voir ci-après)
  3. Effectuer une redirection automatique gérée par le navigateur (la première balise meta "http-equiv=refresh").

Je dis "temporaire" parce qu'évidemment, il ne faut pas que les utilisateurs s'arrêtent sur cette page pauvre et qui ne leur apporte rien, le but étant d'amener des nouveaux utilisateurs sur votre site. C'est pour cela qu'il est primordial d'ajouter une redirection, et de proposer un lien bien en évidence au cas où la redirection ne fonctionne pas, afin que l'utilisateur comprenne qu'il se passe quelque chsoe derrière tout ça.


En résumé :

  • Les liens de partage sont dynamiques : ils doivent être générés à chaque clic (afin de bénéficier des bons tags, et d'un timestamp si nécessaire).
  • Les réseaux sociaux ont tous leurs exigences, et leur cache, tenez-en compte au moment d'implémenter les liens de partage.
  • Dans certains cas, il faut savoir ruser, c'est ce qu'on a fait avec sharer.php, afin de partager un lien personnalisé reprenant les tags et la couverture de la musique diffusée au moment du partage. Mais comme on partage une page qui ne sert que pour afficher un joli encart sur le réseau social, il faut effectuer une redirection.

Maintenant, à vous d'être inventif ! Changez le texte de partage, changez le script sharer.php pour qu'il soit encore plus invisible, … Bref, à vous d'adapter ces scripts à vos besoins ! Et n'hésitez pas à poster vos suggestions en commentaires :)

Rédigé le .

Commentaires

comments powered by Disqus