Le Guide ultime pour intégrer du contenu sur votre site Web

Que vous souhaitiez ajouter une preuve sociale à votre contenu, soutenir un blog avec des exemples réels ou étendre la portée de votre site Web avec un fil d’actualité, l’intégration de contenu d’autres plateformes peut ajouter beaucoup de valeur à votre site Web.

Mais trouver comment intégrer réellement ce contenu peut être délicat.FACEBOOK Instagram, Pinterest, Google Agenda, YouTube et SlideShare Vous proposent un guide étape par étape pour intégrer les médias sociaux et le contenu connexe sur votre site Web à partir de Twitter, Facebook, Instagram, Pinterest, Google Agenda, YouTube et SlideShare.

→ Téléchargement gratuit: 5 Étapes clés pour Créer et maintenir un Site Web performant

( Malheureusement, LinkedIn ne permet toujours pas d’intégrer des fonctionnalités pour des publications spécifiques – bien qu’il propose des plugins pour que vous puissiez intégrer votre profil ou votre page LinkedIn.)

Cliquez sur un nom de section pour faire défiler automatiquement vers cette section.Facebook Instagram Facebook et les Publications Instagram 6698

  • Intégrer des Épingles Pinterest 6698>
  • Intégrer des tableaux Pinterest
  • Intégrer des tableaux Pinterest
  • Intégrer un message Google+
  • Intégrer un Tweet
    1. Comment intégrer un Tweet
    2. Intégrer un Message Instagram et des Publications
    3. Intégrer des Épingles Pinterest
    4. Intégrer des tableaux Pinterest
    5. Intégrer un message Google+
    6. Comment intégrer Google Agenda
    7. Comment intégrer une vidéo YouTube
    8. Intégrer des présentations SlideShare et des infographies

    Comment intégrer un Tweet

    1. Trouvez le tweet que vous souhaitez intégrer.
    2. Cliquez sur la flèche vers le bas en haut à droite de votre tweet.
    3. Choisissez « Intégrer le Tweet. »
    4. Copiez le code qui apparaît et collez-le dans l’éditeur HTML de votre site Web.
    5. Ajoutez ‘tw-align-center’ après les mots « twitter-tweet » dans le code d’intégration.

    Trouvez le tweet que vous souhaitez intégrer.

    Pour intégrer un tweet sur votre blog ou votre site Web, vous devez d’abord trouver le tweet que vous souhaitez afficher dans son habitat naturel Twitter Twitter. Localisez le tweet dans votre fil d’actualité Twitter ou sur le profil de l’utilisateur Twitter. Pour cet exemple, nous allons intégrer un tweet du flux Twitter de HubSpot, comme indiqué dans les captures d’écran ci-dessous.

    Cliquez sur la flèche vers le bas en haut à droite du tweet.

    Une fois que vous avez trouvé le tweet que vous souhaitez intégrer, cliquez sur l’icône de flèche orientée vers le bas, située en haut à droite du tweet, comme indiqué ci-dessous.

    downward-arrow-tweet

    Choisissez « Intégrer un Tweet. »

    En cliquant sur cette icône de flèche, vous verrez apparaître un menu déroulant d’options, dont une appelée  » Intégrer un Tweet. » Cliquez sur cette option.

    4. Copiez le code qui apparaît et collez-le dans l’éditeur HTML de votre site Web.

    En cliquant sur « Intégrer un Tweet » dans le menu déroulant indiqué ci-dessus, la zone de code indiquée ci-dessous s’ouvrira. Sous « Intégrer ce Tweet », vous verrez une chaîne de texte surlignée en bleu. Utilisez Command + C sur votre clavier (ou Control + C, si vous utilisez un PC) pour copier ce code dans votre presse-papiers.

    tweet-embed-code

    Avec ce code d’intégration copié dans votre presse-papiers, revenez sur le site Web sur lequel vous souhaitez intégrer ce tweet. Ouvrez le code source de ce site Web (certains systèmes de gestion de contenu ont une icône « < / > » où vous pouvez accéder à ce code source). Ici, vous collerez le code d’intégration du tweet dans votre code HTML précisément à l’endroit où vous souhaitez que le tweet apparaisse.

    Ajoutez ‘tw-align-center’ après les mots « twitter-tweet » dans le code d’intégration.

    Une fois que vous avez collé ce code dans votre code HTML, cependant, vous voudrez centrer ce tweet pour qu’il n’apparaisse pas automatiquement poussé contre le côté gauche ou droit de votre page Web. Pour corriger cela, ajoutez le texte « tw-align-center » (sans guillemets) directement après « twitter-tweet » dans le code d’intégration. Vous pouvez en savoir plus sur cette méthode ici.

    Voici à quoi devrait ressembler le code final:

    < blockquote class= »twitter-tweet » tw-align-center data-lang= »en » > < p lang= »en » dir= »ltr »> Faites-nous savoir! What< br> Quel type de contenu aimeriez-vous voir de nous cette année?</p > & mdash; HubSpot(@HubSpot) <a href= »https://twitter.com/HubSpot/status/1085634067679322114?ref_src=twsrc%5Etfw »>January 16, 2019</ a > < /blocquote >
    < script asynchrone src= »https://platform.twitter.com/widgets.js »charset= »utf-8″></ script >

    C’est tout ! Voici à quoi ressemblera votre tweet intégré lorsque vous aurez terminé:

    Faites-le nous savoir! What
    Quel type de contenu aimeriez-vous voir de notre part cette année ?

    — HubSpot (@HubSpot) Janvier 16, 2019

    Intégrer Facebook Post ou Vidéo

    Recherchez le post Facebook que vous souhaitez intégrer.Facebook :

    Comme pour les étapes d’intégration d’un tweet (énumérées ci-dessus), l’intégration d’un message Facebook sur votre blog ou votre site Web commence sur Facebook. Facebook, sur la page de profil de l’utilisateur Facebook ou sur votre fil d’actualité. Pour cet exemple, nous allons intégrer un post Facebook de la HubSpot Academy, comme indiqué dans les captures d’écran ci-dessous.

    Cliquez sur les points de suspension (« … ») icône en haut à droite du message.

    En haut à droite de la publication Facebook que vous souhaitez intégrer, vous verrez une icône de points de suspension composée de trois petits points. Cliquez sur cette icône, comme indiqué ci-dessous.

    ellipsis-facebook-post

    Cliquez sur  » Intégrer. »

    En cliquant sur l’icône de points de suspension ci-dessous, vous verrez apparaître un menu déroulant d’options, dont une intitulée  » Intégrer. »Si le message que vous souhaitez intégrer est une vidéo, une option similaire intitulée « < / > Intégrer » apparaîtra plus bas dans ce menu. Cliquez sur l’une ou l’autre option.

    Si vous ne voyez pas d’option pour intégrer le message, le message n’est pas public et n’est pas intégrable.

    embed-facebook-post-from-hubspot-academy

    Copiez le code qui apparaît et collez-le dans l’éditeur HTML de votre site Web.

    En cliquant sur l’option « Intégrer » indiquée ci-dessus, la boîte indiquée ci-dessous s’ouvrira. En haut de cette boîte, juste au-dessus des boutons « Masquer l’aperçu » et « Paramètres avancés », vous verrez une ligne de texte codé. Mettez en surbrillance et copiez ce code dans le presse-papiers de votre ordinateur.

    facebook-post-embed-code

    Avec ce code d’intégration copié dans votre presse-papiers, revenez sur le site Web où vous souhaitez intégrer ce message Facebook. Ouvrez le code source de ce site Web (certains systèmes de gestion de contenu ont une icône « < / > » où vous pouvez accéder à ce code source). Ici, vous collerez le code d’intégration de la publication Facebook dans votre code HTML précisément à l’endroit où vous souhaitez que la publication apparaisse.

    Ajoutez des balises < center > et </center > autour de l’intégralité de l’extrait HTML pour centrer votre publication.

    Une fois que vous avez collé ce code dans votre code HTML, cependant, vous voudrez aligner le message au centre afin qu’il n’apparaisse pas automatiquement poussé contre le côté gauche ou droit de votre page Web. Pour corriger cela, enveloppez le code avec les balises ‘< center >’ et ‘</center >’ afin que le message Facebook s’affiche au centre de votre article ou page Web.

    Voici à quoi devrait ressembler le code final:

    < centre > < iframe src= »https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fthehubspotacademy%2Fposts%2F741606746226328%3A0&width=500″ width= »500″ height= »448″ style= »border: none; overflow: hidden » scrolling= »no » frameborder= »0″ allowTransparency= »true » allow= »encrypted-media »> </ iframe > < / centre >

    Que c’est ça ! Voici à quoi cela ressemblera lorsque vous aurez terminé:Facebook

    Intégrer le flux Facebook

    Croyez-le ou non, l’intégration de l’intégralité du flux d’un profil Facebook sur votre site Web est aussi simple que l’intégration d’un seul message ou d’une seule vidéo. Et il y a plus d’une façon de le faire.

    En utilisant un plugin WordPress

    La première façon est d’installer un plugin ou un widget dans votre système de gestion de contenu (CMS). Les utilisateurs de WordPress, par exemple, ont plusieurs plugins de flux Facebook à leur disposition. Voici comment en utiliser un:

    1. Le flux Facebook personnalisé, par Smash Balloon, est l’un de ces plugins WordPress que vous pouvez télécharger via votre compte WordPress. Vous pouvez télécharger ce plugin ici.
    2. Une fois ce plugin téléchargé, connectez-vous à votre compte WordPress et activez ce plugin depuis le menu « Plugins ».Facebook Feed (Flux Facebook) Utilisez les paramètres « Flux Facebook » de votre CMS pour sélectionner et configurer le flux Facebook spécifique que vous souhaitez afficher sur votre site Web.
    3. Entrez le texte « dans l’éditeur HTML de votre site Web pour générer le flux Facebook de votre choix.Facebook Facebook a son propre Plugin de page, vous permettant de produire du code d’intégration pour le flux Facebook individuel de n’importe quel profil et de le saisir dans le code HTML de votre site Web. Voici comment l’utiliser:

      1. Ouvrez l’outil de plugin de page de Facebook.

      Pour intégrer un flux Facebook à votre blog ou site Web, ouvrez l’outil de plug-in de page natif de Facebook ici. Faites défiler cette page jusqu’à ce que vous voyiez la section ci-dessous.

      facebook-page-plugin

      2. Entrez l’URL de la page Facebook que vous souhaitez intégrer.

      Avec cet outil ouvert, créez un nouvel onglet dans votre navigateur Web et accédez au profil Facebook dont vous souhaitez intégrer le flux. Appuyez sur Commande + C sur votre clavier (ou sur Contrôle + C, si vous utilisez un PC) pour copier l’URL de cette page dans le presse-papiers de votre ordinateur.

      Revenez à l’onglet du navigateur qui a le plugin de page de Facebook ouvert. Collez l’URL de votre presse-papiers dans le champ en haut à gauche, comme indiqué dans la capture d’écran ci-dessous. Pour Facebook, nous allons intégrer le flux Facebook de la page professionnelle Facebook de HubSpot.

      hubspot-facebook-page-plugin

      3. Ajoutez les onglets que vous souhaitez afficher à côté de votre flux intégré.

      En plus d’afficher la chronologie complète d’un profil, le plugin de page de Facebook vous permet également d’afficher des onglets sur les événements et/ ou le compte Messenger de ce profil. Par défaut, l’outil de plugin de page aura « timeline » entrée par lui-même.

      Pour ajouter des onglets Événements ou Messenger à votre flux Facebook intégré, cliquez sur le champ « Onglets » en haut à droite de l’outil de plugin de page, comme indiqué ci-dessous. Ajoutez les mots « événements » et /ou « messages » à côté du mot « chronologie », tous séparés par des virgules.

      facebook-plugin-tabs

      4. Personnalisez les dimensions de votre flux Facebook.

      Si votre site Web a des dimensions spécifiques qui limitent la taille du support que vous intégrez, et que vous connaissez ces dimensions, saisissez-les dans les deux champs inférieurs de l’outil de plug-in de page Facebook. Vous pouvez entrer une largeur spécifique dans le champ de gauche et une hauteur spécifique dans le champ de droite.

      Par défaut, votre flux Facebook s’affichera à environ 340×500, bien que vous voyiez les dimensions recommandées dans le texte d’aperçu de l’outil.

      5. Cliquez sur « Obtenir le code. »

      Une fois ces quatre champs remplis, cliquez simplement sur le bouton bleu « Obtenir le code » en bas de l’outil, comme indiqué dans la capture d’écran ci-dessus. Cela ouvrira la boîte de code indiquée ci-dessous.

      6. Cliquez sur l’onglet ‘IFrame’.

      Attention cependant au code que vous sélectionnez… sauf si vous codez votre site Web à partir de zéro, le premier onglet (intitulé « SDK JavaScript ») n’a pas le code que vous souhaitez. Basculez sur l’onglet intitulé « IFrame », comme indiqué ci-dessous. Ce texte est prêt à être intégré dans l’éditeur HTML de votre blog ou de votre site Web.

      facebook-page-plugin-embed-code

      7. Copiez et collez ce code intégré dans l’éditeur HTML de votre site Web.

      Copiez le code ci-dessus dans votre presse-papiers. Ensuite, accédez au site Web sur lequel vous souhaitez intégrer ce flux Facebook. Ouvrez le code source de votre site Web (certains systèmes de gestion de contenu ont une icône « < / > » où vous pouvez accéder à ce code source). Ici, vous collerez le code d’intégration du flux dans votre code HTML précisément là où vous voulez qu’il apparaisse.

      8. Ajoutez des balises < center > et </center > autour de l’intégralité de l’extrait de code IFrame pour aligner le flux au centre.

      Une fois que vous avez collé ce code dans votre code HTML, cependant, vous voudrez aligner le message au centre afin qu’il n’apparaisse pas automatiquement poussé contre le côté gauche ou droit de votre page Web. Pour corriger cela, enveloppez le code avec les balises ‘< center >’ et ‘</center >’ afin que le flux Facebook s’affiche au centre de votre article ou page Web.

      Voici à quoi devrait ressembler le code final:

      < centre > < iframe style= »bordure: aucune; débordement: caché; »allow= »encrypted-media » xml= »lang » src= »https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fhubspot&amp;tabs=timeline%2C%20events%2C%20messages&amp;width=340&amp;height=500&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;appId » width= »340″ height= »500″ frameborder= »0″ scrolling= »non » > </ iframe > </ center >

      C’est tout! Instagram Instagram est un favori parmi les spécialistes du marketing, mais intégrer un flux Instagram entier peut être difficile. Voici comment intégrer un flux Instagram ainsi que des publications individuelles sur votre site Web.Facebook Instagram Instagram Feed est un plugin WordPress pour le flux Instagram.

      Le plugin WordPress Instagram Feed

      Des fabricants du flux Facebook personnalisé vient le flux Instagram. Développé Instagram Balloon, ce plugin WordPress permet aux sites Web basés sur WordPress d’intégrer facilement des flux Instagram entiers à partir de comptes Instagram spécifiques. Voici comment l’utiliser:

      1. Téléchargez le plugin Instagram Feed pour WordPress ici.
      2. Une fois ce plugin téléchargé, connectez-vous à votre compte WordPress et activez ce plugin depuis le menu « Plugins ».Instagram Feed (Flux Instagram) de votre CMS pour sélectionner votre jeton d’accès Instagram et votre identifiant utilisateur.
      3. Entrez le texte « dans l’éditeur HTML de votre site Web pour générer le flux Instagram de votre choix.

      Selon les instructions de ce plugin sur WordPress, vous pouvez afficher plusieurs flux Instagram en même temps en entrant du texte au format de: ». Dans cet exemple, vous intégriez efficacement six images chacune pour trois flux Instagram distincts. Instagram Instagram

      Fonction d’intégration d’Instagram

      Pour intégrer des images Instagram individuelles, vous n’avez pas besoin de chercher plus loin que les fonctionnalités natives d’Instagram. Voici Instagram:

      Important: Pour intégrer des publications Instagram spécifiques sur un blog ou un site Web, le compte Instagram auquel il appartient ne peut pas être défini sur privé. Pour définir un compte sur public, accédez à ce profil et cliquez sur « Modifier le profil  » > Confidentialité et sécurité. À partir de cette page, décochez l’option « Compte privé » et vous devriez être prêt.

      1. Cliquez sur l’image Instagram que vous souhaitez intégrer.

      Accédez à la publication Instagram que vous souhaitez intégrer à votre site Web et cliquez dessus pour agrandir l’image. Pour cet exemple, nous allons intégrer une image du compte culture de HubSpot, hubspotlife, comme indiqué dans les captures d’écran ci-dessous.

      2. Cliquez sur les points de suspension (« … ») icône dans le coin inférieur droit du message.

      Avec le message dans sa vue complète, regardez en bas à droite de la section commentaires. Cliquez sur l’icône de points de suspension, composée de trois petits points, comme indiqué ci-dessous.

      instagram-post-ellipsis

      3. Sélectionnez  » Intégrer. »

      En cliquant sur l’icône de points de suspension ci-dessus, vous ouvrirez la boîte d’options ci-dessous. Dans ce menu, sélectionnez « Intégrer », le troisième bouton en haut.

      instagram-post-embed-menu

      4. Copiez et collez le code intégré dans l’éditeur HTML de votre site Web.

      Tout comme les instructions pour Twitter et Facebook (énumérées ci-dessus), ce bouton « Intégrer » produira une autre boîte contenant une piqûre de texte codé. Une fois cette case ouverte sur votre écran, mettez en surbrillance le code en haut, comme indiqué ci-dessous. Cliquez ensuite sur le bouton bleu « Copier le code d’intégration » en bas pour copier ce texte dans le presse-papiers de votre ordinateur.

      instagram-post-embed-code

      5. Ajoutez des balises < center > et </center > autour de l’intégralité de l’extrait HTML pour aligner le message au centre.

      Une fois que vous avez collé ce code dans votre code HTML, vous voudrez toutefois aligner le post Instagram au centre afin qu’il n’apparaisse pas automatiquement contre le côté gauche ou droit de votre page Web. Pour corriger cela, enveloppez le code avec les balises ‘< center >’ et ‘</center >’ afin que l’image s’affiche au centre de votre article ou page Web.

      C’est tout! Voici à quoi ressemblera votre publication Instagram intégrée:

      Intégrer des épingles Pinterest

      Ouvrez le générateur de widgets Pinterest.

      Pour intégrer du contenu épinglé de Pinterest sur votre blog ou votre site Web, ouvrez le widget builder de Pinterest, disponible ici.

      Sélectionnez « Widget Pin » dans la colonne de gauche.

      Faites défiler vers le bas jusqu’à ce que vous voyiez l’option Widget Pin, comme indiqué dans la capture d’écran ci-dessous.

      pinterest-pin-widget

      Collez l’URL du code PIN que vous souhaitez intégrer.

      Commencez par remplir le champ « URL du code PIN » en haut de l’outil avec l’URL du code PIN que vous souhaitez intégrer à votre site Web, comme indiqué ci-dessous.

      pin-widget-url

      Copiez et collez le code de cette section dans l’éditeur HTML de votre site Web.

      Dans le widget Pinterest, faites défiler jusqu’à la section située juste en dessous de l’image d’aperçu de votre pin, où vous trouverez deux lignes de texte codé – comme indiqué ci-dessous.

      pinterest-pin-embed-code Ouvrez l’éditeur HTML de votre site Web et copiez et collez la première ligne exactement à l’endroit où vous souhaitez que votre épingle Pinterest apparaisse sur la page. Ensuite, copiez la deuxième ligne de texte et collez-la dans l’éditeur HTML de votre site Web tout en bas de la page.

      Veillez à ne pas coller cet extrait entier plus d’une fois sur une seule page Web. Si vous souhaitez que le code pin apparaisse plusieurs fois, il vous suffit de copier la première ligne de code et de le coller là où vous souhaitez qu’il apparaisse sur la page. Et n’oubliez pas de répéter les étapes suivantes dans chaque instance du code pin que vous décidez d’intégrer.

      Copiez l’extrait de code fourni ci-dessous.

      <!– pinterest–>

      Collez cet extrait de code entre la balise d’ouverture < a > et la balise de fermeture </a >.

      Le code devrait ressembler à ceci:

      < une broche de données-do = »embedPin » href= »http://www.pinterest.com/pin/99360735500167749/ »><!–pinterest–></a>

      En bas de page :
      < type de script= »text/javascript » async src= »//assets.pinterest.com/js/pinit.js  » > </script >

      Ajoutez des balises < center > et </center > autour de l’intégralité de l’extrait HTML pour centrer la broche.

      Voici à quoi devrait ressembler le code final:

      < centre > < une broche de données-do = »embedPin » href= »http://www.pinterest.com/pin/99360735500167749/ »><!–pinterest–></a>
      <!– Appelez pinit.js une seule fois par page –>
      < type de script = »texte/javascript » asynchrone src= »// actifs.pinterest.com/js/pinit.js »> < / script > < / centre>

      C’est tout! Voici à quoi cela ressemblera lorsque vous aurez terminé:

      Intégrer des tableaux Pinterest

      Pour ajouter des tableaux Pinterest, les étapes sont généralement les mêmes que pour intégrer des épingles individuelles explained expliqué ci-dessus. Voici comment cela se fait:

      1. Ouvrez le générateur de widgets de Pinterest.
      2. Sélectionnez « Widget Conseil » dans la colonne de gauche, juste en dessous du générateur « Widget Pin ».
      3. Lorsque le widget du tableau s’ouvre, suivez les mêmes étapes que pour l’ajout d’épingles, énumérées ci-dessus.

      Copiez et collez les deux dernières lignes de code dans l’éditeur HTML de votre site Web, et c’est tout! Voici à quoi ressemble une carte intégrée :

      Intégrer Google+ Post

      1. Trouvez le message Google+ que vous souhaitez intégrer. Passez votre souris sur le coin supérieur droit et cliquez sur la flèche grise qui apparaît pour faire descendre plus d’options.

      google-plus-embed-1

      2. Choisissez « Intégrer le message. »

      google-plus-embed-2

      3. Copiez l’intégralité du code qui apparaît et collez-le dans la vue HTML de votre site Web.

      google-plus-embed3

      4. Centrez le message intégré en ajoutant < center > et </center > autour de l’extrait HTML entier.

      Voici à quoi devrait ressembler le code final:

      < centre > <!– Placez cette étiquette dans votre tête ou juste avant votre étiquette de corps proche. –>
      < type de script = « texte/javascript » src= »https://apis.google.com/js/plusone.js »></script>
      <!– Placez cette balise à l’endroit où vous souhaitez que le widget s’affiche. –>
      < div class= données « g-post » – href= »https://plus.google.com/110490539670062886957/posts/be2TCKDBMsG »></div></center>

      C’est tout! Voici à quoi cela ressemblera lorsque vous aurez terminé:

      Comment intégrer Google Agenda

      Pour intégrer un calendrier Google particulier à votre blog ou site Web, vous devez utiliser la version Web de Google Agenda plutôt que l’application mobile.

      L’a-t-il ouvert? Intégrons-le.

      Cliquez sur l’icône d’engrenage pour ouvrir vos paramètres.

      En haut de votre calendrier Google, cliquez sur l’icône d’engrenage et sélectionnez « Paramètres », comme indiqué ci-dessous.

      google-calendar-settings

      Sélectionnez le calendrier que vous souhaitez intégrer et faites défiler jusqu’à  » Intégrer le calendrier. »

      Une fois que vous êtes dans les paramètres de votre calendrier, recherchez dans la barre latérale de gauche le calendrier spécifique que vous souhaitez intégrer à votre site Web. Pour cet exemple, nous allons intégrer le calendrier des Fêtes nationales de HubSpot.

      Une fois votre calendrier sélectionné, regardez à droite de vos paramètres et faites défiler vers le bas jusqu’à ce que vous voyiez la section « Intégrer le calendrier ». (Vous pouvez également cliquer simplement sur l’option du même nom sur le côté gauche sous le calendrier de votre choix.)

      google-integrate-calendar-1

      Cliquez sur « Personnaliser » et configurez la taille et la couleur de votre calendrier.

      Dans la section « Intégrer le calendrier » de vos paramètres, recherchez et cliquez sur le bouton « Personnaliser », juste au-dessus de la ligne de texte « Intégrer le code ». Cela ouvrira une fenêtre d’options plus grande où vous pourrez modifier la taille et la palette de couleurs de votre calendrier avant de l’intégrer.

      Si vous êtes satisfait de l’apparence actuelle du calendrier et que vous n’avez pas besoin d’apporter de modifications esthétiques, vous pouvez simplement copier ce code d’intégration dans votre presse-papiers.

       Bouton Personnaliser dans les paramètres d'intégration du calendrier de Google.

      Copiez votre code d’intégration en haut et collez-le dans l’éditeur HTML de votre site Web.

      Copiez votre code d’intégration, depuis la fenêtre Personnaliser ou depuis la page des paramètres, et collez-le dans l’éditeur HTML de votre site Web. Si vous le souhaitez, vous pouvez envelopper ce code d’intégration dans les balises < center > et </center > pour centrer votre calendrier dans les marges de votre site Web.

      Comment intégrer une vidéo YouTube

      1. Trouvez la vidéo YouTube que vous souhaitez intégrer.
      2. Sous la vidéo, choisissez « Partager. »
      3. Dans le menu qui apparaît, choisissez « Intégrer. »
      4. Copiez le code qui apparaît et collez-le dans l’éditeur HTML de votre site Web.

      Trouvez la vidéo YouTube que vous souhaitez intégrer.

      Intégrer une vidéo YouTube sur votre blog ou votre site Web est incroyablement facile. Pour commencer, ouvrez YouTube et accédez à la vidéo que vous souhaitez intégrer. Pour cet exemple, nous allons intégrer une vidéo sur le marketing entrant à partir de la chaîne YouTube ENTRANTE de HubSpot as comme indiqué dans les captures d’écran ci-dessous.

      Sous la vidéo, choisissez « Partager. »

      Sous la vidéo elle-même, recherchez le bouton « Partager », comme indiqué ci-dessous.

      inbound-youtube-video

      Dans le menu qui apparaît, choisissez « Intégrer. »

      En cliquant sur le bouton « Partager » sous la vidéo YouTube choisie, vous ouvrirez un petit menu d’options où vous pourrez partager la vidéo sur différents réseaux sociaux. À l’extrême gauche de ces options, cependant, vous verrez également un bouton circulaire « Intégrer ». Cliquez sur ce bouton.

      youtube-share-embed

      Copiez le code qui apparaît et collez-le dans l’éditeur HTML de votre site Web.

      La fenêtre suivante qui apparaîtra produira une grande boîte de texte codé, ainsi que quelques options pour personnaliser votre vidéo avant de l’intégrer. Sous le code d’intégration, par exemple, vous pouvez définir si vous souhaitez que votre vidéo démarre à un horodatage particulier.

      Une fois que vous avez vos paramètres exactement comme vous le souhaitez, mettez en surbrillance le texte codé en haut de la fenêtre. Ensuite, cliquez sur « Copier » en bas à droite.

      youtube-embed-code

      Ajoutez des balises < center > et </center > autour de l’intégralité de l’extrait HTML pour aligner votre vidéo au centre.

      Voici à quoi devrait ressembler le code final:

      < centre > < iframe width= »560″ height= »315″ src= »https://www.youtube.com/embed/mZxa3lrLhXM »frameborder= »0″ allow= »accéléromètre; lecture automatique; médias cryptés; gyroscope; image dans l’image » allowfullscreen> </ iframe > </ centre >

      C’est tout! Voici à quoi cela ressemblera lorsque vous aurez terminé:

      Intégrer des présentations et des infographies SlideShare

      Trouvez la présentation ou l’infographie SlideShare sur laquelle vous souhaitez intégrer SlideShare.net .

      slideshare_step_1

      Cliquez sur « Personnaliser. »

      Si vous souhaitez personnaliser votre présentation ou votre infographie de SlideShare intégrée, cliquez sur  » Personnaliser  » et les options suivantes apparaîtront, affichées ci-dessous. Choisissez les options que vous souhaitez, puis copiez le code dans la section « Intégrer » et collez-le dans la vue HTML de votre site Web.

       Options pour intégrer une présentation Slideshare

      Centrez le Slideshare intégré en ajoutant < center > et </center > autour de l’intégralité de l’extrait HTML.

      Voici à quoi devrait ressembler le code final:

      < centre > < iframe src= »//www.slideshare.net/slideshow/embed_code/31128788 « width= »427″ height= »356″ frameborder= »0″ marginwidth= »0″ marginheight= »0″ scrolling= »non » allowfullscreen> < / iframe > < div> < strong> < a href= »https://www.slideshare.net/HubSpot/a-sales-and-marketing-love-story » title= »Une histoire d’amour commerciale et marketing » target= » _blank »>Une Histoire d’amour Commerciale et marketing </un > </strong> de < strong > < a href= »http://www.slideshare.net/HubSpot » target= »_blank »>HubSpot</a></strong></div></center>

      C’est tout! Voici à quoi cela ressemblera lorsque vous aurez terminé:

      Certains de ces codes d’intégration nécessiteront peut-être un petit ajustement pour être parfaits sur votre blog ou votre site Web, mais en suivant ces étapes, vous devriez commencer. Bonne intégration!

       Livre électronique du site Web de Canva HubSpot

  • Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée.