Come visualizzare elementi multimediali incorporati e incorporamenti in MSN

Informazioni su come visualizzare correttamente immagini, video, presentazioni e incorporamenti social all'interno del corpo dell'articolo usando HTML e RSS Media. Questa guida illustra i tag, i metadati e le procedure consigliate di formattazione supportati per garantire un rendering uniforme in MSN.

Contenuto dell'articolo

Linee guida HTML

Tag HTML consentiti

Tag HTML con restrizioni

Immagini

Visualizzare immagini con HTML in linea

Visualizzare immagini con RSS multimediale

Video

Collegamenti correlati

Slideshow

Incorporamenti di social media

Linee guida HTML

Il codice HTML può essere usato per specificare il campo corpo di un articolo o il campo di descrizione dell'immagine della diapositiva in una presentazione. Non è consentito in nessun altro campo. Ci sono alcune linee guida generali da tenere a mente quando si usa HTML:

• Microsoft Ingestion Services rimuoverà sempre i tag non consentiti. Anche il contenuto del tag e i bambini potrebbero essere rimossi.
• Microsoft Ingestion Services può pulire il codice HTML dagli elementi che potrebbero influire su esperienze di rendering come gli stili in linea.
• È consigliabile che gli editori mantengano la gerarchia HTML semplice ed evitino gerarchie profondamente collegate oltre i 10 livelli.
• Evita di usare più tag br> consecutivi<. <le interruzioni di riga br> alla fine del documento verranno rimosse.
• <l'iframe> utilizzato per qualsiasi scopo non esplicitamente indicato in questo documento verrà rimosso.

Tag HTML consentiti

Questi tag sono consentiti all'interno del corpo dell'articolo:

• Stile< carattereb>, <i>, <em>, <strong>
• Dimensioni del carattere<sub>, <sup>, <piccolo>
• Intestazioni<h1>, <h2>, <h3>, <h4>, <h5>
• Link<a> - i valori href devono preferibilmente utilizzare HTTPS, HTTP e mailto:
• Immagini<Img>
• Tabelle<tabella>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <didascalia>, <colgroup>
• Elenco<ol>, <ul>, <li>
• Raggruppamento<span>, <div>, <p>, <br>
• Incorpora<blockquote>, <iframe> accettabile solo per video e social embed supportati.

Tag HTML con restrizioni

I tag seguenti verranno sempre rimossi dal corpo degli articoli in arrivo e il contenuto potrebbe essere rifiutato:

• <stile>
• <script>
• <oggetto>
• <Param>
• <Applet>
• <incorporare>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <Figura>
• <Media>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...tramite> GIPHY</a>

Immagini

Posizionamento dell'immagine

Se si aggiunge un'immagine al corpo HTML dell'articolo usando <img> o <tag figura> , mantiene automaticamente la posizione all'interno del corpo. In caso contrario, se si usano <elementi multimediali:contenuto>, l'immagine potrebbe essere posizionata in una posizione scelta automaticamente da Ingestion Services. Se un tag ha un URL "src" che corrisponde all'URL di un <elemento media:content> , l'immagine verrà inserita una sola volta e si troverà dove è inserito il tag img.

Immagine iniziale

È possibile informare l'ingestion che una particolare immagine può essere utilizzata come immagine in primo piano nella scheda promozionale aggiungendo class="type:primaryImage" al <tag img> .

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

Visualizzare immagini con HTML in linea

<tag img>

È possibile fornire metadati aggiuntivi quando si utilizza il <tag img> all'interno del corpo HTML dell'elemento del feed. Se vengono forniti metadati per lo stesso URL dell'immagine sia all'interno del testo che usando tag RSS multimediali, <i metadati media:content> avranno sempre la precedenza.

È possibile inserire tutti i metadati dell'immagine all'interno del codice HTML sfruttando gli attributi data-*come nell'esempio seguente:

<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>

<figure> tag

È anche possibile popolare il <tag img> con parametri facoltativi come l'esempio precedente.

<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>

Visualizzare immagini con RSS multimediale

Il modo consigliato per aggiungere metadati dell'immagine consiste nell'usare l'elemento media:content> RSS <multimediale per specificare i metadati dell'immagine. Per impostazione predefinita, l'immagine verrà posizionata nella parte superiore dell'articolo.

<non è possibile specificare elementi media:content> all'interno del corpo dell'articolo. Devono essere specificati come figli immediati dell'elemento radice (<elemento> in RSS o <voce> in 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>

Video

MSN supporta le configurazioni First-Party Player (1PP) e Third-Party Player (3PP).

Video 1PP: In questo scenario, l'URL del file video deve essere fornito in modo che Microsoft Ingestion Services scarichi e archivi il file nei server MSN. Il rendering dei video 1PP verrà eseguito con MSN Video Player.

Video 3PP: I video 3PP vengono riprodotti su un giocatore specifico del provider (ad esempio YouTube, DailyMotion e così via)

Visualizzare video con HTML

1PP

È possibile usare il tag HTML video <> per esprimere un video in linea.

<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 è l'unico lettore 3PP supportato usando l'elemento <iframe> .

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

Visualizzazione di video con RSS multimediale

Per incorporare elementi multimediali con RSS multimediale, gli <media:content> elementi e <media:group> devono essere inseriti all'esterno del corpo HTML e aggiunti come elementi figlio immediati dell'elemento<item> (RSS) o <entry> (ATOM). Questi tag non possono essere incorporati o combinati con contenuto HTML all'interno del corpo dell'articolo (ad esempio, all'interno <content:encoded>), oppure verranno ignorati durante l'inserimento.

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>

Altro

I lettori video 3PP supportati devono essere specificati al momento dell'onboarding del marchio dell'editore. Per questi lettori video 3PP supportati, è necessario fornire un identificatore video univoco tramite l'elemento <guid> per tutti i video 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>

Sottotitoli codificati nel video

È possibile usare l'elemento media:subtitle per fornire un file in formato Timed Text esterno basato sul formato W3C Timed Text.You may use the <media:subtitle> element to provide an external Timed Text format file based on W3C Timed Text format. Al momento è supportato solo 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>

Collegamenti supportati

I file video devono essere salvati in un formato approvato, ad esempio un file MP4. Files sono consentiti se provengono dal proprio sito Web o sono ospitati su un server come AWS.

Collegamenti non supportati

I collegamenti di Dropbox, YouTube e così via, non sono supportati nei feed RSS. Questo perché il video non può facilmente né immediatamente tirare da quei collegamenti come sono 'gated'.

Collegamenti correlati

Il modulo "more from provider" è un'opportunità per i brand di visualizzare tre link di contenuto nelle pagine di articoli e galleria, che rimandano al proprio sito web.

Esistono due modi per decidere quali sono i tre collegamenti visualizzati in questo modulo:

1. Popola automaticamente gli articoli più recenti : Microsoft visualizzerà collegamenti alle storie più recenti che ha ingerito tra i feed forniti dal tuo marchio. Usiamo il collegamento canonico per impostazione predefinita, ma se non viene fornito, Microsoft non visualizzerà questo collegamento.
2. Collegamenti correlati con l'articolo : vedere di seguito per esempi su come eseguire questa operazione. Se questa opzione è selezionata, è necessario fornire almeno tre collegamenti correlati a ogni elemento di contenuto nel feed.

I collegamenti correlati possono essere aggiunti come elementi figlio agli elementi del feed di livello radice (articoli e raccolte). In genere, gli editori devono fornire almeno 3 collegamenti affinché vengano visualizzati nella sezione "correlata" in msn.

Tutti i collegamenti correlati e in linea devono preferibilmente utilizzare lo schema HTTPS.

Per specificare in Atom, gli editori possono semplicemente usare l'elemento. Devono inoltre usare lo stesso elemento in RSS dopo aver dichiarato lo spazio dei nomi Atom. Inoltre, poiché è necessaria un'immagine di anteprima, è possibile combinare elementi multimediali <:> come illustrato in questo esempio:

<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>

Slideshow

È possibile aggiungere una presentazione incorporata in una posizione specifica all'interno del corpo HTML dell'articolo utilizzando uno speciale costrutto <div class="Gallery"> come contenitore di una serie di <elementi 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>

Visualizzazione di presentazioni con RSS multimediale

Per aggiungere una presentazione incorporata, usare l'elemento <media:group> come elemento figlio dell'elemento><con cui si vuole incorporare la presentazione.

Inline Media RSS Slideshows luogo all'interno dell'articolo è deciso da Ingestion Services. Se è necessario posizionare le presentazioni in una posizione specifica, usare invece 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>

Incorporamenti di social media

I social embed seguenti possono essere inseriti all'interno di un corpo HTML dell'articolo:

• X
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• Fiorire
• Google Maps
• Giphy
• Reddit
• TikTok

È possibile usare il codice di incorporamento standard consigliato da ogni provider di social network per assicurarsi che l'incorporamento venga mantenuto nell'articolo.

Tutti gli URL che puntano alle origini di incorporamento social devono essere rigorosamente https o altrimenti verranno rifiutati.

Ecco alcuni incorporamenti di esempio:

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 Pin di Pinterest

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

Widget bacheca di 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 profilo 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>  

Infogramma (reattivo)

<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>

Infogramma (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>

Fiorire (div)

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

Fiorire (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>​​​​​​​