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 Social 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.
Dans cet article
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.
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.
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.
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 :
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) :
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.
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.
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.
Merci beaucoup pour cet article
Bonjour Marlène, je tiens un blog depuis la nuit des temps et ne me suis jamais vraiment inquiété du visuel et du référencement. Résultat : aucun trafic. Je découvre ton blog et ça me donne soudain envie de me pencher sur l’amélioration du mien quitte à galérer quelques temps car je fais cela sur blogger et je n’y connais rien.
Pardon, ma question : j’ai installé le widget grid instagram gratuit et quand on clique dessus on ne tombe pas sur Instagram directement mais sur sa version SnapWidget. Ne peut-on jamais tomber sur son compte Instagram directment, quitte à avoir une pub plus discrète de SnapWidget ?
Merci
Bonjour, comme je l’explique à la fin de l’article, la version gratuite ne permet pas de créer des liens vers Instagram. Il faut souscrire un abonnement payant pour ce faire.
Merci pour cet article Marlène. C’est très clair et détaillé. Je l’ai de suite mis en pratique ;)
Top ! Bon week-end :)
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 ? :)
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.
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 ?
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 :)
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
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 »).
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
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. :-)
Bravo, ça rend bien !
Merci beaucoup ! :-))))))
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
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 !