La blogosphère est constamment inondée de nouvelles tendances et les bonnes idées y circulent vite. C’est tant mieux ! Ces derniers mois les blogs mode se sont rapprochés de véritables magazines de mode à travers la mise en avant des produits présentés dans les looks et des marchands proposant les pièces en question. La mode est donc à la bannière produits améliorée. Fini les liens peu parlant et bien moins incitatifs. Si vous êtes un féru de blogs mode, vous n’avez pas pu passer à côté. Quelques modeuses se sont en effet déjà prêté au jeu.

Comment créer ces bannières avec images de produits en fin d’article ?  Utilisent-elles un plug in, un widget et si oui lequel ? J’ai passé un certain temps à décrypter cette nouvelle tendance dont voici quelques exemples.

Image Map : la bannière produit multi liens

  • Le blog de Betty

imagemap

  • Tokyobanhbao

tokyobanhbao

  • Le blog de la méchante

le blog de la méchante image map

L’inspiration des magazines de mode

Voici une photo d’un magazine de mode, prise par labeautedelam.com, où l’on retrouve la mise en valeur des produits portés par les mannequins ou s’en inspirant. L’idée est la même chez les blogs mode ci-dessus, présenter les accessoires et pièces de manière plus visuelle. Et, vous le savez, le visuel est une caractéristique importante pour les influenceurs ET leurs lecteurs !

image map inspi

L’image mapping, comment ça marche ?

Bonne question mais halte au suspens insoutenable ! Non, il ne s’agit pas d’un plug-in ou d’un widget, ce dernier n’existe pas (ou du moins, je ne l’ai pas trouvé). Cela aurait été trop simple ! Ces bannières produits ne sont que HTML. Toujours cette fameuse potion presque magique avec laquelle on peut presque tout faire. Rien de bien sorcier rassurer vous, surtout si vous êtes un petit peu à l’aise avec le code.

Il ne m’a pas été facile de trouver la structure du code HTML permettant la création d’une image map. Vous pouvez la constituer gratuitement sur Maschek.hu, par exemple, un outil qui répond parfaitement à la problématique du jour. Créer simplement une image map pour son blog !

Mon guide d’utilisation :

imagemapping

  • Charger l’image / montage que l’on souhaite multi links puis clicker sur accept
  • Définir les formes / zones de links (rectangle, rond, triangle)
  • La partie coords se remplie automatiquement selon la sélection de vos zones (ici rectangle)
  • Renseigner les autres cases, les liens dans la partie Href et le text Alt (texte lu par Google) dans la case prévue à cet effet (sans oublier de raccourcir les urls afin qu’elles ne se chevauchent pas)
  • A target sélectionner new window pour que le lien s’ouvre dans un nouvel onglet
  • Le code HTML est automatiquement généré, il suffit de le copier-coller dans la partie texte de votre plateforme de blogging et d’ajouter, en amont, l’emplacement de votre image par ce bout de code, à personnaliser sur les données en rose :
    alt= » » src= »LIENDEVOTREIMAGE » usemap= »#map » width= »580 » height= »467 » border= »0 » />

Voilà, votre image map est prête !


 

J’ai fait le test pour vous, à la fin de mon article à propos de la folie des veilleuses lapin sur la blogo. C’est une démo, il n’y a pas d’affiliation dans ce cas présent, mais cela reste néanmoins possible si vous le souhaitez.

Moyen Lapin Grand Lapin Petit Lapin

Je serais curieuse de connaître la différence entre les taux de clicks sur les liens produits versus images map, mais sans prendre trop de risque la seconde option doit certainement être la plus payante. L’avez-vous déjà testé ? Qu’en avez-vous pensé ?

Rendez-vous sur Hellocoton !

About The Author:

Ana AIRES
Responsable de RP Digitales dans la vie, j'ai le plaisir de lire, suivre et collaborer au quotidien avec les influenceurs du web. Bienvenue dans les coulisses du marketing d'influence ! Retrouvez-moi également sur Google+

10 Comments

  1. CléÔ 22/02/2014 14:34 / Reply

    Super article ! Merci Ana pour ce tuto hyper utile… :D

    • Ana AIRES 22/02/2014 14:52 / Reply

      Je suis très contente qu’il puisse être utile ! Il me fallait partager le résultat de ces 3h de recherches et de tests ;)

  2. Stéphanie - Il Etait Une Fois... Cocotte 25/02/2014 06:58 / Reply

    Super article! Le mystère est enfin levé :-) J’ai toujours voulu essayer mais je ne me suis jamais vraiment penché sur la question.

    • Ana AIRES 28/02/2014 12:17 / Reply

      Coucou Stéphanie, merci pour ton petit mot j’espère que cela pourra te servir à l’avenir ;)

  3. Milie 19/03/2014 09:15 / Reply

    Hello
    Cela applique d’avoir une seule image à la base avec un montage déjà fait c’est ça ?
    Merci ;)

    • Ana AIRES 19/03/2014 12:37 / Reply

      Milie tout à fait, il est important de le souligner merci ! Il faut en effet uploader le montage sur le site indiqué (par exemple) avant d’intégrer les différents liens :)

  4. jennifer 29/03/2014 10:58 / Reply

    encore un super article :)

    • Ana AIRES 01/04/2014 18:27 / Reply

      Hello Jennifer, merci beaucoup pour ton commentaire n’hésites pas à repasser donner ton avis si jamais tu as l’occasion de mettre en application ce petit test :D

  5. Olga 16/05/2014 19:27 / Reply

    Merci pour ce post Ana. Ça faisait un moment que je m’interrogeais à ce sujet ;)

    • Ana AIRES 10/06/2014 18:06 / Reply

      Hello Olga, merci pour ton petit mot, très contente que ça puisse t’être utile ! C’est un vrai casse tête au début, mais lorsqu’on connait ses mystères, c’est un outil très simple in fine :D

Un petit mot ?

  • Welcome

    Bienvenue sur mon blog personnel, La loge des blogs ! Ici nous sirotons des cocktails d'informations croustillantes concernant l'univers de la blogosphère, youtube et autres univers des influenceurs.

  • Info sur le blog

    Le contenu de ce blog est protégé par les lois en vigueur sur la propriété intellectuelle. Il n'est donc pas libre de droits.
  • En image

error: Content is protected !!