Vous avez un site web en relation avec la photographie, la vente ou l'essai d'appareils photo ou d'imprimantes, un site web sur un thème où l'on fait beaucoup de photos (les voyages, l'évenementiel etc...), un site comparateur de prix, un annuaire de services gratuits ou de comparateurs etc... Alors notre service est fait pour vous :
Vous allez pouvoir intégrer notre catalogue de produits photo ainsi que notre calculateur/comparateur de prix dans votre site web avec les couleurs et le style de votre choix. Ce service est totalement gratuit et va permettre d'augmenter votre trafic en fidélisant vos visiteurs. En effet, notre service est le seul à pouvoir calculer - à la photo près - le cout réel d'un développement photo et donner ainsi la boutique en ligne la moins chère : Vos visiteurs seront donc tentés de revisiter votre site lors de leur prochain tirage photo pour connaitre quel sera le marchand le moins cher avec un autre nombre de photo ou tout simplement pour connaitre les nouveaux produits photos disponibles. Notre site aborde aussi l'aspect qualitatif du développement photo en précisant le type de papier utilisé par le marchand et donne aussi les promotions pour les nouveaux inscrits (tirages gratuits, réductions) : C'est autant d'informations utiles qui vont donner envie aux visiteurs de revenir sur votre site.
Cela va vous faire gagner de l'argent car vous allez pouvoir mettre votre publicité de part et d'autre du service : Comme notre service n'inclut pas de bandeau publicitaire, les visiteurs iront donc cliquer sur votre publicité. Prennez juste soin de choisir des publicités relatives à la photographie pour optimiser vos revenus. Ou alors prennez un système de publicité qui s'optimise automatiquement en fonction de votre contenu, nous vous conseillons Google Adsense :
Après installation et réglage du look de notre calculateur/comparateur de prix, vos visiteurs penseront que vous avez développé un nouveau service sur votre propre site web : Vous pourrez montrer ainsi que vous faites vivre votre site web tout en apportant des informations utiles à vos visiteurs.
Pour intégrer notre service sur votre site web, un simple copier-coller d'un code HTML suffit. Il n'y a pas besoin de s'inscrire : prenez juste connaissance du mode d'emploi du code HTML ci-dessous et mettez votre site à jour tout de suite.
Pour afficher notre service, vous devez include sur votre site web une, et un seule des trois possibilités de code HTML suivantes :
1) Le code HTML minimaliste :| <iframe name="photocost" src="http://www.photocost.com/index.php?pc_iframe=1&pc_text=000000" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="1200" scrolling="yes" width="100%"></iframe> |
Ce code va afficher le service en caractères noir sur votre page web via une iframe de 1200 pixel de haut (laissez ce chiffre volontairement grand, car il faut prévoir de la place pour afficher le résultat de la recherche de tarifs). Si vous souhaitez utiliser une autre couleur de texte, remplacez dans le code HTML,
pc_text=000000par
pc_text=[votre couleur]
Quelques exemples de couleurs :
pc_text=000000 : noir pc_text=FFFFFF : blanc pc_text=FF0000 : rouge pc_text=00FF00 : vert pc_text=0000FF : bleu pc_text=FFFF00 : jaune pc_text=FF00FF : violet pc_text=00FFFF : cyan
NOTE : Notre service utilise un fond transparent par défaut, c'est donc la couleur ou motif de fond de votre propre site web qui sera utilisé.
Avec le code HTML qui vient d'etre donné ci-dessus, c'est la page principale qui sera affichée, elle contient la liste des catégories et sous-catégories des produits photos disponibles. Si vous désirez afficher directement le calculateur de prix, il suffit de remplacer index.php par search.php, le code devient donc :
| <iframe name="photocost" src="http://www.photocost.com/search.php?pc_iframe=1&pc_text=000000" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="1200" scrolling="yes" width="100%"></iframe> |
Pour configurer plus finement le service, vous devez lui founir les différents paramètres en mettant dans le code HTML après index.php? le nom du paramètre, suivi du signe égal suivi de la valeur que l'on souhaite donner au paramètre. Les paramètres/valeurs doivent etre séparer entre eux par le signe '&'. Dans l'exemple suivant, on a positionné les paramètres pc_param1 et pc_param2 avec les valeurs respectivement, valeur1 et valeur2 :
| <iframe name="photocost" src="http://www.photocost.com/index.php?pc_iframe=1&pc_param1=valeur1&pc_param2=valeur2..." marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="1200" scrolling="yes" width="100%"></iframe> |
Voici un tableau donnant le nom des paramètres, les valeurs attendues et la valeur par défaut. Notez que vous n'êtes pas obligé de spécifier tous les paramètres : ne mettez que ceux qui vous interessent.
| Paramètres | Valeur attendue | Valeur par défaut |
|---|---|---|
| pc_bgcolor | Couleur de fond (en hexadécimal sans le '#') | transparent |
| pc_text | Couleur des caractères (en hexadécimal sans le '#') | 000000 |
| pc_link | Couleur des liens hypertextes (en hexadécimal sans le '#') | =pc_text |
| pc_hover | Couleur des liens hypertextes quand on passe dessus (en hexadécimal sans le '#') | =pc_link |
| pc_grid | Couleur de la grille du tableau comparatif (en hexadécimal sans le '#') | =pc_text |
| pc_shop_bg | Couleur de fond de la colonne boutique du tableau comparatif (en hexadécimal sans le '#') | =pc_text |
| pc_shop_fg | Couleur des caractères de la colonne boutique du tableau comparatif (en hexadécimal sans le '#') | =pc_bgcolor |
| pc_th_bg | Couleur de fond des titres de colonne du tableau comparatif (en hexadécimal sans le '#') | =pc_shop_bg |
| pc_th_fg | Couleur des titres de colonne du tableau comparatif (en hexadécimal sans le '#') | =pc_shop_fg |
| pc_fontsize | Taille des caractères (en pixels) | 12 |
| pc_short | Permet de demander une version plus étroite du service de manière à le faire rentrer sur des sites web de faible largeur. En version etroite, les deux dernières colonnes du tableau comparatif sont supprimée, c'est-à-dire : "traitement" et "papier" - Valeur à 0 : service normal - Valeur à 1 : service étroit (2 colonnes en moins) | 0 |
Exemple : vous avez un site qui a un fond bleu clair, des caratères de 11 pixels de haut de couleur bleu foncé, vos liens sont de couleur rouge et deviennent jaunes quand on passe la souris au-dessus. Votre site est de type 'portail' c'est à dire un contenu pris en sandwich entre deux colonnes (menus et publicités) : le contenu a donc une largeur limité (500 pixels par exemple), voici donc le code HTML qui conviendrait :
| <iframe name="photocost" src="http://www.photocost.com/index.php?pc_iframe=1&pc_bgcolor=DDDDFF&pc_text=0000FF &pc_link=FF0000&pc_hover=FFFF00&pc_fontsize=11&pc_short=1" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="1200" scrolling="yes" width="100%"></iframe> |
Pour avoir un controle total sur le look de notre service, vous pouvez spécifier une feuille de style .css dans le code HTML. Dans ce cas, tous les autres paramètres 'pc_*' seront ignorés. Cette methode est réservée à ceux qui connaissent la syntaxe des feuilles de style.
Pour savoir quelles classes, et quels tags définir, nous vous proposons de consulter notre propre feuille de style ci-dessous. Le mieux est de la reprendre entièrement et de ne modifier que les parties qui vous interesse.
/*########################################################################
Feuille de style du site PhotoCost.com
########################################################################*/
/*--------------------------------------------------------------*/
/*définition du tag BODY : définit le motif de fond de page web,
taille des caractères utilisé et marges*/
/*--------------------------------------------------------------*/
BODY {
background-image: url(images/background.gif);
font-family: Arial, helv, sans-serif;
font-size: 14px;
margin-top: 20; margin-bottom: 20;
}
/*--------------------------------------------------------------*/
/* Définition des liens hypertextes standards*/
/*--------------------------------------------------------------*/
A:link, A:visited, A:active {
color: #FF0000;
text-decoration:none;
}
/*--------------------------------------------------------------*/
/* Définition des liens hypertextes standards,
quand on passe la souris dessus*/
/*--------------------------------------------------------------*/
A:hover {
color: #000000;
text-decoration:underline;
}
/*--------------------------------------------------------------*/
/* Définition des liens principaux hypertextes utilisés
en haut de la page*/
/*--------------------------------------------------------------*/
A.mainlinktop:link, A.mainlinktop:visited, A.mainlinktop:active {
padding-left:10px;
padding-right:2px;
padding-top:2px;
padding-bottom:2px;
background-image: url(images/mainlinktop.gif);
font-weight: bold;
color: #FFFFFF;text-decoration:none;
}
/*--------------------------------------------------------------*/
/* Définition des liens principaux hypertextes utilisés
en haut de la page,
quand on passe la souris dessus */
/*--------------------------------------------------------------*/
A.mainlinktop:hover {
color: #000000;
background-image: url(images/mainlinktop_hover.gif);
padding-bottom:0px;
}
/*--------------------------------------------------------------*/
/* Définition des liens hypertextes utilisés
pour les titres de catégorie sur index.php
/* NOTE : non utilisé quand on integre notre service
à un autre site web */
/*--------------------------------------------------------------*/
A.cat {
font-size: 14px;
font-weight: bold;
text-decoration:underline;
}
/*--------------------------------------------------------------*/
/* Définition des liens hypertextes utilisés
pour les liens sous les categorie sur index.php
/* NOTE : non utilisé quand on integre notre service
à un autre site web */
/*--------------------------------------------------------------*/
A.subcat {
font-size: 11px;
color: #000000;
}
/*--------------------------------------------------------------*/
/* définition des titre de niveau 1 et 2*/
/*--------------------------------------------------------------*/
H1 {
font-size: 24px;
font-weight: bold ;
margin: 0px;
padding: 0px;
}
H2 {
font-size: 16px;
font-weight: bold ;
margin: 0px;
padding: 0px;
}
/*--------------------------------------------------------------*/
/* définition des cellules dans tous les tableaux de la page web*/
/*--------------------------------------------------------------*/
TD {
font-family: Tahoma, Arial, Helv, sans-serif;
font-size: 14px;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour afficher un listing,
(ex : les codes HTML présenté dans la page
integration.php utilisent ces classes */
/* NOTE : non utilisé quand on integre notre service
à un autre site web */
/*--------------------------------------------------------------*/
.listing {
border-style : dotted;
border-color : #FF0000;
border-width : 2px;
background-color: #EEEEEE;
color: #FF0000;
font-family: 'Courier New' , Monospace;
padding:5px
}
/*--------------------------------------------------------------*/
/* définition du rectangle principal
qui entoure toutes les informations */
/* NOTE : non utilisé quand on integre notre service
à un autre site web */
/*--------------------------------------------------------------*/
TABLE.main_table {
background-color: #FFFFFF;
border-style : solid;
border-color : #5D5D5D;
border-width : 3px ;
}
/*--------------------------------------------------------------*/
/* définition du tableau comparatif */
/*--------------------------------------------------------------*/
TABLE.shop_table {
background-color: #FFFFFF;
width: 100%;
margin:0px;
border-collapse: collapse;
}
/*--------------------------------------------------------------*/
/* définition des titres de colonnes dans le tableau comparatif */
/*--------------------------------------------------------------*/
TH {
background-image: url(images/th_background.jpg);
font-family: Tahoma, Arial, Helv, sans-serif;
font-size: 12px;
font-weight : bold;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour écrire en petit */
/*--------------------------------------------------------------*/
.small {
font-family: Tahoma, Arial, Helv, sans-serif;
font-size: 9px;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour afficher le nombre de boutiques trouvées
dans la recherche */
/*--------------------------------------------------------------*/
TD.shop_found {
color: #5D5D5D;
font-size: 20px;
font-weight: bold;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour écrire la signification d'un input de type select
Par exemple "Photos standards :"
ou "Panorama" sont écrits avec cette classe */
/*--------------------------------------------------------------*/
TD.select_desc {
font-size: 14px;
font-weight: bold;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour les input de type select */
/*--------------------------------------------------------------*/
.select_input {
font-size: 10px;
width:250px;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour les cellules de tableau contenant
un input de type select */
/*--------------------------------------------------------------*/
TD.select_input_cell {
font-size: 10px;
}
/*--------------------------------------------------------------*/
/* définition du tableau des listes de choix de objets/photos */
/*--------------------------------------------------------------*/
TABLE.select_table {
margin:0px;
border: 0px;
border-collapse: collapse;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour les liens dans le nom
des colonnes du tableau comparatif */
/*--------------------------------------------------------------*/
A.header {
color: #000000;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour décrire les cellules de la 1ere colonne
(nom des boutiques) du tableau comparatif */
/*--------------------------------------------------------------*/
TD.shop {
border: 1px solid #333333 ;
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
padding: 3px;
font-size: 11px
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour décrire les autres
cellules du tableau comparatif */
/*--------------------------------------------------------------*/
TD.shopinfo {
border: 1px solid #EEEEEE ;
padding: 3px;
font-size: 11px;
}
/*--------------------------------------------------------------*/
/* Classe utilisée pour décrire les liens hypertextes utilisés dans
la 1ere colonne (nom des boutiques) du tableau comparatif */
/*--------------------------------------------------------------*/
A.shop, A.shop:visited, A.shop:active {
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
text-decoration:none
}
/*--------------------------------------------------------------*/
/* idem ci-dessus, mais quand la souris survole ces liens */
/*--------------------------------------------------------------*/
A.shop:hover {
background-color: #000000;
color: #FFFFFF;
font-weight: bold ;
text-decoration:underline
}
/*--------------------------------------------------------------*/
/* Pour faire un effet de couleur avec mozilla
(ne marche pas avec Internet Explorer) :
ces 2 définitions de classe permettent de mettre en avant
la ligne du tableau compartif que survole la souris */
/*--------------------------------------------------------------*/
TR.shopline {
font-family: Tahoma, Arial, Helv, sans-serif;
font-size: 11px;
background-color: #ffffff;
color: #000000
}
TR.shopline:hover {
background-color: #FF0000;
color: #FFFFFF;
}
|
La feuille de style devra être déposée sur votre serveur web, dans l'exemple qui suit elle sera mise à la racine de votre serveur web et aura pour nom photocost.css
Voici le code HTML à ajouter sur votre site web pour faire apparaitre le service :
| <iframe name="photocost" src="http://www.photocost.com/index.php?pc_iframe=1&pc_css=http://votresite.com/photocost.css" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" frameborder="0" height="1200" scrolling="yes" width="100%"></iframe> |
Dans ce code HTML, veuillez remplacer http://votresite.com par l'adresse de votre site internet.
IMPORTANT : Dans vos tests, n'oubliez pas que les navigateurs mettent en cache les fichiers .css, donc si vous faites des modifications dans ce genre de fichier, il faut penser à réactualiser le navigateur (bouton actualiser sur IE ou shift+actualiser sur Mozilla/netscape, parfois, il faut mettre l'url du .css dans le navigateur + cliquer sur actualiser). Si vous ne faites pas cela, vous risquer de ne pas voir les modifications apportées à votre feuille de style
Si vous voulez voir un exemple d'integration avec la méthode de la feuille de style, regardez cette page du site #1 Amour