[eBay] Conception et design de votre AboutMe

Comment commencez ce post ? Bon, je ne passerai pas par quatre chemins. Votre AboutMe est une caractéristique très utile que vous pouvez utiliser pour maximiser la confiance de vos (futurs) acheteurs.

Comment ça marche ?
L’AboutMe est une page qui vous appartient, vos acheteurs vont voir un petit logo à côté de votre usager eBay. Quand il clique dessus, il est amené à la page suivante : http://members.ebay.ca/ws/eBayISAPI.dll?ViewUserPage&userid=0xcafe et c’est cette page précisément que nous voulons modifier.

Contenu
Commençons par le contenu de votre AboutMe. Par défaut, vous pouvez remplir un formulaire qui placera l’information de façon prédéfinie. Cette information est vos dernier feedbacks, vos items présentement en vente et une petite description de votre part. Rien de bien bien méchant. Mais nous, ce que nous voulons c’est nous démarquer! Nous allons choisir l’option HTML et remplir le tout de HTML+CSS !

Par contre, il y a certaines règles à suivre : About Me Guidelines Je vous conseille fortement de les lire, car les conséquences peuvent être très importante (lire annulation de votre compte).

Modification du code
Tout d’abord, il vous faut comprendre comment le code de cette page est défini. Regardez cette image pour en comprendre la définition.

Comme vous pouvez voir, nous avons un tableau rouge qui encadre le eBay.ca, Home et About Me: Ensuite, nous avons un autre tableau où dans une rangé d’une cellule, nous mettons notre code.

Une des règles d’eBay est que nous ne devons en aucun cas modifier ce qui ne tombe pas dans cette cellule. Pour être sûr que notre CSS n’affecte pas l’extérieur, je vous suggère d’utiliser un <div> pour bien encadrer vos modifications.

<div id="MyAboutMe">  Votre code vient ici!</div>

Maintenant, vous devez faire une belle page en HTML et la « styler » en CSS.

Pour faire du HTML pas de problèmes, juste à prendre une copie (File | Save As) d’un AboutMe existant et de trouver la cellule où votre code doit aller. Si vous prenez mon AboutMe par exemple (0xCAFE) cet endroit se trouve à la ligne 115. Tout juste après :

Donc, votre code aura l’air de quelque chose comme ça.

[…] ebay.oDocument.oPage.createConfig();
//–>

<script src= »http://include.ebaystatic.com/js/e503/ca/features/my_ebay/members_e5032ca.js »> </script>
<div id= »MyAboutMe »>
/* Votre code ici! */
</div>
<br><table border= »0″ cellpadding= »0″ cellspacing= »0″ width= »100% »>
<tr>
<td colspan= »2″></td>
[…]

Où mettre quoi ?
Pour avoir du CSS, vous devriez utiliser un fichier .css externe et l’héberger sur un serveur fiable (lire votre serveur ou un serveur sans problème de bandwidth). Ma suggestion ? Google Page Creator vous permet d’uploader des fichiers .css et de les accéder directement du web. Idéal et gratuit!

Pour le HTML, on l’écrit directement dans la section AboutMe. Pas de droit d’avoir des <iframe>. Et un très bon conseil, ne vous fier pas au preview car il peut vous montrer des choses qui seront différente une fois la page enregistré; ou pire encore, vous montrer des choses qui seront jugé illégale lors de la sauvegarde!

Pour accéder à votre CSS, je vous conseille le code suivant :

<div id="MyAboutMe">  <link rel="stylesheet" type="text/css"href="http://xxxx.googlepages.com/votre_css.css">

<!-- Add HTML here! -->

</div>

Ou si vous préférer le mettre directement dans la page AboutMe :

<div id="MyAboutMe">  <style type="text/css">div#MyAboutMe {

font: 12pt "Trebuchet MS", sans-serif; padding: 0px 0px 3px 0px

}

#MyAboutMe p {

font: 12pt "Trebuchet MS", sans-serif; margin:0;

padding: 5px 10px; line-height: 1.3; text-align: justify;

}

#MyAboutMe .smallText {font-size: 8pt}

[...]

</style>

<!-- Add HTML here! -->

</div>

L’important c’est d’utiliser le #MyAboutMe qui restreint vos modification CSS à votre <DIV id= »MyAboutMe »> sans affecter les sections appartenant à eBay. Donc, vous suivez les règles et tout le monde est content! 😛

Testing!
Comme je l’ai dit plus haut, la meilleure façon de tester votre AboutMe n’est pas d’utiliser le Preview d’eBay, mais bien de sauvegarder un AboutMe existant et d’en modifier le contenu localement sans toucher aux sections réservés à eBay. De cette façon, vous jouer le rôle du serveur web qui place votre code à l’intérieur de la page d’eBay.

Feedback & Items to sale
En plus de votre propre code, vous pouvez ajouter deux items générés automatiquement par eBay. Les tableaux de feedback et des items à vendre. Tout ce que vous avez à faire c’est d’ajouter deux lignes dans votre HTML et eBay s’occupera d’en générer le contenu.

Pour plus d’information regarder la page suivante : Special HTML Tags; vous y trouverai toute l’information pour bien générer vos tableaux dynamique.

Où je viens vous aider c’est de faire aligner ces tableaux. Comme nous n’avons pas le code généré, nous ne pouvais lui donné un ID et l’utiliser pour positionner le tableau à notre façon. Nous devons donc utilisé le code suivant.

<div style="padding-left: 10px; font: 12pt "Trebuchet MS", sans-serif;">  <!-- Feedback Comments --><ebayfeedback tablewidth="75" border="0" cellpadding="-1"

cellspacing="-1" SIZE="5" COLOR="white" displaymode="0" pagesize="0">

<!-- End Feedback Comments -->

</div>

En mettant le tableau dans un autre <div> nous pouvons lui assigner un style CSS et le faire aligné comme le reste du texte. Je dois avouer que ce code est un peu particulier à mon propre AboutMe, mais ça peut être un exemple intéressant pour vous éviter de perdre du temps à tourner en ronds comme moi 😛

Même principe pour votre lise d’items à vendre.

<div style="padding-left: 10px; font: 12pt "Trebuchet MS", sans-serif;">  <!-- Item Listings Table --><ebayitemlist SORT="3" caption="" SIZE="15" SINCE="-1" displaymode="0"

pagesize="0" tablewidth="75" border="0">

<!-- End Item Listings Table -->

</div>

PayPal Verified
Un attribut important pour l’acheteur, savoir et surtout voir que vous avez un compte PayPal vérifié. Une fois vérifié, vous pouvez assurer vos ventes pour quelques centaines de dollars et une fois que vous avez un score de 50 de feedback c’est 2000$ d’assurance pour vos acheteurs. Vous avez simplement à ajouter le code suivant.

<a href="https://www.paypal.com/us/verified/pal=<VOTRE ADRESSE DE COURRIEL>"   target="_blank"><img style="border: 0px solid ; width: 88px; height: 33px;"

src="https://www.paypal.com/en_US/i/logo/logo3v.gif"

alt="I am PayPal Verified" title="I am PayPal Verifed">

</a>

N’oubliez pas de changé le pal=<VOTRE ADRESSE DE COURRIEL> dans le code précédent!

Conclusion
Bon, avec tout ces trucs, je crois que vous êtes fin prêt à créer un beau AboutMe et attirer beaucoup d’acheteurs potentiels!

Tweetez Partagez Partagez Partagez Partagez Épinglez