Cómo mostrar elementos multimedia en línea e incrustaciones en MSN
Obtenga información sobre cómo mostrar correctamente imágenes, vídeos, presentaciones e incrustaciones sociales en el cuerpo del artículo con HTML y RSS multimedia. En esta guía se describen las etiquetas admitidas, los metadatos y los procedimientos recomendados de formato para garantizar una representación sin problemas en MSN.
En este artículo
Mostrar imágenes con HTML insertado
Mostrar imágenes con RSS multimedia
Incrustaciones de redes sociales
Instrucciones HTML
HTML se puede usar para especificar el campo de cuerpo de un artículo o el campo de descripción de la imagen de diapositiva en una presentación. No está permitido en ningún otro campo. Hay algunas directrices generales que debe tener en cuenta al usar HTML:
- Los Servicios de Ingestion de Microsoft siempre quitarán las etiquetas no permitidas. Es posible que también se quiten el contenido de la etiqueta y los niños.
- Microsoft Ingestion Services puede limpiar HTML de elementos que podrían afectar a experiencias de representación, como estilos en línea.
- Se recomienda que los editores mantengan la jerarquía HTML simple y eviten jerarquías profundamente vinculadas más allá de 10 niveles.
- Evite usar varias etiquetas br> consecutivas<. <se quitarán los saltos de línea br> al final del documento.
- <Se quitará el iframe> usado para cualquier propósito no mencionado explícitamente en este documento.
Etiquetas HTML permitidas
Se permiten estas etiquetas en el cuerpo del artículo:
- Estilo de fuente<b>, <i>, <em>, <strong>
- Tamaño de fuente<sub>, <sup>, <small>
- Títulos<h1>, <h2>, <h3>, <h4>, <h5>
- Vínculos<a> - Los valores href deben usar preferiblemente HTTPS, HTTP y mailto:
- Imágenes<img>
- Tablas<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <subtítulo>, <colgroup>
- Lista<ol>, <ul>, <li>
- Agrupación<span>, <div>, <p>, <br>
- Incrustaciones<blockquote>, <iframe> solo es aceptable para el vídeo y las incrustaciones sociales admitidas.
Nota
Por lo general, los atributos se quitarán de todos los elementos a menos que los usen entidades subyacentes como href en <a> y src en <img>.
Etiquetas HTML restringidas
Las siguientes etiquetas siempre se quitarán del cuerpo de los artículos entrantes y podrían dar lugar a que se rechace el contenido:
- <estilo>
- <script>
- <objeto>
- <param>
- <applet>
- <insertar>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <ilustración>
- <Medio>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>a través de GIPHY</a>
Imágenes
Ubicación de la imagen
Si agrega una imagen al cuerpo HTML del artículo con <etiquetas img> o <figura> , conserva automáticamente su ubicación dentro del cuerpo. De lo contrario, si usa <media:content>, la imagen podría colocarse en una ubicación elegida automáticamente por Ingestion Services. Si una etiqueta tiene una dirección URL "src" que coincide con la dirección URL de un <elemento media:content> , la imagen solo se ingerirá una vez y se localizará donde se coloque la etiqueta img.
Imagen inicial
Puede informar a la ingestión de que se puede usar una imagen determinada como imagen destacada en la tarjeta de promoción agregando class="type:primaryImage" a la <etiqueta img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Mostrar imágenes con HTML insertado
<etiquetas de img>
Puede proporcionar metadatos adicionales al usar la etiqueta img> en el <cuerpo HTML del elemento de fuente. Si se proporcionan metadatos para la misma dirección URL de imagen, tanto en línea como con etiquetas RSS multimedia, <los metadatos media:content> siempre tendrán prioridad.
Puede colocar todos los metadatos de imagen en línea dentro del HTML aprovechando los atributos data-*, como en el ejemplo siguiente:
<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>
<etiquetas de ilustración>
También puede rellenar la <etiqueta img> con parámetros opcionales como el ejemplo anterior.
<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>
Mostrar imágenes con RSS multimedia
La manera recomendada de agregar metadatos de imagen es usar el elemento media:content> de RSS <multimedia para especificar metadatos de imagen. De forma predeterminada, la imagen se colocará en la parte superior del artículo.
<los elementos multimedia:content> no se pueden especificar dentro del cuerpo del artículo. Deben especificarse como secundarios inmediatos del elemento raíz (<elemento> en RSS o <entrada> en 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>
Vídeos
MSN admite configuraciones de Reproductor de First-Party (1PP) y Reproductor de terceros (3PP).
Vídeos 1PP: En este escenario, debe proporcionarse la dirección URL del archivo de vídeo para que Microsoft Ingestion Services descargue y almacene el archivo en los servidores de MSN. Los vídeos 1PP serán representados con MSN Vídeo Player.
Vídeos 3PP: Los vídeos 3PP se reproducen en un reproductor específico del proveedor (por ejemplo, YouTube, DailyMotion, etc.)
Mostrar vídeo con HTML
1PP
Puede usar la etiqueta HTML de <vídeo> para expresar un vídeo en línea.
<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 es el único reproductor 3PP compatible con el <elemento iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Importante
Debido a los cambios recientes en la plataforma del lado de YouTube, MSN no puede moderar actualmente las incrustaciones de YouTube. Como resultado, todos los vídeos de YouTube 3PP enviados a través de feeds o artículo HTML serán rechazados durante la ingestión. Este problema afecta a una pequeña parte del contenido global, pero los partners deben evitar usar incrustaciones de YouTube hasta nuevo aviso. Actualizaremos esta guía cuando se restablezca el soporte técnico.
Mostrar vídeo con RSS multimedia
Para incrustar medios mediante Media RSS, los <media:content> elementos y <media:group> deben colocarse fuera del cuerpo HTML y agregarse como secundarios inmediatos del<item> elemento (RSS) o <entry> (ATOM). Estas etiquetas no se pueden ajustar ni combinar con contenido HTML dentro del cuerpo del artículo (por ejemplo, dentro <content:encoded>de ), o se omitirán durante la ingestión.
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>
Otros
Los reproductores de vídeo 3PP admitidos deben especificarse cuando se incorpore la marca del editor. Para estos reproductores de vídeo 3PP compatibles, debe proporcionar un identificador de vídeo único a través del <elemento guid> para todos los vídeos 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>
Subtítulos en vídeo
Puede usar el <elemento media:subtitle> para proporcionar un archivo de formato de texto temporado externo basado en el formato de texto con hora W3C. Actualmente solo se admite TTML 1.
<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>
Vínculos compatibles
Los archivos de vídeo deben guardarse en un formato aprobado, como un archivo MP4. Files se permiten si proceden de su propio sitio web o están alojados en un servidor como AWS.
Vínculos no admitidos
Los vínculos de Dropbox, los vínculos de YouTube, etc., no son compatibles con las fuentes RSS. Esto se debe a que el vídeo no puede extraer de esos vínculos de forma fácil ni inmediata, ya que están "bloqueados".
Vínculos relacionados
El módulo "más de proveedor" es una oportunidad para que las marcas muestren tres vínculos de contenido en páginas de artículos y galerías, que se vinculan al sitio web de la marca.
Hay dos maneras de decidir qué tres vínculos se muestran en este módulo:
- Rellenar automáticamente los artículos más recientes : Microsoft mostrará vínculos a las historias más recientes que haya ingerido entre las fuentes suministradas por tu marca. Usamos el vínculo canónico de forma predeterminada, pero, si no se proporciona, Microsoft no mostrará este vínculo.
- Proporciona vínculos relacionados con el artículo : consulta a continuación ejemplos sobre cómo hacerlo. Si se selecciona esta opción, debe proporcionar al menos tres vínculos relacionados con cada elemento de contenido de la fuente.
Los vínculos relacionados se pueden agregar como elementos secundarios a elementos de fuente de nivel raíz (artículos y galerías). Por lo general, los editores deben proporcionar al menos 3 vínculos para que aparezcan en la sección "relacionada" de msn.
Todos los vínculos relacionados y en línea deben usar preferiblemente el esquema HTTPS.
Para especificar en Atom, los editores pueden utilizar simplemente el elemento. También necesitan usar el mismo elemento en RSS después de declarar el espacio de nombres Atom. Además, dado que es necesaria una imagen en miniatura, puede combinarla con <elementos multimedia:> , como se muestra en este ejemplo:
<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>
Presentaciones
Puede agregar una presentación en línea a una ubicación específica dentro del html del cuerpo del artículo utilizando una construcción <especial div class="Gallery"> como contenedor de una serie de elementos de <ilustración> .
<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>
Mostrar presentaciones con RSS multimedia
Para agregar una presentación en línea, use el <elemento media:group> como elemento secundario del elemento> con el <que desea insertar la presentación.
Los Servicios de Ingestion deciden el lugar de presentaciones RSS en línea dentro del artículo. Si necesita colocar las presentaciones en una ubicación específica, use HTML en su lugar.
<!-- 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>
Incrustaciones de redes sociales
Se pueden insertar las siguientes incrustaciones sociales dentro de un cuerpo HTML del artículo:
- X
- Infogram
- Spotify
- Florecer
- Google Maps
- Giphy
- TikTok
Puede usar el código para insertar estándar recomendado por cada proveedor social para asegurarse de que la inserción se conserva en el artículo.
Todas las direcciones URL que apuntan a orígenes de inserción social deben ser https estrictamente o de lo contrario se rechazarán.
Estos son algunos ejemplos de incrustaciones:
X
<blockquote class="twitter-tweet" align="center" width="350"> <p>We’re more optimistic than ever. The future will surprise the pessimists </p>— 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 <a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a> </blockquote></div>
<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 de pin de Pinterest
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widget de panel de 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 perfil de 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>
Infogram (responsive)
<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>
Infograma (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>
Flor (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Florecimiento (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>
<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>