TutorielsIntégrez votre fil Instagram sur votre site web

Intégrez votre fil Instagram sur votre site web !

Instagram étant l’un des plus gros réseaux sociaux, il se peut que vous ou votre client souhaitiez afficher votre flux Instagram sur l’une de vos pages ou encore dans le pied de page sur l’ensemble du site web.
Après de nombreuses recherches, il s’avère que l’on trouve pléthore de Widgets et services vous proposant une solution. Ils ont tous un point commun, ils proposent une version gratuite limitée et une version payante. La plus part ont une version gratuite très, très, très limitée et une version payante sous forme d’abonnement au mois, ce qui peut revenir très cher.

Cependant un service en particulier à retenu notre attention, il s’agit de Light Widget. Ce service propose une version gratuite très complète que nous allons voir ensemble juste après. Cette version gratuite ne peut en revanche pas être utilisée sur un site en https. Vous savez, ce truc dont on a déjà parlé ici. Pour lever ce blocage, il vous faudra vous acquitter de la somme de 10$ soit environ 8€. Franchement Régis, c’est pas cher !

Connectez-vous à votre Compte

Rendez-vous sur Instagram.com et connectez-vous. Si vous travaillez pour un client, il faudra qu’il vous fournisse ses codes d’accès.

Ensuite rendez-vous sur Light Widget et assurez vous d’être bien connecté au compte que vous souhaitez afficher sur votre site internet.

 

Personnaliser le widget

Nous allons passer en revu tous les champs de personnalisation proposés.

  • Instagram username
    C’est le nom d’utilisateur du compte Instagram que vous souhaitez partager.
  • Filter photos by tags
    Vous pouvez filtrer les photos par hashtag afin de ne laisser apparaitre que certaines photos de votre fil Instagram. Vous pourrez par la suite créer plusieurs widgets avec des filtres différents.
  • Type of widget
    3 style d’affichage sont proposés, le style par défaut, similaire à l’affichage depuis un smartphone. Le style Slideshow, qui permet d’afficher les images sur une ligne avec un défilement automatique. Et le style Pinterest qui affiche en plus des images, les légendes de celles-ci.
  • Number of columns
    Choisissez le nombres de colonnes, c’est à dire le nombre d’images sur la largeur.
  • Number of rows
    Choisissez le nombre de lignes, c’est à dire le nombre d’images sur la hauteur.
  • Image hover effect
    Vous pouvez activer un effet au survol des images. Il y en a toute une liste, je vous laisse les essayer.
  • Padding
    C’est l’espace entre les images
  • Image format
    Affichez les images au format carré ou dans leur format d’origine
  • Show captations
    Vous pouvez laisser apparaitre un extrait de la légende rattachée à l’image. A vous de choisir le nombre de mot que vous souhaitez laisser apparaitre en renseignant un nombre.
  • Lazy-Load images
    Permet d’activer l’affichage différé des images au chargement de la page. Si vous placez votre widget en pied de page, je vous le recommande. Cela améliorera votre référencement.

Enfin, il y a un bouton « Preview » pour voir ce que ça donne, et un bouton « get code ! ». Une fois que vous êtes satisfait du résultat, cliquez sur « get code ! ». Copiez le code et collez le dans un élément HTML dans WebAcappella.

Voilà, vous avez créé votre Widget Instagram et c’est super stylé !

Bisous les neveux 😉

Au fait, sachez qu’à chaque fois que vous lisez un de nos tutos sans le partager sur votre réseaux social préféré, il y a un panda qui meurt quelque part dans le monde. Je dis ça comme ça, maintenant vous faites ce que vous voulez…

 

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée Champs requis marqués avec *

Publier un commentaire