TP
Teddy Payet
CTO Freelance

Partager sur #G+ en #javascript

Pour ceux qui me suivent un peu, vous avez remarqué que j’utilise Google+ et Twitter. Lorsque Google Reader existait encore :-$ il me suffisait de cliquer sur le bouton de partage pour que ce que je voulais se publie sur Google+ puis, par RSS sur Twitter.

Malheureusement, depuis le 1er juillet, Google reader n’est plus de ce monde…

J’ai dû trouver un autre lecteur RSS en ligne qui soit sympa et surtout fonctionnel. J’ai testé The Old Reader qui est plutôt bien fait. On retrouve les fonctions principales qu’on attend d’un reader. Manque les partages…
J’ai testé depuis 1 semaine Feedly. Esthétiquement, on est dans du Flat-UI. C’est simple et agréable.
Je ne m’attarderai pas dans cet article sur ses fonctions car ce n’est pas le sujet.

Que ce soit sur The Old Reader ou Feedly, le partage vers Google+ n’est pas "naturel" comme avec Google Reader. Sur Feedly, on a un bouton "g+1". Il renvoie vers la page http://plus.google.com/share?url=votre_url_a_partager.tld.

Page de partage de Google+

Vous pouvez voir une prévisualisation de votre lien en dessous de la zone de commentaires : le titre de la page, une image sélectionnée et l’url.
Je vais utiliser cette page pour mon besoin.

Si vous êtes comme moi, vous aimez "personnaliser" le titre en y mettant des mots-clés (hashtags). Mais voilà… Il vous faut retaper tout le titre manuellement. Long quand on partage beaucoup d’articles en une journée.

Vif du sujet : du javascript

Firefox, Chrome et Safari permettent d’avoir un bookmark contenant du javascript. J’ai utilisé cette méthode pour pouvoir partager et copier le titre de mon article dans la zone de commentaire.

Les premières lignes de codes
Dans les lignes de codes que j’écrirai sur cette page, je ferai la version étendue. La version minifiée sera en lien.
Tout d’abord, quand je suis sur une page que je désire partager, il y a plusieurs méthodes :
– copier le lien, aller sur mon compte Google+, coller le lien dans la zone de partage, entrer mon texte et enfin "partager" en cliquant sur le bouton…
– Un petit bout de javascript pour partager le lien sur mon compte Google+ (Ce dernier n’ayant pas d’API, il reste des étapes manuelles que je ne peux éviter).

Bien entendu, j’utilise la deuxième méthode de préférence. Voici enfin le code :

location.href='https://plus.google.com/share?url='+encodeURIComponent(location.href);

Très simple, non ? Ajouter ce lien dans votre barre personnelle.
location.href correspond à l’url de votre barre d’adresse. Vous en voyez 2. Le premier c’est l’url vers laquelle vous allez être redirigé. Le second est l’url de la page actuelle.

Cool. Mais là, on est que redirigé uniquement. La zone de commentaires n’a pas été personnalisé.

Personnaliser la zone de commentaires

Actuellement, j’utilise un deuxième "bouton" quand je suis sur cette page de partage. J’ai fait des tests qui n’ont pas été concluant selon les différentes machines sur lesquelles j’étais. Le temps de chargement diffère selon le type de connection, la rapidité de l’ordinateur, le navigateur, etc.
Donc, le deuxième bouton est le meilleur compromis pour le moment.

(function(){
    var titre = document.getElementsByClassName("ot-anchor")[1].textContent;
    document.getElementsByClassName("editable")[0].innerHTML = titre;
})();

La première variable titre va chercher le titre de ma page.
L’image, le titre et l’url ont tous les 3 la class ot-anchor. Celui qui m’intéresse est le 2ème… soit un index "1".
Une fois le titre trouvé, je l’insère dans la zone de commentaires. Ce n’est pas un textarea classique… C’est un div avec la class editable.

À tester en rajoutant ce lien dans votre barre personnelle.
Copie conforme du titre donc… On peut maintenant y ajouter nos hashtags.

On ne peut pas faire plus ?

C’est bien cool tout ça, mais je dois à chaque fois rentrer les "#" devant les mots-clés que je veux… Ils sont quasiment les même. Ne pourrais-je pas simplifier cette saisie aussi ?
Et bien oui. Voici le code :

(function(){
    var titre = document.getElementsByClassName("ot-anchor")[1].textContent;
    var tableau=titre.split(" ");
    for(i=0;i<tableau.length;i++){
         if(tableau[i].length>3){
              tableau[i]="#"+tableau[i];
         }
    }
    titre=tableau.join(" ");
    document.getElementsByClassName("editable")[0].innerHTML = titre;
})();

La différence avec le précédent code, c’est que je crée une variable tableau. Elle va se charger de mettre le hashtag devant chaque mot… J’aurais pu me contenter d’un replace{" "," #"}. Mais son inconvénient est qu’il mettra aussi un "#" devant "of", "the", "les", "le", "la", etc.
Dans mon utilisation, généralement, les mots que je mets en hashtag font plus de 3 caractères.
J’ai réalisé une petite vérification grâce à une boucle FOR.

Voici le bouton à rajouter dans votre barre personnelle de votre navigateur.

Dites moi ce que vous en pensez et si vous avez trouvé une meilleure méthode. Je suis preneur de suggestions. :-)

 
par Teddy Payet
Langage et développement
Javascript
Catégorie
Astuce, Notes de développement