Guide pratique pour afficher les supports inline et les incorporations sur MSN

Découvrez comment afficher correctement des images, des vidéos, des diaporamas et des incorporations sociales dans le corps de votre article à l’aide du code HTML et du flux RSS multimédia. Ce guide décrit les meilleures pratiques en matière de balises, de métadonnées et de mise en forme prises en charge pour garantir un rendu fluide sur MSN.

Dans cet article

Instructions HTML

Balises HTML autorisées

Balises HTML restreintes

Images

Afficher des images avec du code HTML inline

Afficher des images avec rss multimédia

Vidéos

Liens connexes

Slideshows

Incorporations de réseaux sociaux

Instructions HTML

Html peut être utilisé pour spécifier le champ corps d’un article ou le champ de description de l’image de diapositive dans un diaporama. Elle n’est autorisée dans aucun autre champ. Il existe quelques recommandations générales à garder à l’esprit lors de l’utilisation du code HTML :

  • Les services d’ingestion Microsoft suppriment toujours les balises non autorisées. Le contenu de la balise et les enfants peuvent également être supprimés.
  • Les services d’ingestion Microsoft peuvent propre du code HTML à partir d’éléments susceptibles d’affecter les expériences de rendu telles que les styles inline.
  • Il est recommandé aux éditeurs de simplifier la hiérarchie HTML et d’éviter les hiérarchies profondément liées au-delà de 10 niveaux.
  • Évitez d’utiliser plusieurs balises br> consécutives<. <Les sauts de ligne br> à la fin du document seront supprimés.
  • <Les iframes> utilisés à des fins non explicitement mentionnées dans ce document seront supprimés.

Balises HTML autorisées

Ces balises sont autorisées dans le corps de l’article :

  • Style< de policeb>, <i>, <em>, <fort>
  • Taille de police<sub>, <sup>, <small>
  • Rubriques<h1>, <h2>, <h3>, <h4>, <h5>
  • Liens<a> - les valeurs href doivent utiliser de préférence HTTPS, HTTP et mailto :
  • Images<Img>
  • Tables<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <légende>, <colgroup>
  • Liste<ol>, <ul>, <li>
  • Regroupement<span>, <div>, <p>, <br>
  • Intègre<blockquote>, <iframe> uniquement acceptable pour la vidéo et les incorporations sociales prises en charge.

Remarque

En règle générale, les attributs sont supprimés de tous les éléments, sauf s’ils sont utilisés par des fonctionnalités sous-jacentes telles que href dans <un> et src dans <img>.

Balises HTML restreintes

Les balises suivantes sont toujours supprimées du corps des articles entrants et peuvent entraîner le rejet du contenu :

  • <style>
  • <script>
  • <objet>
  • <param>
  • <Applet>
  • <incorporer>
  • <media :content url='http ://test.com/test.mp4'>
  • <media :content url='http ://test.com/test.avi'>
  • <media :content url='http ://test.com/test.wmv'>
  • <Figure>
  • <Médias>
  • <div><a href='https ://infogram.com' /></div>
  • <a href='... giphy.com/gifs...'>via GIPHY</a>

Images

Positionnement de l’image

Si vous ajoutez une image au corps HTML de l’article à l’aide <d’img> ou <de balises de figure> , elle conserve automatiquement son emplacement dans le corps. Sinon, si vous utilisez <media :content>, votre image peut être placée à un emplacement choisi automatiquement par les services d’ingestion. Si une balise a une URL « src » qui correspond à l’URL d’un <élément media :content> , l’image n’est ingérée qu’une seule fois et se trouve à l’emplacement où la balise img est placée.

Image de début

Vous pouvez informer l’ingestion qu’une image particulière peut être utilisée comme image recommandée dans le carte promo en ajoutant class="type :primaryImage » à la <balise img>.


<img src="http://contoso.com/image.jpg" class="type:primaryImage">

Afficher des images avec du code HTML inline

<Balises img>

Vous pouvez fournir des métadonnées supplémentaires lorsque vous utilisez la balise img> dans le <corps HTML de l’élément de flux. Si des métadonnées sont fournies pour la même URL d’image à la fois inline et à l’aide de balises MEDIA RSS, <les métadonnées media :content> sont toujours prioritaires.

Vous pouvez placer toutes les métadonnées d’image inline dans le code HTML en tirant parti des attributs data-*, comme dans l’exemple suivant :


<content:encoded>  <![CDATA[      <p>Article body paragraph 1</p>             <img src="http://contoso.com/image.jpg"         width="620"        height="569"         title="Image title"        alt="Image alt text"        data-portal-copyright="Joe Gargery/Fabrikam Images"         data-has-syndication-rights="1"         data-license-id="698526"        data-licensor-name="Licensor name"         data-focal-region="x1:245,y1:145,x2:520,y2:320" />            <p>Article body paragraph 2</p></content:encoded>

<Étiquettes de figure>

Vous pouvez également remplir la <balise img> avec des paramètres facultatifs comme dans l’exemple précédent.


<content:encoded>  <![CDATA[      <p>Article body paragraph 1</p>             <figure>        <img src="http://contoso.com/image.jpg" width="620" title="image title" alt="Image alt text"/>        <figcaption>          Image caption          <span class="copyright">Image copyrights</span>        </figcaption>      </figure>                 <p>Article body paragraph 2</p></content:encoded>

Afficher des images avec rss multimédia

La méthode recommandée pour ajouter des métadonnées d’image consiste à utiliser l’élément Media RSS <media :content> pour spécifier les métadonnées d’image. Par défaut, l’image est placée en haut de l’article.

<Les éléments media :content> ne peuvent pas être spécifiés dans le corps de l’article. Ils doivent être spécifiés en tant qu’enfants immédiats de l’élément racine (<élément> dans RSS ou <entrée> dans Atom).


<!-- REQUIRED: URL must be provided for media elements   NOTE: you need to specify medium and set to "image" or "video" depending on the content type --><media:content url="https://contoso.com/image.jpg" type="image/jpeg" medium="image">    <!-- provide image credits (such as original photographer..etc) in this tag-->  <media:credit>Joe Gargery/Fabrikam Images</media:credit>    <!-- image title -->  <media:title>Image1 title</media:title>    <!-- use the text tag to specify alt-text -->  <media:text>Image1 alt-text</media:text>    <!-- to provide focal region information, you may use Microsoft Ingestion namespace as follows -->  <mi:focalRegion>    <mi:x1>245</mi:x1>    <mi:y1>145</mi:y1>    <mi:x2>520</mi:x2>    <mi:y2>320</mi:y2>  </mi:focalRegion>    <!-- Following 3 fields are used to specify image rights. If you do not indicate HasSyndicationRights as false, we assume you have the rights.-->  <mi:hasSyndicationRights>1</mi:hasSyndicationRights>  <mi:licenseId>698525</mi:licenseId>  <mi:licensorName>Licensor name</mi:licensorName></media:content>

Vidéos

MSN prend en charge les configurations de lecteur First-Party (1PP) et de lecteur tiers (3PP).

Vidéos 1PP : Dans ce scénario, l’URL du fichier vidéo doit être fournie afin que Microsoft Ingestion Services télécharge et stocke le fichier sur les serveurs MSN. Les vidéos 1PP seront rendues à l’aide de MSN Vidéo Player.

Vidéos 3PP : Les vidéos 3PP sont lues sur un lecteur spécifique au fournisseur (par exemple, YouTube, DailyMotion, etc.)

Afficher la vidéo avec HTML

1PP

Vous pouvez utiliser la balise HTML de la <vidéo> pour exprimer une vidéo inline.


<video id="8172818" title="Video title" poster="https://contoso.com/thumbnail.jpg" data-description="this is a sample inline video" data-portal-copyright="Joe Gargery/Fabrikam Videos">     <source src="https://contoso.com/video.mp4" type="video/mp4"></source>  </video>

3PP

YouTube est le seul lecteur 3PP pris en charge à l’aide de l’élément <iframe> .


<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true"  src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>

Important

En raison des récents changements de plateforme du côté de YouTube, MSN ne peut actuellement pas modérer les incorporations de YouTube. Par conséquent, toutes les vidéos YouTube 3PP soumises via des flux ou du code HTML d’article seront rejetées pendant l’ingestion. Ce problème affecte une petite partie du contenu global, mais les partenaires doivent éviter d’utiliser des incorporations YouTube jusqu’à nouvel ordre. Nous allons mettre à jour ces conseils une fois la prise en charge restaurée.

Affichage de la vidéo avec rss multimédia

Pour incorporer un média à l’aide de Media RSS, les <media:content> éléments et <media:group> doivent être placés en dehors du corps HTML et ajoutés en tant qu’enfants immédiats de l’élément<item> (RSS) ou <entry> (ATOM). Ces balises ne peuvent pas être encapsulées ou combinées avec du contenu HTML dans le corps de l’article (par exemple, dans <content:encoded>), ou elles seront ignorées pendant l’ingestion.

1PP


<!-- REQUIRED: URL must be provided for media elements. It is also used to uniquely identify the video.NOTE: you need to specify medium and set to "image" or "video" depending on the contenttype --><media:content url="https://contoso.com/video.mp4" duration="91" type="video/mp4" medium="video">    <!-- a <guid> may be specified to uniquely identify the video. If not specified, the URL will be used as an identifier. -->  <guid>8172818</guid>  <!-- video title must be specified. -->  <media:title>Video title</media:title>  <!-- video image thumnail is required if the video is 3PP (except YouTube) -->  <media:thumbnail url="https://contoso.com/image.jpg"/>    <!-- provide video attribution in media:credit, recommended format is: Author name/Agency name -->  <media:credit>Joe Gargery/Fabrikam Videos</media:credit>  <!-- description is used to specify caption text displayed below the video -->  <media:description>Video description</media:description></media:content>

YouTube


<media:content   type="application/x-shockwave-flash" medium="video"   isDefault="true" expression="full" duration="117"  url="https://www.youtube.com/v/XnZ_J3l_0z4">  <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" />  <media:player url="https://www.youtube.com" />  <media:title>Video title</media:title>  <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>

DailyMotion


<media:content   type="application/x-shockwave-flash" medium="video"   isDefault="true" expression="full" duration="117"  url="https://www.dailymotion.com/video/x6qnrdo">  <media:thumbnail url="https://contoso.com/images/thumb60-zTG.jpg" />  <media:player url="https://www.dailymotion.com" />  <media:title>Video title</media:title>  <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>

Autre

Les lecteurs vidéo 3PP pris en charge doivent être spécifiés lors de l’intégration de la marque de l’éditeur. Pour ces lecteurs vidéo 3PP pris en charge, vous devez fournir un identificateur vidéo unique via l’élément <GUID> pour toutes les vidéos 3PP.


<!-- REQUIRED: <guid>, duration, title and description are required fields --><media:content   type="application/x-shockwave-flash" medium="video"   isDefault="true" expression="full" duration="117"  url="https://contoso.com/videos/268192">  <guid>268192</guid>  <media:thumbnail url="https://contoso.com/images/thumb14ds12.jpg" />  <media:player url="https://contos.com/player" />  <media:title>Video title</media:title>  <media:description>Video description</media:description>  <media:credit>Joe Gargery/Fabrikam Videos</media:credit></media:content>

Sous-titres sur la vidéo

Vous pouvez utiliser l’élément <media :subtitle> pour fournir un fichier de format texte chronoté externe basé sur le format W3C Timed Text. Seul TTML 1 est actuellement pris en charge.


<media:content  type="video/mp4" duration="75" medium="video"  url="https://contoso.com/videos/sports.mp4">  <.....>  <.....>  <media:subTitle     type="application/ttml"     lang="en"     href="https://www.contols.org/closedcaptions.ttml" 
​​​​​​​/></media:content>

Les fichiers vidéo doivent être enregistrés dans un format approuvé, tel qu’un fichier MP4. Files sont autorisés s’ils proviennent de votre propre site web ou s’ils sont hébergés sur un serveur tel qu’AWS.

Les liens Dropbox, les liens YouTube, etc., ne sont pas pris en charge dans les flux RSS. Cela est dû au fait que la vidéo ne peut pas facilement ou immédiatement extraire de ces liens, car ils sont « fermés ».

Le module « plus du fournisseur » est l’occasion pour les marques d’afficher trois liens de contenu sur les pages d’article et de galerie, qui sont liés au site web de la marque.

Il existe deux façons de choisir les trois liens affichés dans ce module :

  1. Remplir automatiquement les articles les plus récents : Microsoft affiche des liens vers les articles les plus récents qu’il a ingérés parmi les flux fournis par votre marque. Nous utilisons le lien canonique par défaut, mais s’il n’est pas fourni, Microsoft n’affichera pas ce lien.
  2. Fournissez des liens connexes avec l’article : consultez ci-dessous pour obtenir des exemples sur la façon de procéder. Si cette option est sélectionnée, vous devez fournir au moins trois liens connexes avec chaque élément de contenu dans le flux.

Des liens connexes peuvent être ajoutés en tant qu’éléments enfants aux éléments de flux de niveau racine (articles et galeries). En règle générale, les éditeurs doivent fournir au moins 3 liens pour qu’ils apparaissent dans la section « connexe » de msn.

Tous les liens connexes et inline doivent utiliser de préférence le schéma HTTPS.

Pour spécifier dans Atom, les éditeurs peuvent simplement utiliser l’élément . Ils doivent également utiliser le même élément dans RSS après avoir déclaré l’espace de noms Atom. En outre, étant donné qu’une image miniature est requise, vous pouvez combiner avec <les éléments media :> , comme illustré dans cet exemple :


<item><…>  <!-- Example of specifying 3 Related Links. In RSS, you need to use of the atom namespace `xmlns:atom="http://www.w3.org/2005/Atom"` -->    <!-- REQUIRED: links must have valid "href" and "title" attribute values.-->  <atom:link rel="related" type="text/html" href="https://contoso.com/news_1.html"       title="New IRS proposal">        <!-- REQUIRED: you must provide a thumbnail image with the link -->    <media:thumbnail url="https://contoso.com/image2.jpg"  />   </atom:link>  <atom:link rel="related" type="text/html" href="https://contoso.com/news_2.html"       title="New IRS proposal">    <media:thumbnail url="https://contoso.com/image2.jpg" />  </atom:link>  <atom:link rel="related" type="text/html" href="https://contoso.com/news_3.html"       title="New IRS proposal">    <media:thumbnail url="https://contoso.com/image3.jpg" />  </atom:link></item>

Slideshows

Vous pouvez ajouter un diaporama inline à un emplacement spécifique dans le code HTML du corps de l’article en utilisant une construction <spéciale div class="Gallery »> comme conteneur d’une série d’éléments de <figure> .


<div class="slideshow">  <!-- use <cite> to specify an authro for the inline slideshow.  If not specified, the parent article's author will be assigned -->  <cite>Slideshow author</cite>  <!-- use <title> to specify an authro for the inline slideshow. If not specified, the parent article's title will be assigned -->  <title>Slideshow title</title>  <!-- each figure element is considered a separate slide -->  <figure>    <img src="https://v3spec.msn.com/image1.jpg" title="slide 1 title" />    <figcaption>slide 1 caption      <span class="copyright">slide 1 image copyrights</span>    </figcaption>  </figure>  <figure>    <img src="https://v3spec.msn.com/image2.jpg" title="slide 2 title" />    <figcaption>slide 2 caption      <span class="copyright">Joe Gargery/Fabrikam Images</span>    </figcaption>  </figure></div>

Affichage de diaporamas avec rss multimédia

Pour ajouter un diaporama inline, utilisez l’élément <media :group> comme enfant de l’élément <> avec lequel vous souhaitez incorporer le diaporama.

Inline Media RSS Slideshows place dans l’article est décidé par les services d’ingestion. Si vous devez placer les diaporamas dans un emplacement spécifique, utilisez plutôt du code HTML.


<!-- Note that in the case of embedded slideshow, the slideshow title and description     will be the same as the parent article's--><media:group>    <!-- Inline slideshow title. If you do not specify a title for inline slideshow,  the slideshow will be ingested with the same title of the parent article. -->  <media:title>Slideshow title</media:title>  <!-- Inlien slideshow author. Similar to title, if not specified, the slideshow will have the same author of the parent article. -->   <media:credit role="author">Slideshow author</media:credit>  <!-- in this case  you can provide consecutive slides in <media:content> -->  <media:content url="https://contoso.com/image1.jpg" type="image/jpeg" medium="image">    <!-- provide iamge attribution in media:credit,     recommended format is: Photographer name/Agency name -->        <media:credit>Joe Gargery/Fabrikam Images</media:credit>            <!-- REQUIRED: slide title must be provided in the following element -->    <media:title>Slide 1 title</media:title>        <!-- alt text for slide image-->    <media:text>Slide 1 alt-text</media:text>                  <!-- slide caption should be added in the description element. HTML is allowed in this field when you wrap content within a CDATA structure. -->    <media:description>      <![CDATA[        <p>Slide 1 description</p>      ]]>    </media:description>        <!-- additional slide image metadata -->    <mi:focalRegion>      <mi:x1>245</mi:x1>      <mi:y1>140</mi:y1>      <mi:x2>540</mi:x2>      <mi:y2>320</mi:y2>    </mi:focalRegion>    <mi:hasSyndicationRights>1</mi:hasSyndicationRights>    <mi:licenseId>698525</mi:licenseId>    <mi:licensorName>Licensor name</mi:licensorName>  </media:content>  <media:content url="https://contoso.com/image2.jpg" type="image/jpeg" medium="image">    <media:credit>Joe Gargery/Fabrikam Images</media:credit>    <media:title>Slide 2 title</media:title>    <media:text>Slide 2 alt-text</media:text>    <media:description>Slide 2 description</media:description>    <mi:focalRegion>      <mi:x1>110</mi:x1>      <mi:y1>312</mi:y1>      <mi:x2>615</mi:x2>      <mi:y2>520</mi:y2>    </mi:focalRegion>    <mi:hasSyndicationRights>1</mi:hasSyndicationRights>    <mi:licenseId>698526</mi:licenseId>    <mi:licensorName>Licensor name</mi:licensorName>  </media:content></media:group>

Incorporations de réseaux sociaux

Les incorporations de réseaux sociaux suivantes peuvent être insérées dans un corps HTML d’article :

  • X
  • Facebook
  • Instagram
  • Pinterest
  • infogr.am
  • Spotify
  • S' épanouir
  • Google Maps
  • Giphy
  • Reddit
  • TikTok

Vous pouvez utiliser le code incorporé standard recommandé par chaque fournisseur de réseaux sociaux pour vous assurer que l’incorporation est conservée dans l’article.

Toutes les URL pointant vers des sources d’incorporation de réseaux sociaux doivent être strictement https, sinon elles seront rejetées.

Voici quelques exemples d’incorporations :

X


<blockquote class="twitter-tweet" align="center" width="350">    <p>We’re more optimistic than ever. The future will surprise the pessimists    </p>&mdash; Bill Gates (@BillGates)    <a href="https://twitter.com/BillGates/status/835506391339139073">February 25, 2017</a></blockquote>

Facebook (iframe)


<iframe frameborder="0" allowTransparency="true"     src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fcontosoice%2Fposts%2F1651549695142860&width=500"></iframe>

Facebook (div)


<div class="fb-post" data-href="https://www.facebook.com/contosoice/posts/1651549695142860" data-width="500" data-show-text="true">    <blockquote cite="https://www.facebook.com/contosoice/posts/1651549695142860">        <p>Post title</p>Posted by <a href="https://www.facebook.com/contosoice/">Contoso ICE</a>         on&nbsp;<a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a>    </blockquote></div>

Instagram


<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/BjxlMSWnMJ-/" data-instgrm-version="8">    <div>        <p><a href="https://www.instagram.com/p/BjxlMSWnMJ-/">Imagine putting 864 servers at the bottom of the ocean #ProjectNatick.</a></p>        <p>A post shared by <a href="https://www.instagram.com/microsoft/">  Microsoft</a> (@microsoft) on <time>Apr 22, 2018 at 11:47am PDT</time></p>    </div></blockquote>

Widget d’épingle Pinterest


<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a> 

Widget de tableau Pinterest


<a data-pin-do="embedBoard" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80"     href="https://www.pinterest.com/pinterest/official-news/"></a> 

Widget de profil Pinterest


<a data-pin-do="embedUser" data-pin-board-width="400" data-pin-scale-height="240" data-pin-scale-width="80" href="https://www.pinterest.com/pinterest/"></a> 

Infogramme (réactif)


<script id="infogram_0_df4c17c3-3940-4434-b3a5-b1ef8ac096ef" title="Infogram: 8 years of greatness (infographic)"     src="https://e.infogram.com/js/dist/embed.js?qlT" type="text/javascript"></script>

Infogramme (iframe)


<iframe src="https://e.infogram.com/df4c17c3-3940-4434-b3a5-b1ef8ac096ef?src=embed" title="Infogram: 8 years of greatness (infographic)"     width="700" height="8127" scrolling="no" frameborder="0" style="border:none;" allowfullscreen="allowfullscreen"></iframe>

Spotify


<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Fleurir (div)


<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>

Fleurir (iframe)


<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>

Google Maps


<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d13981.509066247283!2d-81.79698!3d28.827626!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x64c6defc49caa9f0!2sLake-Sumter%20State%20College!5e0!3m2!1sen!2sus!4v1587812382206!5m2!1sen!2sus"     width="400" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

Giphy


<iframe src="https://giphy.com/embed/1WbNcJYD0ruf8nl3OJ" width="480" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>

Reddit


<blockquote class="reddit-card" data-card-created="1596039116">    <a href="https://www.reddit.com/r/microsoft/comments/hg4uiq/microsoft_official_support_thread/">        Microsoft: Official Support Thread</a> from <a href="http://www.reddit.com/r/microsoft">r/microsoft    </a></blockquote><script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

TikTok


<blockquote class="tiktok-embed" cite=https://www.tiktok.com/@testtest/video/microsoft_official_support_thread data-video-id="microsoft_official_support_thread" style="max-width: 605px;min-width: 325px;" >    <section>        <a target="_blank" title="@bronniiieee" href=https://www.tiktok.com/@bronniiieee rel="noopener noreferrer">@billgates</a>        <p>Who is THAT?</p>        <a target="_blank" title="Music" href=https://www.tiktok.com/music/microsoft_official_support_thread rel="noopener noreferrer">Microsoft: Official Support Thread</a>    </section></blockquote>​​​​​​​