Pas-à-pas : intégrer un agenda Google™ sur Typepad

Il est très intéressant, lorsqu'on publie un blog, de pouvoir y annoncer des événements à venir. François-Xavier Ménard vous propose ici une solution pour le faire, automatisée et adaptée au look de votre blog. Elle consiste à s'adosser à un agenda Google™ (sans passer par le widget Google, qui n'est pas très souple). Ci-contre un exemple de cette solution mise en oeuvre sur BDForces, blog donnant des conseils sur le développement de business.

1. Créez un agenda Google™
C'est gratuit, et se fait en quelques minutes. Comme d'habitude chez Google, l'interface est simple et rapide. Rendez-vous sur http://www.google.com/calendar et suivez les indications. Dans les options de l'agenda, rendez publics les événements de cet agenda.

2. Créez une typeliste pour vos événements
Sous l'interface d'admin Typepad, naviguez vers la page de gestion des typelistes. Créez une nouvelle typeliste de type "Notes". Cliquez alors "Ajouter un nouvel élément". Laissez l'étiquette vide, et insérez dans le champ note le code html ci-dessous. Remplacez bien-sûr l'adresse d'agenda par celui créé à l'étape 1.

<div id='googleEvents'><p>Agenda en construction...</p></div>
<script type='text/javascript' src='/dateFormat.js'></script>
<script type='text/javascript' src='/buildEvents.js'></script>
<script type='text/javascript' src='http://www.google.com/calendar/feeds/[email protected]/public/full?alt=json-in-script&callback=insertAgenda&orderby=starttime&max-results=6&singleevents=true&sortorder=ascending&futureevents=true'></script>

 

3. Copiez deux fichiers javascript
Recopiez les fichiers ci-joints  dateFormat.js et  buildEvents.js sur votre PC (clic droit > Enregistrer la cible du lien). Dans l'admin Typepad, naviguez vers la page Tableau de Bord > Fichiers. Délivrez les fichiers en question dans le dossier racine de votre blog. Ces fichiers sont référencés dans la typeliste créée en 2. Ils utilisent la technologie Ajax pour récupérer les données de Google, et ensuite les mettent en forme.

4. Insérez la typeliste dans votre affichage courant
Il n'est malheureusement pas possible de tester cette fonctionnalité dans un habillage non sélectionné pour votre blog. Donc choisissez une heure de faible affluence, et insérez la typeliste créée en 2. dans l'habillage courant de votre blog. Il suffit d'enregistrer les changements pour voir le résultat, pas besoin de republier tout votre weblog.

5. Modifiez la présentation
Si vous voulez aller un peu plus loin, vous pouvez modifier le style de votre agenda dans la CSS de votre habillage (uniquement disponible avec un abonnement Pro). Dans ce cas, définissez un style pour "#googleEvents a" par exemple, pour modifier l'apparence des liens de l'agenda.
Vous pouvez aussi modifier la présentation des données de l'agenda, par exemple le format des dates, en modifiant le fichier buildEvents.js.

Merci à Aurélien sur asp-php.net pour le script de formatage des dates, il s'utilise les yeux fermés.

Et hop !...

François-Xavier Menard Consultant free-lance Conseil et réalisation logiciels email : fx point menard chez free point fr