Beágyazott médiatartalmak és beágyazások megjelenítése az MSN-en

Megtudhatja, hogyan jeleníthet meg megfelelően képeket, videókat, diavetítéseket és közösségi beágyazásokat a cikktörzsben HTML és media RSS használatával. Ez az útmutató a támogatott címkéket, metaadatokat és formázási ajánlott eljárásokat ismerteti az MSN-en való zökkenőmentes renderelés érdekében.

Tartalom

HTML-irányelvek

Engedélyezett HTML-címkék

Korlátozott HTML-címkék

Képek

Képek megjelenítése beágyazott HTML-kóddal

Képek megjelenítése média RSS-hírcsatornával

Videók

Kapcsolódó hivatkozások

Diavetítések

Közösségimédia-beágyazások

HTML-irányelvek

A HTML használatával megadható egy cikk törzsmezője vagy a diavetítés diaképének leírási mezője. Más mezőben nem engedélyezett. A HTML használatakor néhány általános irányelvet figyelembe kell venni:

• A Microsoft Betöltési szolgáltatások mindig eltávolítják a nem engedélyezett címkéket. Előfordulhat, hogy a címke tartalma és a gyermekek is törlődnek.
• A Microsoft Ingestion Services megtisztíthatja a HTML-t az olyan elemektől, amelyek befolyásolhatják a megjelenítési szolgáltatásokat, például a beágyazott stílusokat.
• Javasoljuk, hogy a közzétevők egyszerűvé tartsák a HTML-hierarchiát, és kerülje a 10 szinten túli mélyen összekapcsolt hierarchiákat.
• Ne használjon több egymást követő <br> címkét. <a dokumentum végén lévő br> sortörések el lesznek távolítva.
• <A jelen dokumentumban kifejezetten nem említett célokra használt iframe-ek> el lesznek távolítva.

Engedélyezett HTML-címkék

Ezek a címkék a cikk törzsében engedélyezettek:

• Betűstílus<b>, <i>, <em>, <strong>
• Betűméret<sub>, <sup>, <small>
• Fejezetek<h1>, <h2>, <h3>, <h4>, <h5>
• Linkek<a> – a href értékeknek lehetőleg HTTPS-t, HTTP-t és mailto-t kell használniuk:
• Képek<Img>
• Táblázatok<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <képaláírás>, <colgroup>
• Listázási<ol>, <ul>, <li>
• Csoportosítás<span>, <div>, <p>, <br>
• Beágyaz<blokkkvóta>, <az iframe> csak videóhoz és támogatott közösségi beágyazásokhoz elfogadható.

Korlátozott HTML-címkék

A következő címkéket a rendszer mindig eltávolítja a bejövő cikkek törzséből, és a tartalom elutasításához vezethet:

• <stílus>
• <Script>
• <objektum>
• <Param>
• <Kisalkalmazás>
• <beágyazás>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <Ábra>
• <médiatartalmak>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>via GIPHY</a>

Képek

Kép elhelyezése

Ha img> vagy <ábracímkék> használatával <ad hozzá egy képet a cikk HTML-törzséhez, az automatikusan megőrzi annak helyét a szövegtörzsben. Ellenkező esetben a media:content> használata <esetén előfordulhat, hogy a kép az Ingestion Services által automatikusan kiválasztott helyre kerül. Ha egy címke "src" URL-címe megegyezik a <media:content> elem URL-címével, a kép csak egyszer lesz betöltve, és ott lesz, ahol az img címke található.

Kezdő kép

Tájékoztathatja a betöltési adatokat arról, hogy egy adott kép kiemelt képként használható a promóciós kártyán, ha hozzáadja a class="type:primaryImage" címkét az <img> címkéhez.

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

Képek megjelenítése beágyazott HTML-kóddal

<img-címkék>

További metaadatokat is megadhat, ha az img> címkét a <hírcsatornaelem HTML-törzsében használja. Ha a metaadatok ugyanazon kép URL-címéhez a beágyazott és a média RSS-címkéket is használják, <a media:content> metaadatok mindig elsőbbséget élveznek.

A kép összes metaadatait beágyazottan helyezheti el a HTML-ben az adat-*attribútumok használatával, ahogyan az alábbi példában látható:

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

<ábracímkék>

Az img> címkét az előző példában opcionális paraméterekkel is feltöltheti<.

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

Képek megjelenítése média RSS-hírcsatornával

A kép metaadatainak hozzáadásának ajánlott módja a Media RSS <media:content> elem használata a kép metaadatainak megadásához. Alapértelmezés szerint a kép a cikk tetejére kerül.

<media:content> elemek nem adhatók meg a cikk törzsében. A gyökérelem elemének közvetlen gyermekeiként kell megadni őket (<rss-elem> vagy <atomi bejegyzés> ).

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

Az MSN támogatja a First-Party Player (1PP) és a külső lejátszó (3PP) konfigurációit.

1PP-videók: Ebben az esetben meg kell adnia a videófájl URL-címét, hogy a Microsoft Ingestion Services letöltse és az MSN-kiszolgálókon tárolja a fájlt. Az 1PP-s videók a MSN Videó Playerrel lesznek megjelenítve.

3PP-videók: A 3PP-videók lejátszása szolgáltatóspecifikus lejátszón (például YouTube, DailyMotion stb.)

Videó megjelenítése HTML-lel

1PP

A videó> HTML-címkéje <segítségével beágyazott videót fejezhet ki.

<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

A YouTube az egyetlen 3PP-lejátszó, amelyet az <iframe> elem támogat.

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

Videó megjelenítése média RSS-hírcsatornával

Ha médiatartalmat szeretne beágyazni a Media RSS használatával, a <media:content> és <media:group> az elemeket a HTML-törzsen kívül kell elhelyezni, és az (RSS) vagy <entry> az <item> (ATOM) elem közvetlen gyermekeiként kell hozzáadni. Ezek a címkék nem csomagolhatók be vagy nem kombinálhatók HTML-tartalommal a cikk törzsében (például a fájlban <content:encoded>), vagy a betöltés során figyelmen kívül lesznek hagyva.

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>

Egyéb

A támogatott 3PP videó lejátszót meg kell adni a közzétevő márka előkészítésekor. A támogatott 3PP-s video lejátszókhoz egyedi videoazonosítót kell megadnia az <összes 3PP-videó guid> elemén keresztül.

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

Feliratok a videón

A media:subtitle> elem használatával <megadhat egy külső időzítésű szövegformátumfájlt a W3C időzítésű szöveg formátuma alapján. Jelenleg csak a TTML 1 támogatott.

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

Támogatott hivatkozások

A videofájlokat jóváhagyott formátumban, például MP4-fájlként kell menteni. Files akkor engedélyezettek, ha a saját webhelyéről származnak, vagy egy kiszolgálón, például az AWS-en vannak üzemeltetve.

Nem támogatott hivatkozások

A Dropbox-hivatkozások, a YouTube-hivatkozások stb. nem támogatottak az RSS-hírcsatornákban. Ennek az az oka, hogy a videó nem tud könnyen és azonnal lekérni ezeket a linkeket, mivel azok "kapus".

Kapcsolódó hivatkozások

A "több szolgáltatótól" modul lehetőséget kínál a márkák számára, hogy három tartalomhivatkozást jelenítsen meg a cikk- és galériaoldalakon, amelyek a márka saját webhelyére mutatnak.

Kétféleképpen döntheti el, hogy melyik három hivatkozás jelenik meg ebben a modulban:

1. A legújabb cikkek automatikus feltöltése – A Microsoft hivatkozásokat jelenít meg azokra a legutóbbi történetekre, amelyeket a márka által biztosított hírcsatornák között betöltött. Alapértelmezés szerint a canonical hivatkozást használjuk, de ha nincs megadva, a Microsoft nem jeleníti meg ezt a hivatkozást.
2. Adja meg a kapcsolódó hivatkozásokat a cikkhez – lásd alább az erre vonatkozó példákat. Ha ez a beállítás be van jelölve, akkor legalább három kapcsolódó hivatkozást kell megadnia a hírcsatorna minden egyes tartalomeleméhez.

A kapcsolódó hivatkozások gyermekelemként hozzáadhatók a gyökérszintű hírcsatornaelemekhez (cikkekhez és galériákhoz). Általában a közzétevőknek legalább 3 hivatkozást kell megadniuk ahhoz, hogy megjelenjenek az msn "kapcsolódó" szakaszában.

Az összes kapcsolódó és beágyazott hivatkozásnak lehetőleg a HTTPS-sémát kell használnia.

Az Atomban való megadásához a közzétevők egyszerűen használhatják az elemet. Az Atom-névtér deklarálása után ugyanazt az elemet kell használniuk az RSS-ben is. Emellett, mivel miniatűr képre van szükség, kombinálhatja a médiaelemeket <> az alábbi példában látható módon:

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

Diavetítések

Beágyazott diavetítést adhat hozzá a cikk szövegtörzsének HTML-jében egy adott helyhez, ha egy speciális szerkezet <div class="Gallery"> elemét használja ábraelemek> sorozatának <tárolójaként.

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

Diavetítések megjelenítése a média RSS-hírcsatornájával

Beágyazott diavetítés hozzáadásához használja a <media:group> elemet annak az elemnek> a <gyermekeként, amellyel be szeretné ágyazni a diavetítést.

A cikken belüli beágyazott média RSS diavetítéseit a Betöltési szolgáltatások határozzák meg. Ha a diavetítéseket egy adott helyre kell helyeznie, használja helyette a HTML-t.

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

Közösségimédia-beágyazások

A következő közösségi beágyazások szúrhatók be egy cikk HTML-törzsébe:

• X
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• Virágzik
• Google Térkép
• Giphy
• Vöröses
• TikTok

Használhatja az egyes közösségi szolgáltatók által ajánlott standard beágyazási kódot, hogy a beágyazás megmaradjon a cikkben.

A közösségi beágyazási forrásokra mutató URL-címeknek szigorúan https-nek kell lenniük, különben a rendszer elutasítja őket.

Íme néhány példa beágyazásokra:

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>

Pinterest pin widget

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

Pinterest-tábla widget

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

Pinterest-profil widget

<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 (rugalmas)

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

Virágos (div)

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

Virágos (iframe)

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

Google Térkép

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

Vöröses

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