{"id":69303,"date":"2021-10-31T07:22:13","date_gmt":"2021-10-31T07:22:13","guid":{"rendered":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-des-codes-html-integres-a-votre-site-web-quick-tip\/"},"modified":"2021-10-31T07:22:13","modified_gmt":"2021-10-31T07:22:13","slug":"comment-ajouter-des-codes-html-integres-a-votre-site-web-quick-tip","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/fr\/comment-ajouter-des-codes-html-integres-a-votre-site-web-quick-tip\/","title":{"rendered":"Comment ajouter des codes HTML int\u00e9gr\u00e9s \u00e0 votre site Web [Quick Tip]"},"content":{"rendered":"

Si vous souhaitez organiser le contenu d’autres personnes sur les r\u00e9seaux sociaux ou simplement faire en sorte que votre propre contenu visuel sur les r\u00e9seaux sociaux travaille plus fort pour votre strat\u00e9gie de contenu globale, vous devez savoir comment int\u00e9grer du code HTML sur votre blog ou votre site Web.<\/p>\n

Mais attendez une seconde… avant d’entrer dans le vif du sujet, qu’est-ce que \u00e7a veut dire \u00ab\u00a0int\u00e9grer\u00a0\u00bb\u00a0? Et qu’est-ce que le HTML ? Si vous ne savez pas coder, ne vous inqui\u00e9tez pas, l’int\u00e9gration de contenu externe est extr\u00eamement simple. Prenons une seconde pour analyser les bases.<\/p>\n

<\/span>Que veut dire Int\u00e9grer ?<\/span><\/h2>\n

L’int\u00e9gration signifie l’int\u00e9gration de contenu externe sur un autre site Web ou une autre page. Vous int\u00e9grez quelque chose lorsque vous placez un bloc de code, appel\u00e9 code d’int\u00e9gration, dans l’\u00e9diteur HTML d’un autre site Web. Lorsque vous appuyez sur “Enregistrer” ou “Publier”, le m\u00e9dia s’affiche sur la page publi\u00e9e.<\/p>\n

Le contenu int\u00e9gr\u00e9 est r\u00e9f\u00e9renc\u00e9 en HTML. HTML est l’un des langages les plus basiques utilis\u00e9s sur le Web pour la conception et la conception de pages Web.<\/p>\n

Vous voyez souvent ce code lorsque vous \u00eates \u00e0 l’arri\u00e8re de votre article de blog. C’est ici que vous ajouterez votre code d’int\u00e9gration.<\/p>\n

La plupart des sites Web sociaux et multim\u00e9dias ont la possibilit\u00e9 de g\u00e9n\u00e9rer un code d’int\u00e9gration directement sur chaque publication individuelle. Voici un exemple de code d’int\u00e9gration pour une vid\u00e9o HubSpot sur YouTube\u00a0:<\/p>\n

 

<\/pre>\n
Et voici le r\u00e9sultat int\u00e9gr\u00e9.<\/p>\n
Voulez-vous faire la m\u00eame chose dans vos articles et pages de blog\u00a0?  Voyons comment vous pouvez g\u00e9n\u00e9rer un code d’int\u00e9gration pour les meilleurs sites sociaux.<\/p>\n
Ci-dessous, nous couvrons ces \u00e9tapes plus en d\u00e9tail pour chaque plate-forme.  En g\u00e9n\u00e9ral, vous voudrez :<\/p>\n
    \n
  1. G\u00e9n\u00e9rez le code d’int\u00e9gration.<\/li>\n
  2. Acc\u00e9dez \u00e0 votre syst\u00e8me de gestion de contenu et collez le code d’int\u00e9gration dans votre visionneuse HTML.<\/li>\n
  3. Finalis\u00e9\u00a0!  Vous avez int\u00e9gr\u00e9 du contenu sur votre site Web ou votre blog.<\/li>\n<\/ol>\n
    Nous allons plonger dans chaque \u00e9tape.<\/p>\n
    <\/span>1. G\u00e9n\u00e9rez le code d’int\u00e9gration.<\/span><\/h3>\n
    Avant d’int\u00e9grer du contenu externe, vous devez d’abord g\u00e9n\u00e9rer un code d’int\u00e9gration pour la publication ou la page que vous souhaitez int\u00e9grer sur votre site Web.<\/p>\n
    Nous verrons comment vous pouvez le faire sur la plupart des principaux r\u00e9seaux sociaux et de contenu.<\/p>\n
    <\/span>Int\u00e9grer un Facebook Courrier<\/span><\/h4>\n
    Pour int\u00e9grer un Facebook publier, proc\u00e9dez comme suit\u00a0:<\/p>\n
      \n
    • Aller vers Facebook dans votre navigateur de bureau et acc\u00e9dez \u00e0 la publication que vous souhaitez int\u00e9grer.<\/li>\n
    • Cliquez sur les trois points dans le coin sup\u00e9rieur droit de la publication.<\/li>\n
    • Dans le menu d\u00e9roulant, cliquez sur Int\u00e9grer<\/strong>.<\/li>\n<\/ul>\n
      \"Bouton<\/p>\n
        \n
      • Une fen\u00eatre pop-up appara\u00eetra, o\u00f9 vous avez la possibilit\u00e9 d’inclure la publication compl\u00e8te et d’acc\u00e9der aux param\u00e8tres avanc\u00e9s.  Pour les d\u00e9butants, nous recommandons de laisser les options telles quelles et de cliquer simplement Copier le code<\/strong>.<\/li>\n<\/ul>\n
        \"Ins\u00e9rer<\/p>\n
          \n
        • Finalis\u00e9\u00a0!  Vous avez votre code d’int\u00e9gration.<\/li>\n<\/ul>\n
          <\/span>Int\u00e9grer une publication Instagram<\/span><\/h4>\n
          Vous souhaitez ins\u00e9rer une publication Instagram ?  Le processus est similaire \u00e0 Facebook’s.  Veuillez noter que vous ne pouvez ins\u00e9rer des messages que depuis la version de bureau et non depuis l’application mobile.<\/p>\n
            \n
          • Cliquez sur les trois points dans le coin sup\u00e9rieur droit de la publication.<\/li>\n
          • Une fen\u00eatre pop-up appara\u00eetra avec diverses options.  Cliquer Int\u00e9grer<\/strong>, l’avant-derni\u00e8re option.<\/li>\n<\/ul>\n
            \"int\u00e9grer-instagram-post\"<\/p>\n
              \n
            • Une fen\u00eatre pop-up appara\u00eetra avec votre code d’int\u00e9gration.  Vous avez la possibilit\u00e9 d’inclure ou d’exclure le titre.<\/li>\n
            • Une fois que vous avez fini de personnaliser vos options, cliquez sur Copiez le code ins\u00e9r\u00e9<\/strong>.<\/li>\n<\/ul>\n
              \"Copiez<\/p>\n
                \n
              • Complet!  Vous avez votre code d’int\u00e9gration Instagram.<\/li>\n<\/ul>\n
                <\/span>Int\u00e9grer une vid\u00e9o YouTube<\/span><\/h4>\n
                Les vid\u00e9os YouTube peuvent faire passer vos articles de blog au niveau sup\u00e9rieur, et la meilleure partie est que vous pouvez int\u00e9grer gratuitement votre richesse de contenu dans vos articles de blog.<\/p>\n
                Pour ce faire, suivez les \u00e9tapes ci-dessous :<\/p>\n
                  \n
                • Acc\u00e9dez \u00e0 la vid\u00e9o que vous souhaitez int\u00e9grer sur votre site Web.<\/li>\n
                • Sous la vid\u00e9o, \u00e0 c\u00f4t\u00e9 de l’endroit o\u00f9 se trouvent les likes, cliquez sur Partager<\/strong>.<\/li>\n<\/ul>\n
                  \"Bouton<\/p>\n
                    \n
                  • Une fen\u00eatre pop-up appara\u00eetra avec diverses options, y compris la possibilit\u00e9 de partager la publication avec d’autres r\u00e9seaux sociaux.  Cliquer Int\u00e9grer<\/strong>.<\/li>\n<\/ul>\n
                    \"Options<\/p>\n
                      \n
                    • YouTube cr\u00e9era un code d’int\u00e9gration que vous pourrez personnaliser.  Vous pouvez d\u00e9marrer la vid\u00e9o \u00e0 un moment donn\u00e9 ou masquer les commandes du lecteur.<\/li>\n
                    • Apr\u00e8s avoir choisi vos options, cliquez sur Copie<\/strong> dans le coin inf\u00e9rieur droit de la fen\u00eatre contextuelle.<\/li>\n<\/ul>\n
                      \"Code<\/p>\n
                        \n
                      • Complet!  Votre vid\u00e9o YouTube est pr\u00eate \u00e0 \u00eatre int\u00e9gr\u00e9e.<\/li>\n<\/ul>\n
                        <\/span>Ins\u00e9rer un tweet<\/span><\/h4>\n
                        En incorporant un Tweet sur votre site Web ou vos pages de blog, vous pouvez stimuler l’engagement pour votre Twitter profil sans d\u00e9pendre de votre Twitter suiveurs.  Les visiteurs du site Web peuvent interagir avec votre Twitter contenu aussi.<\/p>\n
                        Pour int\u00e9grer un Twitter publier, proc\u00e9dez comme suit\u00a0:<\/p>\n
                          \n
                        • Dans un navigateur de bureau, acc\u00e9dez \u00e0 la publication que vous souhaitez int\u00e9grer.<\/li>\n
                        • Cliquez sur les trois points dans le coin sup\u00e9rieur droit de la publication.<\/li>\n
                        • Un menu d\u00e9roulant appara\u00eetra.  Cliquer Ins\u00e9rer un tweet<\/strong>.<\/li>\n<\/ul>\n
                          \"Bouton<\/p>\n
                            \n
                          • Twitter    Il vous m\u00e8nera \u00e0 une page externe sur publish.twitter.com, o\u00f9 vous pourrez personnaliser davantage l’apparence du Tweet avant de l’int\u00e9grer sur votre site.  Par exemple, vous pouvez le mettre en mode sombre et changer la langue d’affichage du Tweet.<\/li>\n<\/ul>\n
                            \"Options<\/p>\n
                              \n
                            • Une fois que vous l’avez personnalis\u00e9, cliquez sur Mettre \u00e0 jour.<\/strong><\/li>\n
                            • Cliquer Copier le code. <\/strong><\/li>\n
                            • Finalis\u00e9\u00a0!  Le Tweet est pr\u00eat \u00e0 \u00eatre int\u00e9gr\u00e9 \u00e0 votre site.<\/li>\n<\/ul>\n
                              Il existe une autre fa\u00e7on de g\u00e9n\u00e9rer un code d’int\u00e9gration pour Twitter.  Allez sur publish.twitter.com et ins\u00e9rez l’URL de la publication que vous souhaitez int\u00e9grer. Twitter Ensuite, il g\u00e9n\u00e9rera le code d’int\u00e9gration et vous pourrez le personnaliser en utilisant le m\u00eame processus que la derni\u00e8re m\u00e9thode.<\/p>\n
                              <\/span>Int\u00e9grer un Pinterest Courrier<\/span><\/h4>\n
                              Int\u00e9grer un Pinterest la publication peut conduire les utilisateurs du site Web \u00e0 votre Pinterest profil et vous aider \u00e0 d\u00e9velopper votre Pinterest Suivant.  Pour commencer, proc\u00e9dez comme suit\u00a0:<\/p>\n
                                \n
                              • Aller vers Pinterest poste que vous souhaitez int\u00e9grer.<\/li>\n
                              • Cliquez sur les trois points \u00e0 c\u00f4t\u00e9 de l’image (ou sous l’image, si vous utilisez le site Web mobile).<\/li>\n
                              • Dans le menu d\u00e9roulant, cliquez sur Obtenir le code d’int\u00e9gration PIN<\/strong>.<\/li>\n<\/ul>\n
                                \"Bouton<\/p>\n
                                  \n
                                • Une fen\u00eatre pop-up appara\u00eetra avec le code d’int\u00e9gration.  Vous avez la possibilit\u00e9 de cr\u00e9er une broche int\u00e9gr\u00e9e petite, moyenne, grande ou tr\u00e8s grande.<\/li>\n<\/ul>\n
                                  \"Code<\/p>\n
                                    \n
                                  • Une fois que vous avez personnalis\u00e9 la taille, mettez le code en surbrillance et cliquez sur Commande + C<\/strong> ou CTRL + C<\/strong>.<\/li>\n
                                  • Finalis\u00e9\u00a0!  Votre \u00e9pingle est pr\u00eate \u00e0 \u00eatre ins\u00e9r\u00e9e.<\/li>\n<\/ul>\n
                                    <\/span>Ins\u00e9rer une pr\u00e9sentation SlideShare<\/span><\/h4>\n
                                    Bien que les pr\u00e9sentations SlideShare ne soient pas si populaires de nos jours, elles peuvent toujours \u00eatre un outil multim\u00e9dia utile pour pimenter les articles et les pages de blog.  Voici comment int\u00e9grer une pr\u00e9sentation SlideShare\u00a0:<\/p>\n
                                      \n
                                    • Acc\u00e9dez \u00e0 la pr\u00e9sentation SlideShare que vous souhaitez int\u00e9grer.<\/li>\n
                                    • Cliquer Partager<\/strong> sous la pr\u00e9sentation.<\/li>\n
                                    • Dans la m\u00eame fen\u00eatre o\u00f9 appara\u00eet la pr\u00e9sentation, vous verrez la possibilit\u00e9 de la partager via les r\u00e9seaux sociaux.  Le code d’int\u00e9gration sera en dessous.<\/li>\n<\/ul>\n
                                      \"Partager<\/strong><\/p>\n
                                        \n
                                      • Choisissez la taille de la fen\u00eatre d’insertion et la diapositive o\u00f9 vous souhaitez que la pr\u00e9sentation commence.<\/li>\n
                                      • Mettez en surbrillance le code d’int\u00e9gration et cliquez sur Commande + C <\/strong>ou CTRL + C<\/strong>.<\/li>\n
                                      • Pr\u00eat!  Vous pouvez d\u00e9sormais int\u00e9grer la pr\u00e9sentation SlideShare sur une page Web ou une publication.<\/li>\n<\/ul>\n
                                        <\/span>Int\u00e9grer une page Web externe<\/span><\/h4>\n
                                        Vous ne voulez pas ins\u00e9rer une publication sociale mais une page web ?  Vous pouvez int\u00e9grer une page Web externe \u00e0 l’aide de la iframe<\/strong> Balise HTML.<\/p>\n
                                        Tous les codes d’int\u00e9gration, y compris ceux des sites sociaux, utilisent des balises iframe.  Voici \u00e0 quoi ils ressemblent :<\/p>\n
                                         

                                        <\/pre>\n
                                        Vous pouvez utiliser ces m\u00eames balises pour int\u00e9grer une page Web externe.  C’est comme \u00e7a:<\/p>\n
                                          \n
                                        • Acc\u00e9dez \u00e0 la page Web que vous souhaitez int\u00e9grer \u00e0 votre site.<\/li>\n
                                        • Ouvrez l’application Bloc-notes sur votre ordinateur.  Collez-y le code suivant\u00a0:<\/li>\n<\/ul>\n
                                           

                                          <\/pre>\n
                                            \n
                                          • Revenez \u00e0 la page Web et copiez l’URL.<\/li>\n
                                          • Collez l’URL compl\u00e8te \u00e0 l’endroit indiqu\u00e9 dans votre code iframe.  N’oubliez pas d’inclure au d\u00e9but de votre URL et de mettre le lien entre guillemets.  Voici \u00e0 quoi devrait ressembler votre code\u00a0:<\/li>\n<\/ul>\n
                                             

                                            <\/pre>\n
                                              \n
                                            • Modifiez la largeur et la hauteur du cadre si vous le souhaitez.<\/li>\n<\/ul>\n
                                               

                                              <\/pre>\n
                                                \n
                                              • Copiez toute la ligne de code.  Ensuite, la page Web est pr\u00eate \u00e0 \u00eatre int\u00e9gr\u00e9e \u00e0 votre site Web.<\/li>\n<\/ul>\n
                                                <\/span>2. Acc\u00e9dez \u00e0 votre syst\u00e8me de gestion de contenu et collez le code d’int\u00e9gration dans votre visionneuse HTML.<\/span><\/h3>\n
                                                Bien que chaque CMS soit diff\u00e9rent, vous pouvez probablement trouver la visionneuse HTML avec des \u00e9tapes similaires.  Nous verrons comment vous pouvez le faire sur le CMS Hub et WordPress.<\/p>\n
                                                <\/span>Centre CMS<\/span><\/h4>\n
                                                Dans CMS Hub, vous n’avez pas r\u00e9ellement besoin d’ajouter votre contenu int\u00e9gr\u00e9 \u00e0 l’aide de l’\u00e9diteur HTML (bien que vous ayez la possibilit\u00e9 de le faire).  C’est comme \u00e7a:<\/p>\n
                                                  \n
                                                • Dans votre tableau de bord HubSpot, acc\u00e9dez \u00e0 Commercialisation<\/strong> > Site Web<\/strong> > Blog<\/strong>.  Si vous pr\u00e9voyez d’ajouter le code \u00e0 une page de site Web, acc\u00e9dez \u00e0 Commercialisation<\/strong> > Site Web<\/strong> > Pages du site Web. <\/strong><\/li>\n<\/ul>\n
                                                  \"Boutons<\/p>\n
                                                    \n
                                                  • Recherchez la publication ou la page \u00e0 laquelle vous souhaitez ajouter le code d’int\u00e9gration.  Survolez-le et cliquez \u00c9diter<\/strong>.<\/li>\n<\/ul>\n
                                                    \"cms-hub-website-page-list\"<\/p>\n
                                                      \n
                                                    • Cliquez sur le module o\u00f9 vous souhaitez ajouter le code d’int\u00e9gration.  Une barre d’options appara\u00eetra pr\u00e8s du haut de l’\u00e9cran.  Sur le c\u00f4t\u00e9 droit, cliquez Ins\u00e9rer<\/strong>.<\/li>\n
                                                    • Choisir Int\u00e9grer<\/strong> dans le menu d\u00e9roulant.<\/li>\n<\/ul>\n
                                                      \"Bouton<\/p>\n
                                                        \n
                                                      • Une fen\u00eatre contextuelle appara\u00eetra.  Collez le code iframe dans la barre de texte.<\/li>\n<\/ul>\n
                                                        \"Ins\u00e9rer<\/p>\n
                                                          \n
                                                        • Cliquer Ins\u00e9rer<\/strong>.<\/li>\n
                                                        • Finalis\u00e9\u00a0!  Vous pouvez modifier la largeur et la hauteur du contenu int\u00e9gr\u00e9 pour le personnaliser davantage.<\/li>\n<\/ul>\n
                                                          Pour acc\u00e9der \u00e0 l’\u00e9diteur HTML, suivez les \u00e9tapes 1 \u00e0 3 ci-dessus.  Dans la barre d’options sup\u00e9rieure, cliquez sur Avanc\u00e9e<\/strong> > Code source<\/strong>.  Vous pouvez ensuite coller votre code d’int\u00e9gration manuellement.  Gardez \u00e0 l’esprit que le r\u00e9sultat final est le m\u00eame.<\/p>\n
                                                          <\/span>WordPress<\/span><\/h4>\n
                                                          Pour coller un code d’int\u00e9gration sur votre site WordPress, suivez les \u00e9tapes ci-dessous :<\/p>\n
                                                            \n
                                                          • Acc\u00e9dez \u00e0 votre espace d’administration et rendez-vous sur Pages<\/strong> ou Publications<\/strong>.<\/li>\n
                                                          • Cliquez sur le titre de la publication \u00e0 laquelle vous souhaitez ajouter le code d’int\u00e9gration.  Cette action vous m\u00e8nera \u00e0 l’\u00e9diteur de publication.<\/li>\n
                                                          • Clique sur le Texte<\/strong> dans le coin sup\u00e9rieur droit de l’\u00e9diteur de texte.<\/li>\n<\/ul>\n
                                                            \"\u00c9diteur<\/p>\n
                                                              \n
                                                            • Collez votre code d’int\u00e9gration \u00e0 l’endroit o\u00f9 vous souhaitez que le module apparaisse.<\/li>\n<\/ul>\n
                                                              <\/span>3. Fini !  Vous avez int\u00e9gr\u00e9 du contenu sur votre site Web ou votre blog.<\/span><\/h3>\n
                                                              Une fois la page recharg\u00e9e, votre publication sociale int\u00e9gr\u00e9e appara\u00eetra.<\/p>\n
                                                              <\/span>Ajoutez du contenu int\u00e9gr\u00e9 pour augmenter l’engagement des utilisateurs<\/span><\/h2>\n
                                                              En incorporant du contenu externe sur vos pages et publications, vous pouvez augmenter l’engagement sur votre site Web et amener les visiteurs de votre site \u00e0 interagir avec le contenu que vous publiez sur les r\u00e9seaux sociaux.  La meilleure partie est que c’est facile \u00e0 faire – g\u00e9n\u00e9rez simplement le code d’int\u00e9gration, collez-le dans votre \u00e9diteur HTML et observez l’augmentation de l’engagement des utilisateurs.<\/p>\n
                                                              \"Nouvel<\/p>\n
                                                               \"Nouvel<\/p>\n