Comment créer des bannières ou un onglet Facebook grâce à des images interactives

C’est quoi une image interactive?

Une image interactive est une image avec plusieurs liens. Vous avez sur l’image des zones différents qui sont cliquable et qui pointent vers des liens différents.

Grâce à ces images, vous pouvez, sans être programmeur, créer des bannières sur votre site comme celui-ci.

 

Voici comment faire en vidéo, si vous préférez lire, il y a la transcription de la vidéo et l’explication pas à pas.

 

 

Transcription de la vidéo

Bonjour et bienvenu dans ce nouveau tuto de Mon Internet Marketing Master.

Aujourd’hui je vais vous montrer comment vous pouvez utiliser une image comme celle-ci en tant qu’onglet Facebook. C’est-à-dire utiliser une image avec des liens vers votre compte Twitter, vers un formulaire de contact et vers votre blog sans que vous ayez besoin de connaître du HTML et très facilement grâce à un outil gratuit en ligne.

Ici vous pouvez voir l’onglet Facebook qu’on va pouvoir faire. C’est-à-dire avec un lien vers le Twitter, avec un lien vers un formulaire de contact et avec un lien vers le blog.

Donc maintenant ce que vous allez faire c’est aller sur le site www.image-maps.com.

Ce site vous permet d’utiliser une image et de mettre plusieurs liens comme ici sur la même image très facilement et gratuitement.

Tout d’abord vous allez mettre votre URL d’image parce que en fait quand vous utilisez une image directement de votre PC il va être stocké que deux jours par le site et du coup vous allez avoir besoin derrière d’utiliser un hosting de vous-même et donc ici moi je l’ai déjà mis sur mon hosting et on va pouvoir utiliser cette image pour mettre les liens pour notre page Facebook.

Ici vous voyez bien l’image et on va mettre le lien Twitter, le lien vers un formulaire de contact et un lien vers le blog donc cliquez sur “continue the next step”.

Maintenant vous allez voir que sur le côté vous avez le choix de choisir un rectangle ou un “custom shape”, c’est-à-dire une autre forme pour faire la zone là où les gens vont pouvoir cliquer pour votre lien. Pour nous un rectangle ça va très bien donc je clique sur rectangle ici vous le voyez,  vous pouvez le  prendre, le déplacer et l’étirer et le mettre au bon endroit sur votre image.

On va mettre donc le lien, moi j’avais dit le premier lien est vers mon compte Twitter et en tant que titre pour cette image, qu’on voit quand les gens mettent le souris sur l’image Twitter, Ils vont voir le texte suivez- moi sur Twitter.

Ensuite je clique sur “save”. Je répète la même chose avec, du coup, le lien vers le formulaire de contact et on va également mettre du texte, toujours cliquer sur “save” pour bien sauvegarder votre travail.  Lisez-le blog envoie logiquement vers un lien vers le blog Mon Internet Marketing Master.fr et en tant que texte je vais tout simplement mettre Lisez le blog.

Maintenant vous voyez qu’il y a trois zones sur l’image que je viens de créer qui maintenant vont être cliquable pour le reste vous n’avez besoin de rien changé.

Cliquez juste sur “Get your code” et ici en haut vous voyez “HTML output”, “HTML code”, “CSS output”, “CSS code” , “Photo bucket” pour si vous n’avez pas de hosting et de l’aide.

Ce que nous on veut c’est le code HTML, vous cliquez dessus et ici vous pouvez voir tout le code HTML que vous allez avoir besoin pour mettre sur votre page Facebook.

La seule chose, il y a deux trucs que moi je veux changer. Comme vous voyez ici il y a un lien vers image-maps et moi je ne veux pas forcement qu’il y a un lien vers ce site sur ma page Facebook donc je vais enlever cette ligne là et également ici en bas, on va l’enlever aussi.

Ce que je veux également c’est que chaque lien s’ouvre dans un autre onglet donc pas à l’intérieur de ma page Facebook parce que ce n’est pas très pratique. Du coup pour chaque lien on va rajouter target=”_blank” ça c’est juste le code HTML qu’on utilise quand on veut que le lien s’ouvre dans un autre onglet. Voilà et maintenant la seule chose qui me reste à faire c’est de copier (control+c) et d’aller sur Facebook.

Si vous n’avez pas encore installé un static HTML, vous allez sur static HTML (via la barre de recherche) vous cliquez sur celui-là, vous téléchargez l’application. C’est vraiment pas compliqué et vous allez pouvoir obtenir une page comme celle-ci ou vous avez de la place pour coller l’image donc ici je l’ai copié et je vais le mettre sur ma page je clique sur “save and publish” et maintenant en “preview” je vais pouvoir voir. Mon image est bien là et quand je clique ça va bien sur mon compte Twitter dans un nouvel onglet, vers le formulaire de contact et vers la page d’accueil de mon blog.

Maintenant à vous d’utiliser votre image de faire votre onglet Facebook ou bien sûr d’utiliser ces “image maps” sur votre blog ou en tant que bannière vraiment c’est à vous de décider ce que vous pouvez faire avec!

Merci beaucoup et à très bientôt

 

Pas à Pas: Comment utiliser des images interactives pour créer des bannières ou des onglets sur votre page Facebook

 

 

Comment créer des images interactives 1Comment créer des images interactives 2

 

  1. Préparez une image avec des zones pour les liens (comme par exemples des logos pour faire un lien vers votre blog ou vos comptes sociaux)
  2. Allez sur www.image-maps.com
  3. Mettez l’URL de votre image (que vous avez mis à disposition en ligne sur votre site par exp.)
  4. Cliquez sur “Start mapping your image”
  5. Attendez 10 secondes et cliquez sur “Continue to next step”
  6. Cliquez sur “rectangle” et créez un zone avec un lien et un texte “alt”
  7. Cliquez “save” et répétez l’étape 4 et 5 pour chaque zone
  8. Cliquez sur “Get your code”
  9. Cliquez sur “HTML code” (en haut de page)
  10. Enlevez les lignes <area shape=”rect” coords=”796,1048,798,1050″ href=”http://www.image-maps.com/index.php?aff=mapped_users_7201212311028271″ alt=”Image Map” title=”Image Map” /> et <a style=”text-decoration:none; color:black; font-size:12px; font-family:verdana;” href=”http://www.image-maps.com/index.php?aff=mapped_users_7201212311028271″ title=”Image Map”>Image Map</a> si vous ne voulez pas faire de lien vers le site.
  11. Rajoutez éventuellement le code target=”_blank” à la fin des liens si vous voulez que les liens s’ouvrent dans un nouvel onglet.
  12. Copiez votre code
  13. Collez le dans une page static HTML de Facebook

Voila, j’espère que ça peux vous aider!

Avez-vous déjà une idée comment vous pourriez utiliser les images interactives? Partagez vos idées dans les commentaires!

This entry was posted in Facebook, Web 2.0. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *