Instagram: installer un widget sur son blog AVEC LIEN DIRECT vers son profil [tutoriel débutant]

Web Mon Mardi ! Tu as déjà certainement un widget qui affiche tes photos Instagram sur ton blog mais quand on clique dessus est-qu'on tombe directement sur ton profil Instagram ?... Non ? Han han... Et bien voilà, aujourd'hui retour aux tutoriels, on va faire un chouia de little bit of code mais pas beaucoup, tu n'auras pas mal à la tête, tu seras juste fièr(e) de toi c'est tout! J'ai fait ce tutoriel (niveau débutant) pour Blogger, mais ça doit marcher aussi ailleurs.

NB : beaucoup de gens pensent qu'on ne peut pas récupérer leurs photos sur Instagram, et c'est malheureusement faux si on a un compte public. De nombreux sites permettent de les afficher et de les récupérer, les partager sur Pinterest, etc... Donc si on aime ses photos et qu'on pleurniche dès qu'on nous en "pique" une > ON MARQUE SES PHOTOS au moins il y aura une trace de la source dessus.

Tu vas chercher ton cahier et ton crayon ? L'assistant nous attend déjà, en voiture Simon et Simonne !





___________________________

Au programme :

1. créer son widget (ou gadget c'est comme tu veux) Instagram
2. personnaliser son widget et insérer un lien direct vers son compte Instagram
3. installer le widget sur son  blog
4. danser de joie et de fierté de soi-même (eh ouais ;)

___________________________


1. Créer son widget Instagram


Il existe pas mal sites gratuits et assez similaires pour le faire, malheureusement, ils sont pratiquement tous en anglais, mais tu vas vite comprendre, j'ai activé la fonction "Brian is in the kitchen" (ouf!). J'ai choisi SnapWidget.com parce que c'était simple, assez personnalisable et surtout parce qu'aucune inscription n'y était demandée. D'autres sites proposent en plus de voir tes stats, etc...

Pour commencer, il suffit de cliquer sur "Get Your Free Widget"





Apparaît alors l'interface de création ci-dessous.

Dans l'ordre :

  1. USERNAME: Renseigner son nom d'utilisateur Instagram. On ne met pas l'arobase (déjà à gauche)
  2. HASHTAG: Si on le souhaite on peut choisir uniquement les photos qu'on aura identifiées avec certains hashtags : par exemple si on poste parfois (tout le temps?...) des photos de gâteaux sur Instagram et que dans la description de ces photos on pense à écrire #gâteau, pour afficher ces photos dans le widget, il faudra renseigner dans ce champ "gâteau" (mais sans les guillemets bien sûr)
  3. WIDGET TYPE: il y a 5 types de formats disponibles. GRID pour afficher un tableau avec plusieurs photos, BOARD pour afficher aussi plusieurs photos avec en plus une partie de leur description en-dessous de chacune, SCROLLING pour afficher les photos dans un "ruban" qu'on peut faire défiler (peut servir aussi de bannière), SLIDESHOW pour afficher les photos en diaporama (c'est celui que j'ai choisi), MAP pour afficher tes photos sur une carte si tu utilises la fonction géolocalisation sur Instagram (un peu chaud si tu dévoiles l'adresse de chez toi ou de ton travail, mais c'est ta vie, n'est-ce pas ;)
  4. Pour chaque format, il y a différents paramètres. THUMBNAIL SIZE c'est la taille d'affiches des photos (pense à regarder sur ton blog la taille de l'espace disponible pour insérer ton widget sinon ça débordera), LAYOUT c'est la disposition (nombre de photos par colonne et par ligne), PHOTO BORDER pour ajouter une bordure ou non, BACKGROUND COLOR pour ajouter un fond coloré, PHOTO PADDING la taille des marges autour des photos, HOVER EFFECT ajouter un effet d'estompage ou pas quand on passe la souris sur le widget, SHARING BUTTONS boutons de partage des photos vers les réseaux sociaux.
  5. Pour avoir un aperçu on clique sur ... "PREVIEW"
  6. Quand on a terminé, on clique sur "GET WIDGET" on copie ce code et on le colle dans le bloc-note et... on enregistre. 






2. Personnaliser son widget et insérer un lien direct vers son compte Instagram


On passe à l'étape avec du code dedans pour obtenir un encart avec en haut un lien qui redirigera directement vers son profil sur Instagram (en bleu ci-dessous) au lieu de diriger vers SnapWidget (ou autre site, ils ont tous le même système). Par contre les liens qui sont sur les images continueront à rediriger vers le site qui héberge le widget ce qui est normal.







A partir du menu du tableau de bord de Blogger, on va dans "Mise en Page" / "Ajouter un gadget" / "HTML/Javascript".

Et maintenant on va personnaliser tout ça (cf la copie écran ci-dessous).

1. Titre : C'est le titre qui apparaîtra en haut de ton widget sur ton blog (le mien c'est "Prends un (kilo)gram' de gourmandises!" logique...)

2. On crée la première ligne avec le lien direct vers son profil Instagram (surligné en bleu ciel)
  • pour mettre en page on va utiliser la balise div, avec les attributs center, left ou right pour respectivement centrer, aligner à gauche ou aligner à droite. J'ai choisi de centrer mon texte, donc j'ai saisi le code suivant : <div align="center">
  • on insère ensuite le code pour rediriger vers son profil : <a href="http://instagram.com/TONPROFIL" rel="nofollow" target="_blank">
  • on écrit le message qu'on veut afficher (surligné en vert et en jaune "Clique sur mon Instagram calorique" c'est mon côté poétique qui s'exprime). Pour mettre en gras le nom de mon profil tu peux voir que j'ai utilisé la balise "b" comme ceci  <b>@TONPROFIL</b>
  • on referme la balise de lien </a>
  • pour laisser un espace entre le texte et les photos on peut faire 2 sauts de ligne avec 2 fois <br/>
  • enfin on referme la balise div avec </div>

La première ligne est faite et c'était le plus dur, tu peux croquer un chocolat ! En étant débutant, si on s'intéresse un peu au code, on peut aussi rajouter de la couleur, un picto, etc... 


3. On colle en dessous le code récupéré sur SnapWidget et on ajoute juste un attribut "non follow" (surligné en violet) juste avant "title" de cette façon : <rel="nofollow">

4. Vérifie bien ton code puis cliques sur "Enregistrer".






5. En haut à droite clique sur "Enregistrer la disposition".

6. Vérifie le rendu sur ton blog, et si par exemple ça déborde, au lieu de tout recommencer si tu as pris le même modèle que moi (une seule photo qui s'affiche à la fois), tu peux retourner directement dans le code du widget et modifier les valeurs "width" et "height" (largeur et hauteur, sur la dernière ligne de code). A noter: c'est un carré donc les deux valeurs doivent être égales.

Tout est bon ?

7. Bravo!!! Remange un chocolat, fais-toi des bisous, mets de la musique et danse ta vie: tu es vraiment super fort(e) !



________________





RDV sur Hellocoton !RDV sur Twitter !RDV sur Pinterest !RDV sur Instagram !RDV sur Facebook !RDV sur Google+ !HTML Map