Zobrazenie vnorených médií a vkladaní na MSN

Naučte sa správne zobrazovať obrázky, videá, prezentácie a sociálne vkladanie v tele článku pomocou html a mediálnej technológie RSS. Táto príručka popisuje podporované značky, metaúdaje a najvhodnejšie postupy formátovania na zabezpečenie plynulého vykresľovania v sieti MSN.

Obsah tohto článku

Pokyny pre HTML

Povolené značky HTML

Obmedzené značky HTML

Obrázky

Zobrazenie obrázkov s vloženým HTML kódom

Zobrazenie obrázkov pomocou technológie RSS médií

Videá

Súvisiace prepojenia

Prezentácie

Vloženie sociálnych médií

Pokyny pre HTML

Html možno použiť na určenie základného poľa článku alebo poľa popisu obrázka snímky v prezentácii. Nie je povolené v žiadnom inom poli. Pri používaní html kódu je potrebné pamätať na niekoľko všeobecných pokynov:

• Služba Microsoft Ingestion Services vždy odstráni nepovolené značky. Obsah značky a podriadené položky sa tiež môžu odstrániť.
• Služba Microsoft Ingestion Services môže vyčistiť HTML od prvkov, ktoré by mohli ovplyvniť možnosti vykresľovania, ako sú napríklad vnorené štýly.
• Odporúčame, aby vydavatelia zachovali hierarchiu HTML jednoduchú a vyhýbali sa hlboko prepojeným hierarchiám nad rámec 10 úrovní.
• Nepoužívajte viacero po sebe idúcich <značiek br> . <Zlomy riadkov br> na konci dokumentu sa odstránia.
• <iframe> použitý na akýkoľvek účel, ktorý nie je výslovne uvedený v tomto dokumente, sa odstráni.

Povolené značky HTML

Tieto značky sú povolené v tele článku:

• Štýl< písmab>, <i>, <em>, <strong>
• Veľkosť< písmasub>, <sup>, <small>
• Nadpisy<h1>, <h2>, <h3>, <h4>, <h5>
• Odkazy<a> – hodnoty href by mali najlepšie používať protokoly HTTPS, HTTP a mailto:
• Obrázky<Img>
• Tabuľky<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
• Zoznam<ol>, <ul>, <li>
• Zoskupenie<span>, <div>, <p>, <br>
• Vloží<blockquote>, <iframe> acceptable only for video and supported social embeds.

Obmedzené značky HTML

Nasledujúce značky budú vždy odstránené zo základného textu prichádzajúcich článkov a môžu viesť k zamietnutiu obsahu:

• <štýl>
• <Skript>
• <objekt>
• <Param>
• <Applet>
• <vložiť>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <Obrázok>
• <médiá>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>cez GIPHY</a>

Obrázky

Umiestnenie obrázka

Ak pridáte obrázok do html tela článku pomocou <img> alebo <postava> značky, automaticky zachováva jeho umiestnenie v tele. V opačnom prípade, ak použijete <médiá:obsah>, váš obrázok sa môže umiestniť na miesto automaticky vybraté službami Ingestion Services. Ak má značka URL adresu "src", ktorá zodpovedá URL adrese <prvku media:content> , obrázok sa požití iba raz a bude umiestnený tam, kde je umiestnená značka img.

Úvodný obrázok

Môžete informovať príjem, že konkrétny obrázok môže byť použitý ako odporúčaný obrázok v promo karte pridaním triedy = "type:primaryImage" na <img> tag.

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

Zobrazenie obrázkov s vloženým HTML kódom

<img> značky

Môžete zadať ďalšie metaúdaje, keď použijete <img> tag v HTML telo krmivo položky. Ak sa metaúdaje poskytujú pre rovnakú URL adresu obrázka vnorenú aj pomocou značiek media RSS, <metaúdaje media:content> budú mať vždy prednosť.

Všetky metaúdaje obrázka môžete umiestniť vnorené do html formátu využitím atribútov data-*ako v nasledujúcom príklade:

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

<značky obrázka>

Značku img> môžete vyplniť <aj voliteľnými parametrami ako predchádzajúci príklad.

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

Zobrazenie obrázkov pomocou technológie RSS médií

Odporúčaným spôsobom pridania metaúdajov obrázka je použitie mediálneho informačného kanála RSS <: prvok obsahu> na zadanie metaúdajov obrázka. Obrázok sa predvolene umiestni do hornej časti článku.

<media:prvky obsahu> nie je možné zadať v tele článku. Musia sa zadať ako okamžité podriadené položky koreňového prvku položky (<položka> v rss alebo <položke> v Atome).

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

Videá

MsN podporuje konfigurácie prehrávača First-Party Player (1PP) a prehrávača tretích strán (3PP).

1PP videá: V tomto scenári musí byť zadaná URL adresa videosúboru, aby služba Microsoft Ingestion Services stiahla a ukladala súbor na serveroch MSN. 1PP videá sa vykreslia pomocou prehrávača MSN Video.

3PP videá: 3PP videá sa prehrávajú v prehrávači špecifickom pre konkrétneho poskytovateľa (napr. YouTube, DailyMotion atď.)

Zobrazenie videa s kódom HTML

1 PP

Značku HTML videa> môžete použiť <na vyjadrenie vnoreného videa.

<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 je jediný 3PP prehrávač, ktorý je podporovaný pomocou prvku <iframe> .

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

Zobrazenie videa pomocou technológie RSS médií

Ak chcete vložiť médiá pomocou technológie Media RSS, <media:content> prvky a <media:group> prvky musia byť umiestnené mimo tela HTML a musia sa pridať ako okamžité podriadené položky prvku<item> (RSS) alebo <entry> (ATOM). Tieto značky nie je možné zabaliť ani kombinovať s obsahom HTML v tele článku (napr. v rámci <content:encoded>) alebo sa počas požitia ignorujú.

1 PP

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

Iné

Podporované prehrávače videa 3PP musia byť zadané, keď je zapnutá značka vydavateľa. Pre tieto podporované 3PP video prehrávače, musíte poskytnúť jedinečný identifikátor videa prostredníctvom <guid> prvok pre všetky 3PP videá.

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

Skryté titulky vo videu

Prvok media:subtitle> môžete použiť <na poskytnutie externého súboru vo formáte timed text na základe formátu W3C Timed Text. Momentálne je podporovaná iba 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>

Podporované prepojenia

Videosúbory je potrebné uložiť v schválenom formáte, napríklad vo formáte MP4. Files sú povolené, ak pochádzajú z vašej vlastnej webovej lokality alebo sú hosťované na serveri, ako je napríklad AWS.

Nepodporované prepojenia

Prepojenia Dropboxu, prepojenia na YouTube atď., nie sú podporované v informačných kanáloch RSS. Je to preto, že video nemôže ľahko ani okamžite vytiahnuť z týchto odkazov, pretože sú 'bránou'.

Súvisiace prepojenia

Modul "viac od poskytovateľa" je príležitosťou pre značky zobraziť tri prepojenia na obsah na stránkach článku a galérie, ktoré odkazujú na vlastnú webovú lokalitu značky.

Existujú dva spôsoby, ako sa rozhodnúť, ktoré tri prepojenia sa zobrazia v tomto module:

1. Automaticky vyplniť najnovšie články – spoločnosť Microsoft zobrazí prepojenia na najnovšie príbehy, ktoré požití medzi informačnými kanálmi dodanými od vašej značky. Predvolene používame kanonické prepojenie, ale ak nie je poskytnuté, spoločnosť Microsoft toto prepojenie nezobrazí.
2. Prepojenia súvisiace s poskytovaním s článkom – príklady, ako na to, nájdete nižšie. Ak je vybratá táto možnosť, musíte zadať aspoň tri súvisiace prepojenia s každou položkou obsahu v informačnom kanáli.

Súvisiace prepojenia možno pridať ako podriadené prvky do položiek informačného kanála koreňovej úrovne (články a galérie). Vo všeobecnosti platí, že vydavatelia musia poskytnúť aspoň 3 prepojenia, aby sa zobrazili v časti Súvisiace v msn.

Všetky súvisiace a vnorené prepojenia by mali najlepšie používať schému HTTPS.

Ak chcete zadať atóm, vydavatelia môžu jednoducho použiť prvok. Po deklarovaní priestoru názvov Atom musia v kanáli RSS použiť rovnaký prvok. Keďže sa vyžaduje miniatúra, môžete skombinovať s <médiami:> prvkami, ako je to znázornené v tomto príklade:

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

Prezentácie

Vnorenú prezentáciu môžete pridať na konkrétne miesto v tele HTML článku pomocou špeciálnej konštruktu <div class="Gallery"> ako kontajnera radu <prvkov obrázka> .

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

Zobrazenie prezentácií pomocou technológie RSS médií

Ak chcete pridať vnorenú prezentáciu, použite <prvok media:group> ako podriadený <prvok položky> , s ktorú chcete vložiť prezentáciu.

O mieste vnorených mediálnych prezentácií RSS v rámci článku rozhoduje služba Ingestion Services. Ak potrebujete umiestniť prezentácie na konkrétne miesto, použite namiesto toho 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>

Vloženie sociálnych médií

Do textu HTML článku možno vložiť nasledujúce sociálne vloženia:

• X
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• Dariť
• Mapy Google
• Giphy
• Reddit
• TikTok

Na zabezpečenie zachovania vkladacieho kódu v článku môžete použiť štandardný vkladací kód odporúčaný jednotlivými poskytovateľmi sociálnych služieb.

Všetky URL adresy smerujúce na zdroje sociálneho vkladania musia byť striktne https, inak budú odmietnuté.

Tu je niekoľko príkladov vkladaní:

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>

Miniaplikácia pin na Pintereste

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

Miniaplikácia panela Pinterestu

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

Miniaplikácia profilu Pinterestu

<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 (responzívny)

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

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

Prekvitať (div)

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

Prekvitať (iframe)

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

Mapy Google

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