Como apresentar suportes de dados inline e incorporações no MSN
Saiba como apresentar corretamente imagens, vídeos, apresentações de diapositivos e incorporações sociais no corpo do seu artigo através de HTML e RSS multimédia. Este guia descreve as melhores práticas de formatação, metadados e etiquetas suportadas para garantir uma composição suave no MSN.
Neste artigo
Apresentar imagens com HTML inline
Apresentar imagens com RSS multimédia
Incorporações de redes sociais
Diretrizes HTML
O HTML pode ser utilizado para especificar o campo do corpo de um artigo ou o campo de descrição da imagem do diapositivo numa apresentação de diapositivos. Não é permitido em nenhum outro campo. Existem poucas diretrizes gerais a ter em conta ao utilizar HTML:
- Os Serviços de Ingestão da Microsoft removerão sempre as etiquetas não permitidas. O conteúdo da etiqueta e os subordinados também podem ser removidos.
- Os Serviços de Ingestão da Microsoft podem limpar HTML de elementos que podem afetar as experiências de composição, como estilos inline.
- Recomenda-se que os publicadores mantenham a hierarquia HTML simples e evitem hierarquias profundamente ligadas para além dos 10 níveis.
- Evite utilizar várias etiquetas br> consecutivas<. <as quebras de linha br> no final do documento serão removidas.
- <o iframe> utilizado para qualquer finalidade não explicitamente mencionada neste documento será removido.
Etiquetas HTML permitidas
Estas etiquetas são permitidas no corpo do artigo:
- Estilo do tipo de letra<b>, <i>, <em>, <strong>
- Tamanho do tipo de letra<sub>, <sup>, <pequeno>
- Cabeçalhos<h1>, <h2>, <h3>, <h4>, <h5>
- Ligações<a> - os valores href devem, preferencialmente, utilizar HTTPS, HTTP e mailto:
- Imagens<img>
- Tabelas<tabela>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <legenda>, <colgroup>
- Listagem<ol>, <ul>, <li>
- < Agrupamentospan>, <div>, <p>, <br>
- Incorporações<blockquote>, <iframe> apenas aceitável para incorporações sociais suportadas e vídeo.
Nota
Geralmente, os atributos serão removidos de todos os elementos, a menos que sejam utilizados por funcionalidades subjacentes, como href num <> e src em <img>.
Etiquetas HTML restritas
As etiquetas seguintes serão sempre removidas do corpo dos artigos recebidos e poderão resultar na rejeição do conteúdo:
- <estilo>
- <script>
- <objeto>
- <parâmetro>
- <applet>
- <incorporar>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:url de conteúdo='http://test.com/test.wmv'>
- <figura>
- <multimédia>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>via GIPHY</a>
Imagens
Colocação de imagens
Se adicionar uma imagem ao corpo HTML do artigo com <img> ou <etiquetas de figura> , esta preserva automaticamente a sua localização no corpo. Caso contrário, se utilizar <multimédia:conteúdo>, a sua imagem poderá ser colocada numa localização escolhida automaticamente pelos Serviços de Ingestão. Se uma etiqueta tiver um URL "src" que corresponda ao URL de um <elemento media:content> , a imagem será ingerida apenas uma vez e estará localizada onde a etiqueta img é colocada.
Imagem à esquerda
Pode informar a ingestão de que uma determinada imagem pode ser utilizada como uma imagem em destaque no cartão promocional ao adicionar class="type:primaryImage" à <etiqueta img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Apresentar imagens com HTML inline
<img> tags
Pode fornecer metadados adicionais quando utiliza a <etiqueta img> no corpo HTML do item de feed. Se forem fornecidos metadados para o mesmo URL de imagem inline e utilizar etiquetas RSS multimédia, <os metadados media:content> terão sempre precedência.
Pode colocar todos os metadados de imagem inline no HTML ao tirar partido dos atributos data-*, tal como no exemplo seguinte:
<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 figura>
Também pode preencher a <etiqueta img> com parâmetros opcionais como o exemplo 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>
Apresentar imagens com RSS multimédia
A forma recomendada de adicionar metadados de imagem é utilizar o elemento Multimédia RSS <media:content> para especificar metadados de imagem. Por predefinição, a imagem será colocada na parte superior do artigo.
<multimédia: não é possível especificar elementos de conteúdo> dentro do corpo do artigo. Têm de ser especificados como subordinados imediatos do elemento de item de raiz (<item> no RSS ou <entrada> no Átomo).
<!-- 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
O MSN suporta configurações do Leitor de First-Party (1PP) e do Leitor de Terceiros (3PP).
Vídeos 1PP: Neste cenário, o URL do ficheiro de vídeo tem de ser fornecido para que os Serviços de Ingestão da Microsoft transfiram e armazenem o ficheiro nos servidores MSN. Os vídeos 1PP serão compostos com Vídeo MSN Player.
Vídeos 3PP: Os vídeos 3PP são reproduzidos num leitor específico do fornecedor (por exemplo, YouTube, DailyMotion, etc.)
Apresentar vídeo com HTML
1PP
Pode utilizar a etiqueta HTML de <vídeo> para expressar um vídeo 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
O YouTube é o único jogador 3PP que é suportado com o <elemento iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Importante
Devido às recentes alterações da plataforma do lado do YouTube, o MSN não pode atualmente moderar as incorporações do YouTube. Como resultado, todos os vídeos 3PP do YouTube submetidos através de feeds ou HTML do artigo serão rejeitados durante a ingestão. Este problema afeta uma pequena parte do conteúdo global, mas os parceiros devem evitar a utilização de incorporações do YouTube até novo aviso. Iremos atualizar esta documentação de orientação assim que o suporte for restaurado.
Apresentar vídeo com o RSS multimédia
Para incorporar suportes de dados com O RSS de Multimédia, os <media:content> elementos e <media:group> têm de ser colocados fora do corpo HTML e adicionados como subordinados imediatos do<item> elemento (RSS) ou <entry> (ATOM). Estas etiquetas não podem ser encapsuladas ou combinadas com conteúdo HTML dentro do corpo do artigo (por exemplo, dentro <content:encoded>de ) ou serão ignoradas durante a ingestão.
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>
Outros
Os leitores de vídeo 3PP suportados têm de ser especificados quando a marca do fabricante está integrada. Para estes leitores de vídeo 3PP suportados, tem de fornecer um identificador de vídeo exclusivo através do <elemento guid> para todos os 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>
Legendagem de áudio em vídeo
Pode utilizar o <elemento media:subtitle> para fornecer um ficheiro de formato texto temporizado externo baseado no formato texto temporizado W3C. Apenas o TTML 1 é atualmente suportado.
<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>
Ligações suportadas
Os ficheiros de vídeo têm de ser guardados num formato aprovado, como um ficheiro MP4. Files são permitidos se forem provenientes do seu próprio site ou alojados num servidor como o AWS.
Ligações não suportadas
As ligações do Dropbox, as ligações do YouTube, etc., não são suportadas em feeds RSS. Isto deve-se ao facto de o vídeo não poder solicitar facilmente nem imediatamente essas ligações, uma vez que estão 'fechadas'.
Ligações relacionadas
O módulo "mais do fornecedor" é uma oportunidade para as marcas exibirem três ligações de conteúdo em páginas de artigos e galerias, que ligam ao site da própria marca.
Existem duas formas de decidir quais são as três ligações apresentadas neste módulo:
- Preencher automaticamente os artigos mais recentes – a Microsoft irá apresentar ligações para as histórias mais recentes que ingeriu entre os feeds fornecidos pela sua marca. Utilizamos a ligação canónica por predefinição, mas se não for fornecida, a Microsoft não apresentará esta ligação.
- Forneça ligações relacionadas com o artigo – veja abaixo exemplos sobre como fazê-lo. Se esta opção estiver selecionada, tem de fornecer, pelo menos, três ligações relacionadas com cada item de conteúdo no feed.
As ligações relacionadas podem ser adicionadas como elementos subordinados aos itens de feed ao nível da raiz (artigos e Galerias). Geralmente, os publicadores têm de fornecer pelo menos 3 ligações para que apareçam na secção "relacionado" no msn.
Todas as ligações relacionadas e inline devem, de preferência, estar a utilizar o esquema HTTPS.
Para especificar no Atom, os publicadores podem simplesmente utilizar o elemento . Também precisam de utilizar o mesmo elemento no RSS depois de declarar o espaço de nomes Atom. Além disso, como é necessária uma imagem em miniatura, pode combinar com <elementos multimédia> , conforme mostrado neste exemplo:
<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>
Apresentações de diapositivos
Pode adicionar uma Apresentação de Diapositivos inline a uma localização específica no html do corpo do artigo ao utilizar uma construção <especial div class="Gallery"> como um contentor de uma série de elementos de <figura> .
<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>
Apresentar apresentações de diapositivos com RSS multimédia
Para adicionar uma Apresentação de Diapositivos inline, utilize o <elemento media:group> como elemento subordinado do item> com o <qual pretende incorporar Apresentação de Diapositivos.
As Apresentações de Diapositivos RSS de Multimédia Inline no artigo são decididas pelos Serviços de Ingestão. Se precisar de colocar as Apresentações de Diapositivos numa localização específica, utilize 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>
Incorporações de redes sociais
As seguintes incorporações sociais podem ser inseridas num corpo HTML do artigo:
- X
- Infogram
- Spotify
- Florescer
- Google Maps
- Giphy
- TikTok
Pode utilizar o código de incorporação padrão recomendado por cada fornecedor de redes sociais para garantir que a incorporação é preservada no artigo.
Todos os URLs que apontam para origens de incorporação social têm de ser estritamente https ou, de outra forma, serão rejeitados.
Eis alguns exemplos de incorporações:
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 pin do Pinterest
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widget de quadro do 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 do 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>
Infograma (reativo)
<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>
Florescer (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Florescer (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>