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
|
Derniers commentaires