Les fonctions méconnues de TypePad : le partage de notes facile

Comme pour ma note concernant l'insertion de vidéos, je vais vous faire ici un résumé des méthodes disponibles dans TypePad pour ajouter des services de partage à vos notes (partager sur Twitter, Facebook, et tutti quanti…).

Pour cela, j'aborderai les 3 chapitres suivants (du plus standard au véritable sur-mesure) mais sans avoir recours à l'habillage avancé (soupir de soulagement dans les tribunes) :

• Fonctions de partage incluses dans TypePad
• Utilisation de widgets fournis par des services tiers
• Mise en place d'un pied de note personnalisé en habillage classique (utilisation de JavaScript)

Fonctions de partage incluses dans TypePad
D'emblée, TypePad vous permet d'ajouter en pied de chaque note des liens vers des fonctions ou services de partage.

Pour configurer ces fonctions, il vous suffit de vous rendre dans "Habillage > Contenu" et de cliquer sur le crayon figurant en face de l'option "Pied de note".

5 options destinées à accroître la viralité de vos notes sont configurables ici :

1. Reblog => permet à vos lecteurs disposant d'un compte TypePad de rebloguer directement votre note et d'y ajouter leurs commentaires
2. Favoris => permet à vos lecteurs de constituer une liste de lecture sur leur profil TypePad
3. Envoyer sur Digg => enverra le permalien et titre de la note sur le service de partage Digg.com
4. Envoyer sur del.icio.us => enverra le permalien et titre de la note sur le service de partage del.icio.us
5. Tweeter ceci ! => enverra le permalien et titre de la note sur le service de partage del.icio.us pour tweet sur le compte Twitter de votre lecteur

Reblog et Favoris interagissent plus en profondeur avec votre compte TypePad : vous ainsi que vos lecteurs verrez apparaître sur chaque note les mises en favoris et reblog faits par les autres lecteurs, et l'activité de reblog et de mise en favori de chacun est notifiée dans le Tableau de Bord de compte TypePad.


Avantage : vous contrôlez tout, les services à afficher, et que vous vous en remettez à la disponibilité de TypePad pour que cette fonction soit toujours présentée à vos lecteurs (ce qui n'est pas le pire des choix vu notre niveau de disponibilité ;-)).

Inconvénient : vous pouvez installer les services prévus et puis c'est tout. Donc si d'autres services de partage ont votre faveur, point de salut directement depuis cette interface.

Utilisation de widgets
Depuis l'avènement des réseaux sociaux, vous trouverez de nombreux widgets vous permettant d'accroître le nombre de services de partage en pied de chaque note.
Je ferais un rapide tour des services que j'estime les plus pertinents.

- Bouton de partage Wikio
Wikio propose un bouton de partage universel dont vous pouvez configurer le contenu pour faire apparaître notamment un partage direct vers Facebook, Google et Netvibes, en plus de Wikio évidemment.
Accessoirement, l'équipe Wikio a fait un article et une vidéo pour vous expliquer comment faire sur TypePad.

Avantage : Rapide et complètement en français.
Inconvénient : Les options de mise en forme sont limitées.

- Bouton de partage AddThis
C'est un service équivalent à celui de Wikio dans sa forme basique. Par contre il va inclure de base un nombre plus conséquent de services de partage et permet aussi une personnalisation plus poussée. Ajoutons que vous pouvez optionnellement créer un compte pour disposer de statistiques de partage.
Son inconvénient majeur est d'être en anglais ce qui ne facilite pas la personnalisation.
Vous pouvez trouver un tutoriel de mise en place du Widget TypePad en colonne latérale ainsi qu'un pan dédié à la mise en place de ce service sur un habillage avancé.

Avantage : Statistiques, capacité de personnalisation.
Inconvénient : service en anglais uniquement.


Si vous êtes Twitter à fond, orientez-vous plutôt vers TweetMeme, qui est interactif et vous permettra de plus de configurer les services tiers usuellement associés à Twitter (bit.ly…)

Mise en place d'un pied de note personnalisé en habillage classique (utilisation de Javascript)
Les services listés ci-dessus ont évidemment le défaut de leurs qualités, ils sont très rapides à mettre en oeuvre, par contre, vous serez évidemment frustrés si vos exigences de personnalisations sont fortes (tant en terme d'apparence graphique que de services proposés).
Pourtant avec un peu de JavaScript et grâce à la structure d'un habillage classique de TypePad, vous pouvez faire des merveilles en un rien de temps.

Pour illustrer ceci, je vous invite à aller faire un tour sur le blog de CoachClub et d'afficher une note au hasard. Vous voyez le module "Vous avez aimé cet article ?" ? Et bien ce dernier n'a pas nécessité de passer en habillage avancé et a été fait sur mesure pour les besoins de CoachClub.

Pour mettre en place ce module nous avons procédé de la façon suivante :
1. Nous avons créé le module HTML de partage tel que nous le voulions au final soit :
<div id="entry-share" class="entry-share">
<h3>Vous avez aimé cet article ?</h3>
<div class="entry-share-links pkg">
<span class="tweetmeme">
<script type="text/javascript" charset="utf-8" src="https://bit.ly/javascript-api.js?version=latest&login=coachclub&apiKey=R_9cd2766f0fde6b5a95dfacc4a0ed590f"></script>
<script type="text/javascript">
tweetmeme_url = location.href;
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</span>
<span><a class="link-rss" href="http://feeds.feedburner.com/CoachClub6aServices?format=xml"></a></span>
<span><a class="link-netvibes" href="" onclick="window.open('http:\/\/www.netvibes.com\/share?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href),'netvibes','toolbar=no,width=550,height=550'); return false;"></a></span>
<span><a class="link-facebook" href="" onclick="window.open('http:\/\/www.facebook.com\/sharer.php?t='+encodeURIComponent(document.title)+'&u='+encodeURIComponent(location.href),'facebook','toolbar=no,width=550,height=550'); return false;"></a></span>
<span><a class="link-delicious" href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;""></a></span>
<span><a class="link-twitter" id="twitter-share" href="" onclick="window.open('http:\/\/twitter.com/home?status=En train de lire '+encodeURIComponent(location.href)+' sur CoachClub','twitter','toolbar=no,width=550,height=550'); return false;"></a></span>
<span><a class="link-technorati" href="" onclick="window.open('http:\/\/technorati.com\/faves?add='+encodeURIComponent(location.href),'technorati','toolbar=no,width=550,height=550'); return false;"></a></span>
</div>
</div>
Chaque service de partage dispose de sa propre URL, nous n'avons ici fait que reprendre ces URLs mises à disposition et leur passer en paramètre les éléments attendus (en général le titre de note et son URL).

2. Nous l'avons placé dans un widget HTML de TypePad
C'est le module "Inclure votre propre HTML" que vous pouvez ajouter depuis "Habillage > Contenu > Catégorie:Widgets".
Nous avons aussi ajouté du CSS pour que ce module ne soit pas visible tant qu'il est placé en colonne latérale :
#beta #entry-share{display:none;}
Cela nous évitera de briser le style global si toutefois le JavaScript renvoie une erreur ou n'est pas autorisé par le navigateur.

3. Nous l'avons ensuite déplacé via un tour de magie (aussi appelé JavaScript et DOM)
Le code ci-dessous va vous sembler barbare mais se décompose en 3 étapes dont 1 est optionnelle :
a- je vérifie que je suis sur un permalien pour effectuer
Ceci est fait via une expression régulière comparée à l'URL courante affichée :
var MyCurrentPage = window.location.href;
var MyBlogHome = "http://blog.coachclub.com/fr/";
var BlogLength = MyBlogHome.length;
var MyCurrentPath = MyCurrentPage.substring(BlogLength-1);
var MyMatchPost = /\/[0-9]{4}\/[0-9]{2}\/.+\.html/;

Vous aurez de votre côté à changer l'URL de la variable "MyBlogHome" par l'URL de votre blog.

b. Si je suis sur un permalien, je prends mon module HTML de partage et je le déplace de la colonne latérale au pied de note
if (MyCurrentPath.match(MyMatchPost)){
var myAd = document.getElementById('entry-share') // J\'attrape mon module de partage défini en étape 1.
var NodeListe = document.getElementsByTagName('div')
         for (var j = 0, o; q = NodeListe[j]; j++)
     {
         if(q.className.match(/entry-footer/i)) { // Je vais chercher le parent qui m'intéressé ici entry-footer
            var new_position = q.childNodes[1];
            q.style.cssText = "background: transparent url(http:\/\/coachclub.typepad.com\/6a-img\/entry-footer-separator.gif) left top repeat-x; padding-top:20px;"
            q.insertBefore(myAd, new_position)  // J\'insère mon module de partage à la suite de ce parent et avant son premier enfant
         }
     }

}

C'est terminé.

c. En option, spécifiquement pour le widget TweetMeme, nous avons ajouté un code pour le service de raccourcissement d'URL
        BitlyClient.addPageLoadEvent(function(){
            BitlyCB.myShortenCallback = function(data) {
                // this is how to get a result of shortening a single url
                var result;
                for (var r in data.results) {
                    result = data.results[r];
                    result['longUrl'] = r;
                    break;
                }
                links = document.getElementById("twitter-share");
                var tinyURL = result['shortUrl'];
                var EventContent = "window.open('http:\/\/twitter.com/home?status=En train de lire "+window.document.title +" "+tinyURL+"','twitter','toolbar=no,width=550,height=550'); return false;";
                     if( links.attachEvent ){
                            links.attachEvent("onclick", EventContent);
                               } else {
                               links.setAttribute("onclick", EventContent);
                        }
                      }


            BitlyClient.shorten(location.href, 'BitlyCB.myShortenCallback');
        });

Evidemment pour fignoler le tout, il vous faudra faire un peu de cosmétique (ajout d'icônes et styles CSS spécifiques) fonction des services proposés au final, vous trouverez des tas d'icônes à travailler/retravailler pour votre inspiration sur le web.