Pour un magasin de vélos actif sur Instagram — sorties club du jeudi, nouveaux arrivages, photos clients, atelier — afficher ce flux sur la home c’est rallonger la durée de session, montrer l’activité du magasin physique et renforcer la preuve sociale avant même le premier produit vu.
Sauf que le flux Instagram standard via iframe charge ~300 KB de JS Meta + tracking, l’API Instagram Login souffre d’un bug Meta non résolu depuis fin 2024, et les Reels prennent 80% du contenu Instagram aujourd’hui sans s’afficher correctement en carré.
Le module Veloland Social règle les trois.
Côté client : ce que ça donne
- Affichage des 6, 10 ou 12 derniers posts en grille / mosaïque / masonry / carrousel
- Reels affichés en portrait 9:16 (pas en carré tronqué)
- Clic sur un Reel = lecture inline en modal HTML5, sans quitter le site
- Clic sur une photo = ouverture du post Instagram original dans un nouvel onglet
- Token configurable depuis le BO, durée illimitée (never-expires)
Le magasin n’a qu’à coller son Page Access Token Facebook et l’ID Instagram Business. Le module télécharge les médias, met en cache et sert les images en WebP/AVIF en local. Zéro dépendance JS tierce, zéro tracker Meta sur la home.
Côté technique
Le module fonctionne sous PHP 8.3 et PrestaShop 9.x. Il interroge la Facebook Graph API en version 22.0 sur l’endpoint /{ig_user_id}/media, en utilisant un Page Access Token long-lived (never-expires) obtenu en deux étapes successives. La première étape échange un short-lived user token contre un long-lived user token via l’endpoint fb_exchange_token. La seconde récupère le Page access token associé via /me/accounts. Ce token Page hérite de la longévité illimitée du user token long-lived dont il dérive, ce qui évite d’avoir à le renouveler tous les soixante jours.
Pour chaque post Instagram récupéré, le module télécharge l’image originale depuis le CDN Meta, puis effectue un crop centré aux dimensions adaptées au type de média : 600×600 pixels pour une photo (carré) et 540×960 pixels en ratio 9:16 pour un Reel. Il génère ensuite trois variantes locales dans /img/vlsocial/insta-{id}{-r}.{ext} : un fichier JPG de référence, une variante WebP plus légère et une variante AVIF encore plus optimisée. Les URL résultantes sont mémorisées en cache PrestaShop pendant une heure, accompagnées du mp4_url original pour les Reels qui ouvre la modal de lecture.
La grille en mode masonry n’utilise pas CSS columns, qui laisse des colonnes vides quand les aspects ratios se mélangent. Elle s’appuie sur un script JavaScript custom d’environ 80 lignes : pour chaque tuile, la hauteur est calculée via aspect-ratio CSS, puis la tuile est placée en position absolue dans la colonne dont le cumul vertical est le plus court. Un recalcul est déclenché au redimensionnement via requestAnimationFrame, et le nombre de colonnes est piloté par la variable CSS --vlsoc-cols. La modal de lecture, quant à elle, est une simple balise <video controls autoplay playsinline> pointant sur l’URL mp4 du CDN Meta ; aucun player tiers n’est embarqué.
Pourquoi c’est pertinent pour un vélociste
Sur Instagram, un magasin de vélos publie ce qu’il ne peut pas mettre dans un catalogue : ambiance club, dépannage atelier, derniers vélos reçus avant qu’ils soient en ligne. Ramener ce flux sur la home web, c’est rappeler au visiteur qu’il y a une boutique physique derrière, des gens, une communauté. Ça change la perception « site marchand » en « site d’un magasin que je peux aller voir ».
