Scopri come visualizzare correttamente immagini, video, presentazioni e incorporamenti social nel corpo dell'articolo utilizzando HTML e Media RSS. Questa guida illustra i tag supportati, i metadati e le procedure consigliate per la formattazione per garantire un rendering uniforme in MSN.
Contenuto dell'articolo
Visualizzare immagini con HTML inline
Visualizza immagini con file multimediali RSS
Linee guida HTML
Il codice HTML può essere usato per specificare il campo del corpo di un articolo o il campo della 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 utilizza HTML:
- I servizi di inserimento Microsoft rimuoveranno sempre i tag non consentiti. Anche il contenuto del tag e gli elementi figlio potrebbero essere rimossi.
- I servizi di inserimento Microsoft possono pulire il codice HTML da elementi che potrebbero influire sulle esperienze di rendering, ad esempio gli stili incorporati.
- Si raccomanda agli editori di mantenere semplice la gerarchia HTML ed evitare 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.
- <Gli iframe> utilizzati per qualsiasi scopo non esplicitamente menzionato in questo documento verranno rimossi.
Tag HTML consentiti
Questi tag sono consentiti all'interno del corpo dell'articolo:
- Stile< carattereb>, <i>, <em>, <strong>
- Dimensioni del carattere<Sub>, <SUP>, <Small>
- Titoli<H1>, <H2>, <H3>, <H4>, <H5>
- Collegamenti<a> - I valori href devono usare preferibilmente 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>
- Incorporamenti<Blocco delle citazioni>, <iframe> accettabile solo per i video e incorporamenti social supportati.
Nota
Generalmente, gli attributi verranno rimossi da tutti gli elementi a meno che non vengano utilizzati da funzionalità sottostanti come href in <a> e src in <img>.
Tag HTML con restrizioni
I seguenti tag verranno sempre rimossi dal corpo degli articoli in arrivo e potrebbero comportare il rifiuto dei contenuti:
- <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>
- <Elementi multimediali>
- < ><div a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>via GIPHY/<a>
Immagini
Posizionamento immagine
Se aggiungi un'immagine al corpo HTML dell'articolo usando <i tag img> o <figure> , mantiene automaticamente la sua posizione all'interno del corpo. In caso contrario, se si utilizza <media:content>, l'immagine potrebbe essere collocata 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 verrà posizionata nel punto in cui è posizionato il tag img.
Immagine principale
Puoi informare ingestion che una particolare immagine può essere utilizzata come immagine in vetrina nella scheda promozionale aggiungendo class="type:primaryImage" al <tag img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Visualizzare immagini con HTML inline
<tag img>
È possibile fornire metadati aggiuntivi quando si utilizza il <tag img> all'interno del corpo HTML dell'elemento del feed. Se i metadati vengono forniti per lo stesso URL immagine sia in linea che usando i tag RSS multimediali, <i metadati media:content> avranno sempre la precedenza.
Puoi inserire tutti i metadati dell'immagine in linea all'interno del codice HTML sfruttando data-*attributes 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>
<tag delle figure>
Puoi anche popolare il <tag img> con parametri opzionali come nell'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>
Visualizza immagini con file multimediali RSS
Il modo consigliato per aggiungere i metadati delle immagini consiste nell'usare l'elemento media RSS <media:content> per specificare i metadati dell'immagine. Per impostazione predefinita, l'immagine verrà posizionata nella parte superiore dell'articolo.
<media:content> non può essere specificato all'interno del corpo dell'articolo. Devono essere specificati come figli immediati dell'elemento radice item (<item> in RSS o <entry> 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 in 1PP: In questo scenario, l'URL del file video deve essere fornito in modo che i servizi di inserimento Microsoft scarichino e memorizzino il file nei server MSN. Il rendering dei video 1PP verrà eseguito usando MSN Video Player.
Video 3PP: I video 3PP vengono riprodotti su un lettore specifico del provider (ad es. YouTube, DailyMotion, ecc.)
Visualizza video con HTML
1PP
È possibile utilizzare 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 utilizzando l'elemento <iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Importante
A causa dei recenti cambiamenti della piattaforma da parte di YouTube, MSN non può attualmente moderare gli incorporamenti di YouTube. Di conseguenza, tutti i video 3PP di YouTube inviati tramite feed o HTML dell'articolo verranno rifiutati durante l'inserimento. Questo problema riguarda una piccola parte dei contenuti globali, ma i partner devono evitare di utilizzare gli incorporamenti di YouTube fino a nuovo avviso. Queste linee guida verranno aggiornate una volta ripristinato il supporto.
Visualizzazione di video con file multimediali RSS
Per incorporare i media utilizzando Media RSS, gli elementi and <media:group> devono essere posizionati all'esterno<media:content> del corpo HTML e aggiunti come figli immediati dell'elemento<item> (RSS) o <entry> (ATOM). Questi tag non possono essere racchiusi o combinati con contenuti HTML all'interno del corpo dell'articolo (ad esempio, all'interno <content:encoded>di ), altrimenti 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 nel video
È possibile utilizzare l'elemento <media:subtitle> per fornire un file esterno in formato Timed Text basato sul formato W3C Timed Text. Attualmente è 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. I Files sono consentiti se provengono dal tuo sito Web o se sono ospitati su un server come AWS.
Collegamenti non supportati
I collegamenti a Dropbox, YouTube e così via non sono supportati nei feed RSS. Questo perché il video non può facilmente o immediatamente estrarre da quei collegamenti in quanto sono "gated".
Collegamenti correlati
Il modulo "altro dal provider" è un'opportunità per i marchi di visualizzare tre collegamenti ai contenuti nelle pagine degli articoli e delle gallerie, che si collegano al sito Web del marchio.
Esistono due modi per decidere quali tre collegamenti visualizzare in questo modulo:
- Popola automaticamente gli articoli più recenti : Microsoft visualizzerà i collegamenti alle storie più recenti che ha inserito tra i feed forniti dal tuo marchio. Viene usato il collegamento canonico per impostazione predefinita, ma se non specificato, Microsoft non lo visualizzerà.
- Fornisci collegamenti correlati con l'articolo – vedi sotto per esempi su come farlo. Se questa opzione è selezionata, è necessario fornire almeno tre collegamenti correlati con ogni elemento di contenuto nel feed.
I collegamenti correlati possono essere aggiunti come elementi figlio agli elementi del feed di livello radice (articoli e gallerie). Generalmente, gli editori devono fornire almeno 3 collegamenti affinché appaiano nella sezione "correlati" 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 anche usare lo stesso elemento in RSS dopo aver dichiarato il namespace Atom. Inoltre, poiché è necessaria un'immagine di anteprima, è possibile combinare con <gli elementi media:> , 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>
Presentazioni
Puoi aggiungere una presentazione in linea 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 file multimediali RSS
Per aggiungere una presentazione in linea, usa l'elemento <media:group> come elemento secondario dell'elemento> con cui desideri incorporare la <presentazione.
La posizione delle presentazioni RSS dei media in linea all'interno dell'articolo è decisa dai servizi di acquisizione. Se devi posizionare le presentazioni in una posizione specifica, usa 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>
Integrazione dei social media
I seguenti incorporamenti sociali possono essere inseriti all'interno del corpo HTML di un articolo:
- X
- Infogram
- Spotify
- Fiorire
- Google Maps
- Giphy
- TikTok
È possibile utilizzare il codice di incorporamento standard consigliato da ciascun provider di servizi social per assicurarsi che l'incorporamento venga mantenuto nell'articolo.
Tutti gli URL che puntano a origini di incorporamento social devono essere rigorosamente https, altrimenti verranno rifiutati.
Ecco alcuni esempi di incorporamento:
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 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 del 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>
Flourish (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Flourish (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>