Accueil › Marketing › 2️⃣ Instagram avec HTML/CSS

2️⃣ Instagram avec HTML/CSS

Leçon 7 du cours Marketing · 🎬 18 min.

À propos de cette leçon

Pense bien à lier ton compte Instagram avec ta page Facebooket à mettre ton instagram en compte professionnelsinon cela ce sera impossible de trouver ta page Instagram dans le module Make.

⚙️ Télécharger mon automatisation Make 👇

Ressources à télécharger

Transcription de la vidéo

Afficher la transcription complète de la vidéo

Transcription automatique de la vidéo (générée par YouTube).

donc si vous souhaitez automatiser votre compte Instagram en HTML et en CSS précédemment dans le dernier module on a regardé ensemble comment faire avec canva ou Photoshop là désormais pour ceux qui veulent faire un HTML et CSS on va repartir de zéro comme on a fait précédemment donc sur airtable on va créer une nouvelle base on va l'appeler HTML CSS on Save et à partir de là nous ce qu'on veut c'est du coup alors si vous faites un compte citation vous pouvez très bien appeler sa

citation là on va mettre description ça sera plus compréhensible pour tout le monde du coup ce qu'on choisit pardon c'est un champ en long texte ensuite il va nous falloir un champ par exemple pour les tags donc les hashtags sur Instagram pareil on va mettre tags et ici on va mettre long texte on save ensuite ce qui va nous falloir si par exemple vous souhaitez faire un compte citation vous pouvez très bien mettre hauteur et là vous choisissez long texte alors là non par contre vous

mettez single line parce que du coup hauteur généralement il y a juste un nom et un prénom donc il y a pas forcément beaucoup de texte et ensuite ce qu'il va nous falloir c'est directement un champ qui va nous dire quand est-ce que ça a été créé donc ça on est obligé de l'avoir pour directement make et là on va mettre créer le et à partir de là du coup on va pouvoir directement passer sur Make donc vous aurez ce template de formation Instagram prrme HTML

CSS que vous pourrez télécharger directement dans le module et à partir de là donc du coup on va venir connecter et mapper tous nos champs donc c'est parti je repars avec vous de zéro du coup j'ai mppé mes champs donc là ma base elle s'appelle formation Instagram qui est ici ensuite derrière il va y avoir du coup la table à connecter ma table c'est HTML CSS et ensuite il va falloir que l'on connecte directement donc le trigger field donc ça logiquement vous l'aurez donc créez-le et

le label field ce qu'on veut c'est la description ça ça va être le nombre de post Instagram qu'on veut mettre dans la même journée donc là si on veut on peut en mettre deux et on met ok à partir de là il va falloir aller sur le site htmlcss toimage.com je vous mettrai l'URL directement dans le module vous créer un compte donc comme précisit précédemment dans le module c'est gratuit euh jusqu'à 50 images donc vous avez 50 images 50 générations d'images gratuites par mois sinon il

faudra upgrade votre compte et prendre un abonnement qui a 14 dollars je crois voilà c'est ça pour minimage donc là c'est vraiment si vous voulez bombarder des comptes Instagram à droite à gauche mais sinon sincèrement je vous conseille de prendre le mode gratuit et une fois qu'il est dépassé vous pouvez recréer un autre compte et venir reconnecter le compte sur votre scénario make et du coup ça fera l'affaire mais voilà donc déjà 50 images plutôt pas mal donc une fois que vous avez créé un compte

là-dessus vous allez vous rendre sur API case et dessus vous allez avoir directement votre API qui sera juste ici avec directement votre user ID et votre API k vous venez directement le connecté et une fois que vous serez connecté donc vous aurez le nom de votre compte là-haut et à partir de là il suffit d'aller sur image console et là vous allez avoir un exemple donc c'est un exemple où on peut voir ici le texte si j'écris moimême ici le texte Salut Bonjour comment tu vas

voilà on peut voir que du coup on peut modifier directement le texte en html derrière si on veut par exemple ne serait-ce que modifier ici le nom de l'auteur donc ça peut être Nicolas et la page B ça se trouve la page insta le arobas on veut que ce soit le roi Nicolas voilà et là typiquement on pourrait très bien aller sur image on peut aller directement ement récupérer le lien de l'image et si on ouvre en fait on va se rendre compte que c'est bah

tout simplement l'image et qu'on peut directement la la télécharger l'enregistrer donc nous ce qu'on veut c'est quand même y apporter un minimum de du X donc là ce qu'on va faire c'est qu'on va vouloir changer l'image du chien donc on voit si on descend un petit peu dans le html que l'image du chien c'est SRC donc image SRC et là on voit le lien du coup qui est l'image du chien si on ouvre cette url benah en fait on tomourne directement sur l'image du chien voilà

qui fait un peu peur d'ailleurs du coup ce que vous pouvez faire c'est d'aller sur votre site web et d'aller héberger une image donc imaginons je sais pas moi je vais aller sur mon site internet je vais récupérer copier l'URL d'une image que j'ai sur mon site je vais venir la coller et si je regénère l'image logiquement j'ai mon avatar qui va se modifier et qui va devenir du coup une cible voilà donc là ça c'est bien modifié à partir de là ce qu'on veut par

exemple c'est tout simpleement simplement bah peut-être de modifier voilà ce fond jaune j'aimerais un petit peu le changer donc je vais aller dans CSS et là je vois que background image du coup il y a un linéire gradient donc qui va de droite à gauche et donc ici ce qu'on pourrait faire c'est modifier et mettre tout simplement B en zéro donc on va mettre 60 donc là si on regénère l'image on va voir un espèce de dégradé jaune et noir qui va être un peu dégueulasse

voilà mais ce qu'on pourrait faire c'est du coup de modifier pareil ici i de rajouter totalement un fond en linéaire voilà qui est qui est noir ù on pourrait mettre je sais pas peut-être une couleur peut-être qu'est-ce qu'on pourrait utiliser comme couleur peut-être un raid je sais pas si ça marche comme ça en mettant directement le nom donc si on voit qu'en mettant le nom ça marche et là ben il suffirait juste de mettre color avec directement en blanc et si on regénère l'image en fait

on aurait une dégradé du coup rouge noir et le texte qui est en blanc et du coup on se rapproche déjà un peu plus du coup de de ce qu'on voudrait après typiquement on pourrait très bien aussi venir changer directement B la police moi je peut-être pas du Roboto mais j'aimerais bien plutôt un Popins pour avoir des formes peu plus arrondi donc là on va check au niveau de la police qui est quand même assez droite là du coup on va se retrouver avec voilà une

police qui est déjà beaucoup plus arrondi mais du coup on voit que ça dépasse un petit peu dessus donc à ce moment-là on peut réduire la police et au lieu de mettre 32 on pourrait mettre 25 et si on rafraîchi d'ailleurs je vous le conseille si vous voulez mettre si vous voulez mettre pardon beaucoup de texte dans vos citations ou dans votre compte Instagram voilà c'est quand même plus joli de réduire un petit peu le texte donc là imaginons qu'on veut partir sur ça ça nous

plaît bon je vous avoue que c'est c'est pas très beau hein mais voilà je vous laisserai le travail de votre côté si vous avez un petit problème pour travailler bah le html css et que vous y connaissez pas trop bah ce que je vous conseille c'est tout simplement de venir copier ce texte de venir ouvrir chat GPT et de le donner ici de lui dire ben voilà on lui colle ça c'est mon texte HTML voilà et puis on va venir copier directement le CSS et on

va lui dire euh hop euh j'aimerais que tu me modifies mon code de CSS en tenant compte du HTML j'aimerais un fond blanc ouais un fond blanc ou j'aimerais je sais pas un fond jaune avec le texte en orange voilà on va voir ce qu' nous donne on va peut-être faire le test peut-être qu'il va nous surprendre on va voir donc là il est en train de comprendre le texte il analyse et qu'est-ce qu'il va nous dire donc bien sûr donc forcément il peut nous modifier

le CSS donc là il nous met un petit background color ok supprimer le dégradé de fond vous aviez et R le texte orange donc on va voir ce que ça donne on va quand même alors là ce qu'on voit c'est qu'il nous a supprimé le background image et qui nous met un background color donc il nous met un fond jaune ok avec une color qui a un texte en orange un Boulder et en fait il nous garde le même principe donc si je viens et je

régénère l'image ça va être peut-être la surprise qu'est-ce que ça donne donc normalement on a un fond jaune et un texte orange effectivement ça marche bien donc voilà vous pouvez très bien faire confiance à chat GPT et lui demander bah du coup des modifications donc une fois qu'on a ça bah c'est très simple vous avez votre scénario sur Make vous allez venir ici donc vous venez copier votre HTML vous le collez là-dedans et ensuite on vient copier le CSS et on on vient le mettre juste

en dessous et à partir de là nous ce qu'on veut c'est que le texte qui est ici Salut Bonjour comment tu vas on aimerait directement que ce texte Vienne d'ici donc on on pourrait écrire hey comment tu vas voilà imaginons que ça c'est une citation on va très bien on on va lui dire voilà hey comment tu vas là ça pourra être salut tu vas bien et alors c'est pas très originel je suis désolé j'ai c'est 2h15 du matin donc j'ai pas trop trop d'idées et

je n'ai pas trop d'idée voilà c'est exactement parfait c'est c'est c'est très bien comme comme un poste insta on va gagner beaucoup d'abonnés bref du coup ce qu'on pourrait faire c'est que là dans le texte en fait nous ce qu'on veut c'est venir chercher directement ici dans notre description donc ce qu'on va faire c'est qu'on va venir ici faire run vis module only comme ça il va venir récupérer la data ok si on regarde la data ben il voit que on a je n'ai pas trop

d'idée salut tu vas bien donc donc ce qu'on va faire c'est qu'on va lui dire ici à la place de cette phrase que nous ce qu'on veut c'est qu'il vienne chercher à chaque fois directement dans alors là il m'a il m'a pas récupéré j'ai du mal mapper HTML CSS ok donc je vais quand même faire une petite save d'accord ok donc je j'avais mal save donc c'est ma faute donc là voilà j'ai refresh ma table airtable si je clique sur mon HTML CSS ici je vais

vouloir venir mettre le texte qui est du coup la description et ici mon nom donc par exemple le hauteur sa VI que je l'ai pas rempli dans ma table mais je pourrais très bien dire que Ben le hauteur c'est moi donc je vais prendre ça je vais sélectionner mes cases contrôle V pour coller et du coup toutes mes cases vont se remplir avec mon nom et mon prénom et à partir de là ce que je veux c'est qu'icici à la place de Nicola bah que ça

soit tout simplement l'auteur ensuite qu'est-ce qu'on pourrait modifier du coup euh là on est bon donc en fait on a juste à faire ok ici on va venir connecter notre compte Instagram comme je l'ai précisé dans le précédent module il faut connecter votre compte Instagram avec une page Facebook en fait il faut les lier ensemble pour que vous puissiez détecter votre compte Instagram il faut aussi passer votre compte Instagram en compte professionnel c'est très important si vous souhaitez retrouver votre page Instagram ici et pouvoir la

connecter sur Make ensuite ce qu'on veut c'est récupérer du coup l'image URL que HTML CSS va générer donc c'est typiquement ce lien que l'on veut récupérer donc on va venir récupérer en fait bah du coup l'image URL du HTML CSS qui est juste ici et dans les captions on veut les tags donc les tags c'est très simple on pourrait très bien dire salut vie coach de vie j'en sais rien j'écris n'importe quoi mais vous pouvez très bien taper vos hashtag à la main en repérant du

coup ce qui marche le mieux ou venir les générer avec chat GPT imaginons donc là on va choisir watch records tags on fait OK et là on va save notre scénario donc là imaginons qu'on veut générer des tags avec chat GPT c'est très simple ce qu'on peut faire c'est directement de venir un Link ici on vient un Link ici on connecte chat GPT juste ici et on vient le coller à update record à partir de là on Nou chat GPT on lui dit crée-moi une liste

de 15 tags maximum donc là on pourrait mettre 15 hashtag maximum pour Instagram pour cette citation donc là vous pourriez mettre pour cette description ici ce qu'on vient c'est qu'on va venir récupérer du coup la description on la met entre les guillemets et là par exemple ce que je peux faire c'est imaginons que vous ayez une communauté comme là j'avais créé le compte Triumph talk ben en fait j'aimerais que ce hashtag vu que je l'ai lancé avec ma commun et cetera j'aimerais qu'il soit dans tous

mes postings Instagram du coup je le mets juste ici met toujours le tag Triumph talk en début de liste donc là on pourrait mettre euh au début parce qu'en début de liste sinon nous faire une liste ça sera pas bon voilà le token à 1000 la température à 0,7 le reste on laisse vide et ici on vient faire ok on vient dans update record on va aller dans formation donc là on remapppe le champ formation Instagram ensuite on vient HTML CSS on vient mapper l'ID et

là ce qu'on veut mettre à jour c'est les tags et les tags c'est chat GPT qui va nous le faire donc on va dans choice on va dans texte voilà et là on fait hop là je me suis trompé voilà et là on fait OK et à partir de là ce qu'on vient faire c'est qu'on vient save on attend un petit peu et là ce qu'on fait c'est que du coup on lance le scénario donc là ça nous a déjà créé l'image là ça va venir

avec chat GPT nous générer les tags et si on clique hop là vous voyez à l'instant t on a tous les tags qui ont été générés voilà et à partir de là du coup donc lui bon il est en train d'attendre imaginons que vous aez généré tous vos tags donc là on va prendre les mêmes tags on va les copier là-dessus voilà et ce qu'on veut faire maintenant c'est que du coup bah chat GPT nous a fait tout N hashtag ce qu'on va faire c'est qu'on

va le unlink on va le remettre en bas on vient prendre Instagram hop et là ce qu'on fait c'est que du coup euh on a plus besoin de ce module vu que on a update la record dans airtable et on vient connecter ça ça c'est juste un timer pour vous dire ok je veux mettre 300 secondes donc 5 minutes de délai entre chaque publication de compte Instagram je vous le conseille parce que précédemment comme j'ai dit dans l'autre vidéo du module je m'étais fait bannir mon

compte Instagram parce que j'ai pas mis de délai et j'avais publié trois publications Instagram à la même seconde donc forcément Instagram a un bot qui détecte et du coup je m'étais fait bannir entre guillemets mon compte pendant 3 He j'ai pu me faire débannir mais du coup je vous conseille d'ajouter un délai pour justement chaque publication donc là vous pouvez mettre 120 secondes je vous conseille de mettre au moins 2 minutes entre chaque publication et pour être tranquille et pas prendre de risque vous mettez 300

secondes une fois que c'est ça on save donc là on a rempli toute notre table on a notre description donc ce qu'on aimerait mettre sur notre insta on a notre tags et du coup on a directement le hauteur donc à partir de là ce qu'on vient faire c'est qu'on vient lancer airtable voilà donc là ah oui donc là il y a un petit bug ça m'a fait le même bug dans le précédent module c'est tout à fait normal en fait on vient de créer ces lignes

donc elles sont pas récentes elles sont anciennes là ici quand on vient chercher un record il faut que ce soit un champ nouveau ce que vous faites c'est que copiezclez tout ça vous venez ici vous créez notre ligne et là vous faites contrôle V continue là ça vous colle les mêmes lignes et vous venez supprimer les trois premières on délete et à partir de là votre automatisation pourra être lancée vous faites run et là hop il trouve il va sur insta et là si je vous

montre à l'instant T je vais peut-être le stopper parce qu'il risque peut-être de me bannir je vais pas le laisser publier une autre publication au cas où donc est-ce qu'il va trouver oui ok ah ben non pardon j'avais laissé le slip donc ça c'est parfait donc là si on va sur mon compte Instagram ben en fait en temps réel vous allez pouvoir voir que la publication a bien eu lieu si on clique sur mon profil on voit que automatiquement ben tout simplement on a récupéré l'image

qui était générée sur HTML CSS on a aussi le nom prénom Le arobas mon logo avec directement tous les hashtags donc tri talk a et cetera donc vraiment tous les hashtags qu' avait dans notre airtable donc je vais stopper l'automatisation en tout cas voilà ça fonctionne bien désormais si vous souhaitez mettre par exemple j'en sais rien 10 publications Instagram vous pouvez très bien ici venir remplir 10 et faire ok une fois que vous avez fait ça ici vous VZ cliquez sur daily et par exemple moi

ce que j'ai fait c'est que tous les jours je veux qu'à 19h il y ait 10 publications Instagram je mets OK et là je viens cocher juste on et et là à partir de là tous les jours vous aurez 10 publications Instagram qui viendront se faire automatiquement en venant récupérer votre description vos hashtag le nom de l'auteur et en fait ça viendra créer une image tout simplement comme ça automatiquement donc voilà en tout cas c'est une très bonne strate pour automatiser un compte Instagram et gagner

des abonnés sans rien faire nésitez pas si vous avez des questions ou si vous êtes bloqué je suis peut-être allé un peu vite donc n'hésitez pas à me faire un retour vous pouvez normalement faire un retour directement en dessous du module donc moi là je le vois pas mais vous en dessous du module vous aurez de quoi faire un retour ou n'hésitez pas à me contacter sur Twitter

Un besoin sur Make ou autre ? Contactez-moi