![]() |
|
|
API : page principale API : premiers pas API : documentation Ajouter un bouton à la Galerie Galerie des boutons |
Guide de création de boutons personnalisés pour la barre d'outils Google 4 pour Internet ExplorerCe document explique comment créer des boutons personnalisés. Les boutons personnalisés ne fonctionnent actuellement qu'avec Internet Explorer.Table des matièresQu'est-ce qu'un bouton personnalisé ?Il s'agit d'un bouton que vous pouvez ajouter à la barre d'outils Google. Il peut être doté de fonctionnalités personnalisées de navigation, de recherche, d'envoi et de mise à jour. En particulier, un bouton de recherche personnalisé peut utiliser le moteur de recherche de Google ou d'un autre site. Un simple clic sur un bouton de recherche peut vous permettre de réaliser les tâches suivantes :
Un bouton personnalisé peut être doté des fonctionnalités d'ergonomie suivantes :
Outre les fonctionnalités d'ergonomie mentionnées ci-dessus, un bouton personnalisé peut être doté des propriétés suivantes (enregistrées dans un fichier XML) qui permettent d'effectuer les tâches décrites ci-dessus :
La barre d'outils suivante illustre des boutons personnalisés pour Slashdot, Wikipedia et la BBC (en surbrillance). Le bouton BBC correspond à un flux d'actualités avec une liste déroulante de titres (comme l'indique la flèche vers le bas).
Ajout d'un bouton personnaliséPour ajouter ou gérer des boutons personnalisés sur la barre d'outils Google :
Création et ajout automatiques d'un bouton de recherche personnalisé
Résultat : le bouton personnalisé est installé et immédiatement opérationnel. En arrière-plan, cette procédure crée un fichier XML de bouton personnalisé avec une icône et l'enregistre sous un nom haché dans le dossier suivant :
Cette approche est plus intéressante que la création manuelle d'un bouton personnalisé car elle utilise des requêtes POST complexes ou des redirections qui rendent difficile l'identification de l'élément Fichier XML du bouton personnalisé
Les propriétés et le fonctionnement d'un bouton personnalisé sont définis dans un fichier XML avec un élément
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.wikipedia.org</site>
</button>
</custombuttons>
REMARQUE : Vous pouvez inclure des nouvelles lignes et des espaces n'importe où dans les chaînes d'URL du fichier XML. La barre d'outils les élimine lorsqu'elle interprète le fichier. Si votre URL requiert des espaces (vous ne voulez donc pas les éliminer), vous devez les remplacer par « %20 » (si le navigateur ne l'a pas déjà fait pour vous). Parmi les exemples suivants, nombre d'entre eux illustrent l'URL saisie sur deux lignes avec une nouvelle ligne au milieu, ce qui fonctionne très bien.
REMARQUE : Dans tous les exemples donnés ici, seule la partie du code XML comprise dans l'élément
Création et installation manuelles d'un bouton personnaliséPour installer un bouton personnalisé sur la barre d'outils Google :
Ajout d'un titre et d'une info-bulle à un bouton
Comme cela est illustré plus loin, utilisez l'élément
Pour ajouter une info-bulle, utilisez l'élément
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.wikipedia.org</site>
<title>Wikipedia</title>
<description>The Free Encyclopedia</description>
</button>
</custombuttons>
Bouton de recherche personnaliséLa barre d'outils Google vous permet de créer un bouton permettant d'utiliser les moteurs de recherche de la plupart des sites Web, en se basant sur le terme saisi dans la zone de recherche de la barre d'outils. Les deux exemples suivants illustrent, d'une part, un bouton permettant d'effectuer des recherches dans wikipedia.org à l'aide du moteur de recherche Wikipedia, et, d'autre part, un bouton permettant d'effectuer des recherches sur Internet à l'aide du moteur de recherche Google.
Pour ce faire, ajoutez au fichier XML du bouton un élément de recherche sous la forme REMARQUE : Pour que le bouton s'affiche, l'élément Bouton personnalisé pour la recherche sur Wikipedia
Par exemple, pour créer un bouton permettant d'effectuer des recherches sur wikipedia.com à l'aide du moteur de recherche Wikipedia, commencez par une requête Wikipedia portant sur un terme le plus simple possible, comme « dog » (chien) :
<search>http://en.wikipedia.org/wiki/Special:Search?search=
Si vous ajoutez cet élément de recherche au bouton précédent, vous obtenez ceci :
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<site>http://www.wikipedia.org</site>
<title>Wikipedia</title>
<description>The Free Encyclopedia</description>
<search>http://en.wikipedia.org/wiki/Special:Search?search=
Remarquez que, dans l'URL, la perluète est codée par échappement de la façon suivante : « Bouton personnalisé pour la recherche Google
Pour créer un bouton permettant d'effectuer des recherches sur Internet à l'aide du moteur de recherche Google, commencez par une requête Google portant sur un terme le plus simple possible, comme « dog » (chien) :
<search>http://www.google.com/search?q={query}</search>
Exemple : Recherche Slashdot
<search>http://slashdot.org/search.pl?query={query}</search>
Envoi d'une action de recherche par la méthode POST
Pour envoyer des actions de recherche en requête POST plutôt que GET, insérez un attribut Recherche « The Onion »Cet exemple illustre une méthode POST pour l'envoi de données POST (en surbrillance) : <search method="post">http://www.theonion.com/content/search/node ?edit%5Bkeys%5D={query}</search> Mise à jour d'un bouton personnaliséL'URL de téléchargement que vous utilisez pour héberger le fichier XML du bouton devient l'identifiant unique du bouton (utilisé lors des mises à jour de ce même bouton). Si vous effectuez une seconde tentative de téléchargement d'un bouton à partir de la même URL, la barre d'outils vous propose uniquement de remplacer l'ancien bouton et non d'en ajouter un nouveau.
Parmi les cinq méthodes pour ajouter un bouton, la première et la cinquième permettent de chercher automatiquement les mises à jour. En outre, toute valeur <update>http://buttons.com/updated_button.xml</update> Options du bouton
Un bouton peut spécifier une chaîne d'options définie localement à l'aide de la balise
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Weather</title>
<option>
<title>Zip code</title>
<description>Enter a US zip code. For example, 94043 is Mountain View, CA</description>
<default>94043</default>
</option>
<site>http://www.google.com/search?q=weather+{option1}</site>
</button>
</custombuttons>
Le titre de l'option est obligatoire. La valeur par défaut et la description sont facultatives. Utilisez toujours la variable {option1} à l'intérieur des spécifications d'un modèle d'URL afin d'insérer le texte de l'utilisateur. Il n'existe pas encore de technique de validation ou d'élimination des espaces blancs de l'entrée utilisateur. La variable {option1} utilisera les caractères d'échappement à l'aide de paramètres d'échappement utf-8 et cgi, comme dans le cas d'une zone de texte d'un envoi de formulaire. Incorporation de l'URL active
Outre l'envoi d'une requête, vous pouvez spécifier l'URL affichée par le navigateur de trois manières différentes :
Cet exemple illustre l'utilisation de l'élément
<site>http://web.archive.org/web/*/
L'exemple suivant illustre également une recherche dans archive.org mais à l'aide de l'élément
<site method="post">http://www.archive.org/searchresults.php?search=
Si vous souhaitez utiliser le moteur de recherche Google pour effectuer des recherches sur le site Web actuellement affiché, utilisez l'élément
<search>http://www.google.com/search?q=site:
Incorporation du suffixe de domaine Google
La barre d'outils Google dispose d'une variable
Utilisez la variable
<search>http://www.google.
Envoi de texte sélectionné par l'utilisateurVous pouvez permettre à un bouton personnalisé d'envoyer un extrait de texte seul, par exemple, un texte de la page Web sélectionné par l'utilisateur. Cela peut être utile pour un service de traduction, ou pour une application de messagerie ou de blog. Lorsque vous sélectionnez du texte, une petite icône texte apparaît sur l'icône du bouton personnalisé.
Cette opération requiert l'élément
<send>http://www.google.com/search?hl=en&lr=&q=define%3A+
Les boutons personnalisés pour les opérations d'envoi figurent également dans le menu contextuel (bouton droit de la souris) du navigateur lorsque du texte est sélectionné. Vérification de l'existence d'une variable
Au fur et à mesure de l'évolution de la barre d'outils, des variables d'URL supplémentaires sont susceptibles d'être mises en œuvre. Afin d'assurer une compatibilité totale (ascendante et descendante) avec ces nouvelles variables, la syntaxe {param_to_be_tested?use this text if the param is implemented:use this text if not}
En clair, le créateur d'un bouton personnalisé peut utiliser en toute sécurité une nouvelle fonctionnalité, et cela permet également la compatibilité ascendante avec des analyseurs plus anciens qui ne prennent pas en charge cette nouvelle fonctionnalité. Par exemple, imaginons que la variable {locale} vienne d'être créée. Un modèle d'URL comme celui-ci permet de s'assurer que la variable n'a eu aucun effet sur des barres d'outils plus anciennes : <site>http://www.google.com/{locale??hl={locale}}</site>
Si la barre d'outils prend en charge la variable {locale}, cela donnerait : <site>http://www.google.com/?hl=en</site> Sinon : <site>http://www.google.com/</site>
Vous pouvez imbriquer dix niveaux d'expressions <site>http://www.google.com/{locale??hl={domain?{domain}:{query}}}</site>
Notez également qu'à chaque fois que vous utilisez un caractère d'échappement et que celui-ci n'est pas reconnu, le parser le remplace par une chaîne vide. Par conséquent, Bonjou{bla bla}r à tous, donnerait simplement Bonjour à tous. En outre, en cas de déséquilibre dans le nombre d'accolades « { » ou « } », ou tout autre problème de parsing, l'intégralité de l'URL est réinitialisée (chaîne vide). Comment améliorer l'apparence des icônesLa plupart des icônes utilisées comme icônes de favoris (favicons) peuvent également être utilisées comme icônes de boutons personnalisés. Ces icônes comprennent les images BMP 16 x 16, ICO, GIF et JPEG. Il vous suffit de les coder en texte ASCII à l'aide d'un codage en base64. Sur Internet, plusieurs sites peuvent réaliser le codage à votre place. Par exemple, celui-ci. Sur ce site, utilisez le bouton « Browse » (Parcourir) pour sélectionner le fichier que vous voulez coder, puis cliquez sur le bouton « Convert the source data » (Convertir les données source) pour lancer le codage. Javascript et PHP disposent aussi de commandes sur une seule ligne pour le codage en base64.
Exemple d'icône Gmail en base64, avec un élément
<icon mode="base64" type="image/x-icon">
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4ONr/ODja/6en+f+np/n/p6f5/6en+f+np/n/p6f5
/6en+f+np/n/p6f5/6en+f+np/n/p6f5/zg42v84ONr/ODja/zg42v/i4v//////////////////
/////////////////////////////////////+Li//84ONr/ODja/zg42v84ONr/p6f5/+Li////
/////////////////////////////////////////+Li//+np/n/ODja/zg42v84ONr/ODja/+Li
//+np/n/4uL/////////////gYHy/4GB8v///////////+Li//+np/n/4uL//zg42v84ONr/ODja
/zg42v//////4uL//6en+f+2tv//gYHy/1pa6f9aWun/gYHy/7a2//+np/n/4uL///////84ONr/
ODja/zg42v84ONr///////////+2tv//gYHy/1pa6f84ONr/ODja/1pa6f+BgfL/trb/////////
////ODja/zg42v84ONr/ODja////////////gYHy/1pa6f84ONr/trb//7a2//84ONr/Wlrp/4GB
8v///////////zg42v84ONr/ODja/zg42v//////gYHy/1pa6f84ONr/trb/////////////trb/
/zg42v9aWun/gYHy//////84ONr/ODja/zg42v84ONr/gYHy/1pa6f84ONr/trb/////////////
//////////+2tv//ODja/1pa6f+BgfL/ODja/zg42v84ONr/ODja/zg42v84ONr/trb/////////
/////////////////////////7a2//84ONr/ODja/zg42v84ONr/ODja/zg42v84ONr/gYHy/6en
+f+np/n/p6f5/6en+f+np/n/p6f5/6en+f+np/n/gYHy/zg42v84ONr/ODja/wAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAA//8AAP//AAD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAD//wAA//8AAA==
</icon>
Les icônes de boutons personnalisées peuvent être d'une taille supérieure à 16 x 16, mais la barre d'outils les ramène à la taille 16 x 16. Il est donc préférable de ne pas les rendre plus grandes que nécessaires, car elles seraient moins esthétiques que si vous les aviez mises à l'échelle à l'aide d'une application graphique de qualité. Les icônes les plus esthétiques sont obtenues en utilisant 24 bits de couleur (RVB) et 8 bits alpha, enregistrées en tant qu'icônes RVBA de type XP. Vous pouvez enregistrer l'icône en tant que fichier PNG 16 x 16 avec transparence alpha, puis la convertir en icône 16 x 16 de type XP (à l'aide d'un programme comme IconWorkshop), et enfin la coder en base64. Les fichiers PNG ne sont pas directement pris en charge car Windows ne peut les gérer en mode natif sans les lier à de nombreux autres éléments. Vous devez utiliser un canal alpha car toutes les barres d'outils des utilisateurs ne sont pas dotées d'une couleur d'arrière-plan identique à la vôtre. Windows XP permet aux utilisateurs de personnaliser leur modèle de couleurs, y compris pour l'arrière-plan de la barre d'outils. Vous pouvez contourner cette difficulté en créant une icône carrée sans transparence, mais cette solution est toutefois moins esthétique. Les canaux alpha de couleur unique, comme les images GIF, comportent des bordures arrondies et granuleuses, contrairement aux icônes correctement conçues à l'aide d'un canal alpha, comme celles de la barre d'outils Google Toolbar ou d'Internet Explorer. Icônes et info-bulles avec mise à jour automatiqueL'une des fonctionnalités les plus intéressantes des boutons personnalisés réside dans la mise à jour de leurs icônes et info-bulles à partir d'un serveur distant, à intervalles réguliers. À cet effet, les boutons utilisent un flux RSS. Cela permet d'utiliser les boutons comme système de notification ou comme icône d'état (par exemple; pour la météo ou tout ce que vous pouvez imaginer). Un bouton peut également être doté d'un menu déroulant contenant des éléments, eux-mêmes dotés de texte ou d'icônes. Chaque élément du menu peut avoir sa propre URL dynamique, lancée par clic. Des exemples sont fournis dans la section suivante. Ajout d'un flux RSS
Les flux RSS utilisent l'élément <feed refresh-interval="1800">http://rss.cnn.com/rss/cnn_topstories.rss</feed> Le protocole permettant d'obtenir ces flux de mise à jour est Atom 1.0, Atom 0.3, RSS 2.0 ou RSS 1.0. Les flux standard devraient fonctionner normalement. Utilisation d'un flux pour la mise à jour de l'icône ou de l'info-bulle d'un boutonPour effectuer, à partir d'un flux, la mise à jour d'une icône de la barre d'outils ou de son info-bulle, vous devez ajouter une extension spécifique à la barre d'outils RSS ou ATOM à l'aide d'un espace de nom. Exemple de bouton « perceptif » connecté à un flux : <?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Mood ring</title>
<description>Your virtual mood ring</description>
<site>http://www.google.com/search?q=mood+ring</site>
<feed menu="false" refresh-interval="900">
http://www.example.com/custombuttons/samples/feeds/mood</feed>
</button>
</custombuttons>
Remarquez la mention En situation réelle, le flux donnerait : <?xml version='1.0'?>
<feed xmlns='http://www.w3.org/2005/Atom'
xmlns:gtb='http://toolbar.google.com/custombuttons/'>
<id>http://www.example.com/custombuttons/samples/feeds/mood</id>
<title>Mood</title>
<link href='http://www.google.com/search?q=+ring' />
<link rel='self'
href='http://www.example.com/custombuttons/samples/feeds/mood' />
<gtb:description>Bluegreen:
Inner emotions charged, somewhat relaxed</gtb:description>
<gtb:icon mode="base64" type="image/x-icon">
AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAGAAAAHAAAAEAAAABhAAAAcwAAAHQAAABpAAAAVQAAAD4AAAApAAAAGAAAAAoAAAAD
AAAAAQAAAAAAAAAAAAAAESZIXl4zdJvAXbHS8m3C3f9LnrrLFUtsmwILEX4AAABzAAAAYQAAAEcA
AAAqAAAAEwAAAAcAAAACAAAAACs9RTNOjrDtW6nS/53u/f+n/P//hej//2bP/P9Fq93wHGaNrxEv
O4kAAAB6AAAAXwAAADwAAAAfAAAADAAAAANihaWST6XK/0h/kcAdKCyWKTtAgVJ/kIhytNKse873
9E+w6v9RuN39SXuJpgQHCIoAAAB2AAAAUQAAACsAAAAPb6nU7mK65v9jqs76KkNPqAUICJoAAACE
AAAAaxUgJWBkrMiwsvv+//D+/v+y1NniIj1FnAAAAIgAAABcAAAALHS74PV1zPn/c835/1Oezv9N
iq7vNVRjrxUiJ5kBAgORAQICh3uLjZz3+vr1+f///4PL5/wvVmusAAAAigAAAFNyu+TPdtL8/0Cp
7v8ng8X/CFOH/ytpjv86gJ//R46z+Th6jsovVmCsd56pxNf2/f9TuPH/W7fs/ypGV6UAAAByf77Y
r02y7P9Zwfb/puH3/y+AtP8jZ5f/KWKH/0p7hP+ZrVr/zcUt/9vMKf/bzSz/tsBP/3OzrP9kl7Pp
AAAAgHGdpThatuT/0fn+//b///+V0uv/NICu/4mvfP/czjL/3M0v/9rMKP/dzzT/3c83/9vNLf/b
zS//nrWA/gAAAIMAMzMFbrrd2d/+///5////t+n6/4q6nf/czzX/3tA+/97QPf/czjP/3dA7/97R
Qv/czjD/3M4z/9DHLPoAAAB/AAAAAWShtUix5+//5v7+/5Hf7//Bvjn/3M0v/9/SSP/g1FL/39RR
/+DVWv/e0kf/3tFA/9zNL//bzCj/AAAAbwAAAAAAAAADcq7Fmpzo8f9rsL3/2ssl/93POf/f0kj/
49pu/+ffhP/q45b/49pp/97SSv/czS//yb0q4wAAAE8AAAAAAAAAAF54hhNrq77BXpCj/7+7Of/c
zjH/3tFH/+bdeP/w7cv/9PLa/+zlnf/g1VP/1so5/mBfJHsAAAArAAAAAAAAAAAAAAABa5GgIHWs
t/dymG3/3tE//9/UUv/o4Ij/9PHT//v67P/v6a3/08xY/3uMX6UAAAAuAAAAEAAAAAAAAAAAAAAA
AAAAAAKSvb9YSoWa+WyagP+wv2X/4NRO/+ngfv/m4Zf/rLeB+lpubIkAAAAlAAAADgAAAAMAAAAA
AAAAAAAAAAAAAAAAAAAAAoqvuDxkkp2gYo+c51mHkv9lk5v/Y4eNtlBfaEgAAAAWAAAACQAAAAIA
AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
AADgAAAA8AEAAA==
</gtb:icon>
</feed>
L'exemple ci-dessus illustre un flux Atom 1.0, avec l'espace de nom des boutons Google personnalisés spécifiés de la façon suivante : xmlns:gtb='http://toolbar.google.com/custombuttons/' Pour ignorer l'info-bulle associée au bouton, spécifiez : <gtb:description> new-description </gtb:description> Pour ignorer l'icône associée au bouton, spécifiez : <gtb:icon> icon-base64-code </gtb:icon> Le script PHP à la base de ce système complexe d'analyse « perceptive » se présente comme suit : <?php
header('Content-type: text/xml');
switch(rand(1, 7)) {
case 1:
$icon = "amber.ico";
$desc = "Amber:\nNervous, on edge, uncertain";
break;
case 2:
$icon = "black.ico";
$desc = "Black:\nTense, stressed, working too hard";
break;
case 3:
$icon = "blue.ico";
$desc = "Blue:\nComfortable, breeze, at rest, loveable";
break;
case 4:
$icon = "bluegreen.ico";
$desc = "Bluegreen:\nHeightened inner emotional state, moderately relaxed";
break;
case 5:
$icon = "gray.ico";
$desc = "Gray:\nAnxious, ill at ease, strained";
break;
case 6:
$icon = "green.ico";
$desc = "Green:\nSteady, stable, no emotional turmoil";
brea;
case 7:
$icon = "purple.ico";
$desc = "Dark Blue:\nImpassioned, delighted, whiff of romance";
break;
}
$icon = base64_encode(file_get_contents($icon));
echo "<?xml version='1.0'?>";
echo "\n<feed xmlns='http://www.w3.org/2005/Atom' xmlns:gtb='http://toolbar.google.com/custombuttons/'>";
echo "\n<id>http://www.example.com/custombuttons/samples/feeds/mood</id>";
echo "\n<title>Mood</title>";
echo "\n<link href='http://www.google.com/search?q=$mood+ring' />";
echo "\n<link rel='self' href='http://www.example.com/custombuttons/samples/feeds/mood' />";
echo "\n<gtb:description>$desc</gtb:description>";
echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";
echo "\n</feed>";
?>
Les icônes doivent se trouver dans le même dossier que le script. Utilisation d'un flux pour la mise à jour des icônes du bouton et du menu déroulant
Vous pouvez également ajouter des icônes personnalisées de type serveur aux éléments du menu déroulant du flux. Voici un exemple de bouton météo doté d'un flux avec menu déroulant (paramètre par défaut) mais spécifiant également
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Weather 94043</title>
<description>Weather updates for Mountain View, CA</description>
<site>http://www.google.com/search?q=weather+94043&num=1</site>
<feed refresh-interval="3600" refresh-menuitem="false">
http://www.example.com/custombuttons/samples/feeds/weather?zip=94043</feed>
</button>
</custombuttons>
L'exemple suivant présente un flux météo, avec une icône personnalisée en regard de chaque élément du menu déroulant (pour plus de clarté, la plupart des éléments relatifs au codage de l'icône en base64 ont été supprimés). Vous pouvez voir l'exemple ci-dessus à l'adresse suivante : <?xml version='1.0'?>
<feed xmlns='http://www.w3.org/2005/Atom'
xmlns:gtb='http://toolbar.google.com/custombuttons/'>
<id>http://www.example.com/custombuttons/samples/feeds/weather</id>
<title>Weather Mountain View, CA</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<link rel='self'
href='http://www.example.com/custombuttons/samples/feeds/weather' />
<gtb:description>Mountain View, CA
63F Mostly Cloudy
Humidity: 48%
Wind: NW at 8 mph</gtb:description>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
... and so on...
</gtb:icon>
<entry>
<title>Today: Mostly Cloudy 65 | 50</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/0</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
... and so on...
</entry>
<entry>
<title>Thu: 66 | 51</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/1</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoAPcAAAAAAP///4WOwPT1+tDT3unr8sHG1ff5/6Wy0mZ8rGqAr3mJrJakxa+zvHSK
tcDBw1R2slBql110njBXjztmqS9OfjtekTZWhGeJuoqctklLTgJYyQJQtQ9hzhRr3BZlzBVRoS1S
... and so on...
</gtb:icon>
</entry>
<entry>
<title>Fri: 67 | 51</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/2</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
... and so on...
</gtb:icon>
</entry>
<entry>
<title>Sat: 67 | 50</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/3</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
... and so on...
</gtb:icon>
</entry>
</feed>
Pour les flux de la barre d'outils, vous pouvez également utiliser les mêmes espaces de nom et descriptions ou les balises « http://toolbar.google.com/custombuttons/ » dans les flux RSS 1.0, RSS 2.0, Atom 1.0 et Atom 0.3. Support multilingueUn bouton personnalisé peut gérer des URL de substitution, des icônes et du texte en fonction des paramètres régionaux spécifiques de la barre d'outils. Les deux méthodes possibles sont répertoriées ci-dessous. Nous vous recommandons d'utiliser la première méthode. Utilisation d'un attribut de paramètres régionaux
La méthode recommandée consiste à créer une liste de balises XML, chaque balise utilisant un attribut <?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<title>Wikipedia</title>
<site>http://www.wikipedia.org</site>
<site locale="fr">http://fr.wikipedia.org</site>
<site locale="es">http://es.wikipedia.org</site>
<description>The Free Encyclopedia</description>
<description locale="fr">L'encyclopdie libre</description>
<description locale="es">La enciclopedia libre</description>
</button>
</custombuttons>
Si les paramètres régionaux de la langue actuelle de la barre d'outils ne se trouvent pas directement dans la balise XML, la première balise de la liste ci-dessus est utilisée comme balise par défaut. Utilisation de la variable {locale}
L'autre méthode consiste à utiliser la variable Tableau des paramètres régionaux ISOLes paramètres régionaux actuellement pris en charge par la barre d'outils sont les suivants :
Où héberger votre boutonL'URL de téléchargement que vous utilisez pour héberger le fichier XML du bouton est importante puisqu'elle devient l'identifiant unique du bouton, utilisé lors des mises à jour de ce même bouton. Si vous effectuez une seconde tentative de téléchargement d'un bouton à partir de la même URL, la barre d'outils vous propose uniquement de remplacer l'ancien bouton et non d'en ajouter un nouveau. Pour plus d'informations, consultez la rubrique Mise à jour d'un bouton personnalisé. Ajout de votre bouton à la Galerie des boutons GoogleAjoutez votre nouveau bouton à la Galerie des boutons Google afin de le faire connaître à un grand nombre d’utilisateurs. Votre fichier XML doit déjà être hébergé quelque part (la Galerie des boutons établit un lien direct avec le fichier) et doit être conforme à nos consignes de rédaction. Si vous avez créé un bouton pour un site dont vous êtes propriétaire, vous devez héberger votre fichier XML sur le même domaine que votre site. Les boutons de la Galerie des boutons Google sont identifiés comme étant « officiels » s'ils sont hébergés sur le domaine auquel le bouton permet d'accéder. Les utilisateurs sont ainsi en mesure de trouver plus facilement le bouton officiel de votre site. Une fois que vous avez effectué ces opérations, remplissez le formulaire de demande de la Galerie des boutons afin d'informer Google de l'existence de votre bouton. Lien vers votre bouton à partir de votre siteVous pouvez faire en sorte que votre bouton soit disponible sur votre site en créant un lien d'installation. Lorsqu'un utilisateur de la barre d'outils Google 4 clique sur le lien, il est invité à installer votre bouton. Si l'utilisateur ne dispose pas d'une version compatible de la barre d'outils, le lien le dirige alors vers la page de téléchargement de la barre d'outils Google. Un développeur peut créer un lien d'installation à l'aide de la syntaxe d'URL suivante : http://toolbar.google.com/buttons/add?url=url
dans laquelle l'élément url pointe vers le fichier XML du bouton personnalisé. Par exemple, le lien suivant permet d'installer un bouton Slashdot.com : <a href="http://toolbar.google.com/buttons/add?url=http://www.slashdot.org/slashdot_button.xml">Add</a> Le libellé de ce lien est « Ajouter ». Lorsqu'un utilisateur clique sur ce lien, le bouton Slashdot.com est installé sur sa barre d'outils Google. L'URL Google ci-dessus est en fait un déclencheur signalant à la barre d'outils qu'elle doit installer un bouton personnalisé. Si l'utilisateur ne dispose pas d'une version compatible de la barre d'outils, il est alors invité à l'installer. Une fois la barre d'outils installée, le bouton personnalisé est ajouté automatiquement. Gestion de votre trafic de fluxLe trafic Web peut se révéler problématique si vous utilisez des flux. Si vous pensez que votre bouton aura du succès et qu'il génèrera un trafic important, il ne doit pas orienter son flux vers un serveur limité en bande passante. Le serveur risque d'être saturé par les requêtes d'actualisation. Le bouton personnalisé dispose de son propre attribut de fréquence d'actualisation pour les flux. La barre d'outils respecte le délai d'« Expiration » fourni par le serveur dans l'en-tête HTTP. Ce paramètre écrase le paramètre de fréquence d'actualisation du bouton. Si votre serveur est surchargé, vous pouvez augmenter le délai d'« Expiration » afin de réduire la charge. Par exemple, si un bouton est défini pour une actualisation toutes les heures, le délai d'« Expiration » peut être défini pour une actualisation quotidienne, ce qui limite radicalement le trafic (en réduisant certes la fréquence d’actualisation du bouton).
Exemple de script PHP permettant de définir le délai
<?php
$expires = gmdate("D, d M Y H:i:s", time() + 3600 * 24 * 7) . " GMT";
Header("Expires: " . $expires);
?>
Exemple de réponse HTTP en provenance du serveur : HTTP/1.1 200 OK Date: Thu, 05 Jan 2006 23:39:54 GMT Server: Apache/2.0.47 (Red Hat Linux) Accept-Ranges: bytes X-Powered-By: PHP/4.3.2 Expires: Thu, 12 Jan 2006 23:39:54 GMT Transfer-Encoding: chunked Content-Type: text/htmlRéférences XMLLe fichier XML d'un bouton personnalisé est structuré de la façon suivante :
<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
<button>
<!-- XML elements -->
</button>
</custombuttons>
Les éléments XML suivants peuvent figurer au sein d'un élément
Caractères d'échappementLes chaînes des fichiers XML (et HTML) requièrent que les trois caractères suivants soient codés par échappement, comme l'illustrent les entités HTML suivantes :
Variables
REMARQUE : Une syntaxe conditionnelle
Les variables suivantes, ou paramètres d'échappement, sont utilisées dans les éléments répertoriés dans le champ d'application spécifié. Par exemple,
|