Comment installer un widget Instagram sur Blogger ?


Si vous avez un compte Instagram, vous cherchez peut-être à afficher vos dernières photos dans un widget Instagram sur Blogger. Dans cet article, je vais vous expliquer comment afficher des photos Instagram sur Blogger (si vous êtes sur WordPress, vous pouvez vous tourner vers le plugin Instagram Slider Widget).

Instagram modifie régulièrement sa politique en matière d’applications tierces donc nombreux sont les sites de widgets Instagram qui se créent et ne fonctionnent plus au bout de quelques mois. J’en ai trouvé un pour vous qui fonctionne actuellement.

SnapWidget, un widget Instagram simple et gratuit

Le site SnapWidget propose plusieurs widgets Instagram permettant d’afficher des photos, sous forme de grille, de slideshow, de bandeau avec défilement, de grille avec description des photos ou encore de carte géographique.

Les widgets les plus simples sont gratuits mais si vous souhaitez que les photos soient cliquables ou que vous voulez bénéficier d’options supplémentaires (personnalisation avancée du design, pop-up, système de pagination, rafraîchissement automatique du contenu selon le timing de votre choix), il faut passer à la version Lite ou à la version Pro qui sont payantes et coûtent respectivement 5 et 7$ par mois.

Créer un widget Instagram sur Snapwidget
Un aperçu des widgets Instagram gratuits proposés par Snapwidget

Comment créer un widget Instagram sur SnapWidget

Pour profiter des widgets gratuits, vous devez simplement créer un compte sur SnapWidget, sélectionner le widget de votre choix et cliquer sur « Create your free widget ».

Le widget « Grid » (grille) et le widget « Slideshow »

Ils proposent les mêmes options de paramétrage. Vous pouvez définir l’utilisateur dont vous souhaitez afficher les photos et régler différentes options comme la taille des vignettes, la bordure, le nombre de vignettes affichées par ligne et par colonne, la couleur de fond, l’espace entre les vignettes, l’effet au survol des photos ou encore la présence de boutons de partage sur les photos.

Vous pouvez aussi rendre le widget responsive, un paramètre incontournable à l’heure où beaucoup de gens consultent les sites sur mobile ou tablette.

Paramètres du widget Instagram grid pour Blogger
Paramètres du widget Instagram grid pour Blogger

Le rendu du widget « grid » est vraiment esthétique et vous pouvez le prévisualiser en temps réel. Le widget Slideshow ne présente pas de réel intérêt à mes yeux car vous ne pouvez pas contrôler son défilement.

Rendu du widget Instagram Grid de Snapwidget
Rendu du widget Instagram Grid de Snapwidget

Notez que le widget « Board » proposé fonctionne lui aussi sur le même principe que l’affichage en grille, il intègre simplement les légendes des photos. Le rendu visuel est assez chargé à mes yeux :

Un widget grid pour Instagram avec légende des photos
Un widget grid pour Instagram avec légende des photos

Le widget « Map » (carte de photos)

Le paramétrage est on ne peut plus simple : vous choisissez le nom d’utilisateur, la largeur de la carte en pixels et éventuellement une description. Bien sûr, pour que ça fonctionne, il faut avoir géolocalisé des photos sur Instagram au préalable.

Voici un aperçu du rendu (le véritable widget permet de zoomer sur une zone précise de la carte) :

Carte Instagram
Carte Instagram

Le widget « Scrolling Banner »

C’est un bandeau dont le contenu défile automatiquement. Vous pouvez paramétrer la largeur de chaque vignette, décider si le défilement commence automatiquement (« Auto Start ») ou pas et choisir la largeur de la bannière (qui n’est pas responsive). Les images défilent automatiquement mais on peut aussi contrôler le défilement à l’aide de la souris pour passer plus vite en revue les photos.

Bandeau défilant de photos Instagram
Bandeau défilant de photos Instagram

Comment afficher le widget Instagram sur Blogger

Une fois vos réglages effectués, il suffit de cliquer sur le bouton « Get Widget ». Vous obtenez alors un bout de code que vous n’avez plus qu’à copier dans un gadget Blogger : dans l’administration de votre blog, allez dans le menu « Mise en page » et ajoutez un gadget à l’endroit de votre choix, en optant pour le gadget HTML/Javascript dans lequel vous copierez le code.

Ajouter un gadget HTML/Javascript à Blogger

Pour conclure, je trouve que SnapWidget est assez complet et paramétrable pour un service entièrement gratuit. Côtés inconvénients…

  • Je trouve la version payante très chère pour ce que c’est.
  • La version gratuite ne permet pas de faire des liens, ce qui est dommage si vous voulez amener du trafic vers votre compte Instagram ou pousser les gens à s’abonner. Cependant, vous pouvez tout à fait créer un lien vous-même vers votre compte sous le widget.

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

14 commentaires sur “Comment installer un widget Instagram sur Blogger ?

  • Chloé Box'Art

    Merci pour cet article Marlène. C’est très clair et détaillé. Je l’ai de suite mis en pratique ;)

    Répondre à Chloé
  • Cinthia

    Bonjour, j’ai bien réussi à y faire mais avec la version gratuite et une seule photo de mon instragram apparait et défile. Je voudrai savoir si il y a un moyen gratuitement de mettre les 10 dernières photos instagram sans quel défile ? :)

    Répondre à Cinthia
    • Marlène

      Hello, j’ai utilisé la version gratuite pour faire mon tutoriel donc oui, c’est possible. Tu dois choisir dans les options le nombre de photos que tu veux afficher. Par exemple, si tu as pris le widget « Grid », il est par défaut au format 3×3 (3 photos par ligne sur 3 rangées) mais tu peux le modifier.

      Répondre à Marlène
  • mirna

    Merci pour ce tuto !!!

    Je vais bientôt mettre mon blog en ligne et côté instagram c’est fait et ça rend bien.

    Qu’est ce que je ferais sans ton blog ???? Je n’ose même pas imaginé.
    Tu rends tout tellement plus simple.
    Merci merci merci
    Maintenant je dois faire la même chose avec twiter. Tu as un tuto la dessus aussi ?

    Répondre à mirna
    • Marlène

      Non mais c’est assez simple : il faut visiter la page Twitter Publish, tu entres l’URL du profil que tu souhaites promouvoir sur ton blog et tu choisis « Embedded Timeline » pour afficher les derniers tweets. Twitter fournit un code qu’il y a juste à copier sur son blog :)

      Répondre à Marlène
  • Milky ♥

    Bonjour Marlène ♥, je t’en remercie beaucoup pour ce joli tuto ! Je voulais donc savoir comment je pouvais afficher mon Instagram (qui est en Scrolling Banner) de façon à ce qu’il prenne tout le bas de mon blog ^^. Pleins de gros bisous

    Répondre à Milky
    • Marlène

      Hello, ton blog n’est pas accessible au « public » donc je ne peux pas te répondre avec précision. En général, il faut travailler dans ton code sur la largeur de ton widget (propriété « width »).

      Répondre à Marlène
    • Milky ♥

      Bonjour Marlène ♥, et oui étant toujours en construction il n’est malheureusement pas visible. Jet’en remercie pour ta réponse et je vais jouer avec ce code ;) pleins de gros bisous

      Répondre à Milky
  • Wadju

    Un tout grand merci pour l’astuce Widget Grille. Je viens de la créer sur mon blog. :-)
    Effectivement, c’est dommage que cela ne fasse pas directement le lien vers son compte Instagram. Il faudrait juste que je parvienne à changer le design de mon bouton-lien vers mon compte et ce sera parfait. :-)

    Répondre à Wadju
  • GlowingMangata

    Ouiiiiii, le grand retour des tutoriels Blogger, comme promis dans ton retour (hyper intéressant au demeurant) post-sondage :)
    Merci beaucoup, je risque d’afficher un widget tout prochainement suite à tes conseils !
    Belle soirée à toi,
    Amandine

    Répondre à GlowingMangata
    • Marlène

      Hé hé je me suis marqué ça en rouge dans mon (moche et pratique) calendrier éditorial. Pas beaucoup le temps d’écrire en ce moment à cause du transfert du blog voyage qui me prend un temps fou mais j’ai prévu de m’y remettre !

      Répondre à Marlène
Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.