Anzeigen von Inlinemedien und Einbettungen auf MSN

Erfahren Sie, wie Sie Bilder, Videos, Diashows und soziale Einbettungen in Ihrem Artikeltext mit HTML und Media RSS richtig anzeigen. Dieser Leitfaden beschreibt unterstützte Tags, Metadaten und bewährte Formatierungsmethoden, um eine reibungslose Darstellung auf MSN zu gewährleisten.

Inhalt dieses Artikels

HTML-Richtlinien

Zulässige HTML-Tags

Eingeschränkte HTML-Tags

Bilder

Anzeigen von Bildern mit Inline-HTML

Bilder mit Medien-RSS anzeigen

Videos

Verwandte Links

Diashows

Einbettungen in soziale Medien

HTML-Richtlinien

HTML kann verwendet werden, um das Textkörperfeld eines Artikels oder das Folienbildbeschreibungsfeld in einer Diashow anzugeben. In keinem anderen Feld ist es zulässig. Es gibt einige allgemeine Richtlinien, die bei der Verwendung von HTML zu beachten sind:

• Microsoft Ingestion Services entfernt immer unzulässige Tags. Der Tag-Inhalt und die untergeordneten Elemente können ebenfalls entfernt werden.
• Microsoft Ingestion Services kann HTML-Code von Elementen sauber machen, was sich auf die Rendererfahrung auswirken könnte, wie z. B. Inlineformatvorlagen.
• Es wird empfohlen, dass Herausgeber die HTML-Hierarchie einfach halten und tief verknüpfte Hierarchien über 10 Ebenen hinaus vermeiden.
• Vermeiden Sie die Verwendung mehrerer aufeinander folgender <BR-Tags> . < > BR-Zeilenumbrüche am Ende des Dokuments werden entfernt.
• <iFrame> , der für Zwecke verwendet wird, die in diesem Dokument nicht ausdrücklich erwähnt werden, wird entfernt.

Zulässige HTML-Tags

Diese Tags sind im Artikeltext erlaubt:

• Schriftschnitt<b>, <i>, <em>, <stark>
• Schriftgrad<Sub>, <SUP>, <Small>
• Überschriften<h1>, <h2>, <h3>, <h4>, <h5>
• Weiterführende Links<a> - href-Werte sollten vorzugsweise HTTPS, HTTP und mailto verwenden:
• Bilder<img>
• Tabellen<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <Untertitel>, <colgroup>
• Auflistung<ol>, <ul>, <li>
• Gruppierung<span>, <div>, <p>, <br>
• Einbettungen<Blockquote>, <iFrame> nur für Videos und unterstützte Einbettungen in sozialen Netzwerken.

Eingeschränkte HTML-Tags

Die folgenden Tags werden immer aus dem Text eingehender Artikel entfernt und können zur Ablehnung von Inhalten führen:

• <Formatvorlage>
• <script>
• <Objekt>
• <param>
• <Applet>
• <Einbetten>

<media:content url='http:⁠//contoso.com/test.mp4'>
<media:content url='http:⁠//contoso.com/test.avi'>
<media:content url='http:⁠//contoso.com/test.wmv'>

• <Abbildung>
• <Medien>
• < ><div a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>via GIPHY/<a>

Bilder

Bildplatzierung

Wenn du dem HTML-Text des Artikels ein Bild mit <img> - oder <figure-Tags> hinzufügst, behält es automatisch seine Position innerhalb des Textkörpers bei. Andernfalls, wenn Sie media:content> verwenden<, wird Ihr Bild möglicherweise an einem Ort platziert, der automatisch von den Aufnahmediensten ausgewählt wird. Wenn ein Tag über eine "src"-URL verfügt, die mit der URL eines <media:content-Elements> übereinstimmt, wird das Bild nur einmal erfasst und befindet sich dort, wo das img-Tag platziert ist.

Führendes Bild

Sie können die Aufnahme informieren, dass ein bestimmtes Bild als ausgewähltes Bild in der Promo-Karte verwendet werden kann, indem Sie dem <img-Tag> class="type:primaryImage" hinzufügen.

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

Anzeigen von Bildern mit Inline-HTML

<img> tags

Sie können zusätzliche Metadaten bereitstellen, wenn Sie das <img-Tag> im HTML-Text des Feedelements verwenden. Wenn Metadaten für dieselbe Bild-URL sowohl inline als auch mithilfe von Medien-RSS-Tags bereitgestellt werden, <haben Medien:Inhaltsmetadaten> immer Vorrang.

Sie können alle Bildmetadaten inline in den HTML-Code einfügen, indem Sie die data-*-Attribute wie im folgenden Beispiel nutzen:

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

<Abbildungstags>

Sie können das <img-Tag> auch wie im vorherigen Beispiel mit optionalen Parametern füllen.

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

Bilder mit Medien-RSS anzeigen

Die empfohlene Methode zum Hinzufügen von Bildmetadaten ist die Verwendung des Media-RSS-Elements <media:content> , um Bildmetadaten anzugeben. Standardmäßig wird das Bild oben im Artikel platziert.

<Medien:Inhaltselemente> können nicht innerhalb des Artikeltextes angegeben werden. Sie müssen als unmittelbare untergeordnete Elemente des Stammelementelements (<Element> in RSS oder <Eintrag> in Atom) angegeben werden.

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

Videos

MSN unterstützt First-Party Player- (1PP) und Drittanbieter-Playerkonfigurationen (3PP).

1PP-Videos: In diesem Szenario muss die URL der Videodatei angegeben werden, damit Microsoft Ingestion Services die Datei auf MSN-Server herunterladen und speichern kann. 1PP-Videos werden mit dem MSN Video Player gerendert.

3PP-Videos: Die 3PP-Videos werden auf einem anbieterspezifischen Player abgespielt (z.B. YouTube, DailyMotion, etc.).

Video mit HTML anzeigen

1PP

Sie können das <HTML-Tag eines Videos> verwenden, um ein Inlinevideo auszudrücken.

<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 ist der einzige 3PP-Player, der die Verwendung des <iframe-Elements> unterstützt.

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

Anzeigen von Video mit Medien-RSS

Um Medien mit Media RSS einzubetten, müssen die <media:content> and-Elemente <media:group>außerhalb des HTML-Textkörpers platziert und als unmittelbare untergeordnete Elemente des<item> (RSS)- oder <entry> (ATOM)-Elements hinzugefügt werden. Diese Tags können nicht in HTML-Inhalte innerhalb des Artikeltextes eingeschlossen oder mit HTML-Inhalten kombiniert werden (z. B. innerhalb <content:encoded>), oder sie werden bei der Aufnahme ignoriert.

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>

Sonstiges

Unterstützte 3PP-Videoplayer müssen beim Onboarding der Marke des Herausgebers angegeben werden. Für diese unterstützten 3PP-Videoplayer müssen Sie über das <GUID-Element> für alle 3PP-Videos einen eindeutigen Videobezeichner angeben.

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

Untertitel für Video

Sie können das <media:subtitle-Element> verwenden, um eine externe Timed Text-Formatdatei basierend auf dem W3C-Timed Text-Format bereitzustellen. Derzeit wird nur TTML 1 unterstützt.

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

Unterstützte Links

Videodateien müssen in einem zulässigen Format gespeichert werden, z. B. als MP4-Datei. Files sind zulässig, wenn sie von Ihrer eigenen Website stammen oder auf einem Server wie AWS gehostet werden.

Nicht unterstützte Links

Dropbox-Links, YouTube-Links usw. werden in RSS-Feeds nicht unterstützt. Dies liegt daran, dass das Video nicht einfach oder sofort von diesen Links abgerufen werden kann, da sie "geschlossen" sind.

Links zu verwandten Themen

Das Modul "Mehr vom Anbieter" bietet Marken die Möglichkeit, auf Artikel- und Galerieseiten drei Content-Links anzuzeigen, die auf die eigene Website verlinken.

Es gibt zwei Möglichkeiten, um zu entscheiden, welche drei Links in diesem Modul angezeigt werden:

1. Automatisches Füllen der neuesten Artikel – Microsoft zeigt Links zu den neuesten Artikeln an, die es in den von Ihrer Marke bereitgestellten Feeds aufgenommen hat. Wir verwenden standardmäßig den kanonischen Link, aber wenn er nicht angegeben wird, zeigt Microsoft diesen Link nicht an.
2. Stellen Sie verwandte Links mit Artikel zur Verfügung – siehe unten Beispiele dazu. Wenn diese Option ausgewählt ist, müssen Sie mindestens drei verwandte Links mit jedem Inhaltselement im Feed bereitstellen.

Verwandte Links können als untergeordnete Elemente zu Feedelementen auf Stammebene (Artikel und Kataloge) hinzugefügt werden. Im Allgemeinen müssen Publisher mindestens 3 Links bereitstellen, damit sie im Abschnitt "Verwandte" in msn angezeigt werden.

Alle verwandten und Inline-Links sollten vorzugsweise das HTTPS-Schema verwenden.

Zur Angabe in Atom können Herausgeber das Element einfach verwenden. Sie müssen dasselbe Element auch in RSS verwenden, nachdem sie den Atom-Namespace deklariert haben. Da ein Miniaturbild erforderlich ist, können Sie Elemente wie <in diesem Beispiel mit Medien kombinieren:>

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

Diashows

Sie können eine Inline-Diashow an einer bestimmten Stelle innerhalb des HTML-Codes des Artikels hinzufügen, indem Sie ein spezielles Konstrukt <div class="Gallery"> als Container für eine Reihe von <Figurenelementen> verwenden.

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

Diashows mit Medien-RSS anzeigen

Um eine Inline-Diashow hinzuzufügen, verwenden Sie das <media:group-Element> als untergeordnetes Element des Elements>, mit dem <Sie die Diashow einbetten möchten.

Der Platz von Inline Media RSS Slideshows innerhalb des Artikels wird von den Aufnahmediensten festgelegt. Wenn Sie die Diashows an einem bestimmten Ort platzieren müssen, verwenden Sie stattdessen 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>

Einbettungen in soziale Medien

Die folgenden sozialen Einbettungen können in den HTML-Text eines Artikels eingefügt werden:

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

Sie können den Standardeinbindungscode verwenden, der von jedem sozialen Anbieter empfohlen wird, um sicherzustellen, dass die Einbettung im Artikel beibehalten wird.

Alle URLs, die auf Quellen zur Einbettung in soziale Netzwerke verweisen, müssen streng HTTPS sein, sonst werden sie abgelehnt.

Hier sind einige Beispieleinbettungen:

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

Infogramm (responsive)

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

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

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