Abonnement email à votre flux via Feedburner (valide xhtml)
Si vous utilisez l'excellent service Feedburner pour gérer vos flux, il faut savoir que vous avez également la possibilité de proposer à vos visiteurs un abonnement via email.
Cette option fonctionne comme une newsletter, Feedburner enverra un email à tous les inscrits avec un aperçu de votre flux.
Comment activez ce service ?
- Rendez vous sur votre compte Feedburner
- Cliquez sur l'onglet "Publicize"
- Dans le menu de gauche, cliquez sur "Email Subscriptions"
- Maintenant cliquez sur le bouton "Activate"
- Vous voilà sur une nouvelle page, choisissez la langue (français en l'occurrence)
- Copiez le code fourni sur votre site à l'endroit où vous désirez voir la case d'abonnement s'afficher
- Pour régler la fréquence d'envoi des emails: onglet "Publicize" > "Email subscriptions" > "Delivery Options"
- Pour gérer les abonnés: onglet "Publicize" > "Email subscriptions" (tout en bas)
Simple non ?
Mais le problème, c'est que Feedburner va vous fournir un code pas propre du tout qui risque bien de casser la validité de votre site. De plus même en sélectionnant français, le texte reste en anglais ! Je vais donc vous montrez comment résoudre ces petits désagréments ...
Nettoyage du code fourni par Feedburner et traduction
Le code de base fourni par feedburner est le suivant:
<p>Enter your email address:</p>
<p><input type="text" style="width:140px" name="email"/></p>
<input type="hidden" value="http://feeds.feedburner.com/~e?ffid=xxxxxx" name="url"/>
<input type="hidden" value="Webinventif" name="title"/>
<input type="hidden" name="loc" value="fr_FR"/>
<input type="submit" value="Subscribe" />
<p>Delivered by <span class="removed_link" title="http://www.feedburner.com">FeedBurner</span></p>
</form>
Ce qui vous donnera le résultat suivant:
Voici donc le code nettoyé, valide XHTML 1.0 strict et traduit:
function pop_it(the_form) {
my_form = eval(the_form)
window.open('http://www.feedburner.com/fb/a/emailverifySubmit?feedId=xxxxxx', 'popupwindow', 'scrollbars=yes,width=550,height=520');
my_form.target = "popupwindow";
my_form.submit();
}
</script>
<form id="formu" style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://www.feedburner.com/fb/a/emailverify" method="post">
<p>
<input style="width: 140px;" name="email" type="text" />
<input value="http://feeds.feedburner.com/~e?ffid=xxxxxx" name="url" type="hidden" />
<input value="Webinventif" name="title" type="hidden" />
<input name="loc" value="fr_FR" type="hidden" />
<input type="button" value="S'abonner" onclick="pop_it(document.getElementById('formu'));" />
</p>
</form>
Et donc visuellement vous obtiendrez:
Il ne vous reste plus qu'à intégrez le code dans votre site. Si vous êtes sous Dotclear 2 ou WordPress, ce code s'intègre facilement via les widgets des barres latérales 😉
Ps: Le code nettoyé contient un morceau de javascript, il est évident que vous pouvez le placez dans un .js externe si vous le désirez 😉
-----
Pingback: (parenthese.be) » Blog Archive » HTTParty #17()