Anzeigen von Inlinemedien und Einbetten in MSN

Erfahren Sie, wie Sie Bilder, Videos, Diashows und soziale Einbettungen in Ihren Artikeltext mithilfe von HTML und Media RSS ordnungsgemäß anzeigen. In diesem Leitfaden werden bewährte Methoden für unterstützte Tags, Metadaten und Formatierung beschrieben, um ein reibungsloses Rendering auf MSN zu gewährleisten.

In diesem Artikel

HTML-Richtlinien

Zulässige HTML-Tags

Eingeschränkte HTML-Tags

Bilder

Anzeigen von Bildern mit Inline-HTML

Anzeigen von Bildern mit Medien-RSS

Videos

Verwandte Links

Diashows

Einbettungen in soziale Medien

HTML-Richtlinien

HTML kann verwendet werden, um das Textfeld eines Artikels oder das Folienbildbeschreibungsfeld in einer Diashow anzugeben. Sie ist in keinem anderen Feld zulässig. Es gibt einige allgemeine Richtlinien, die Sie bei der Verwendung von HTML beachten sollten:

• Microsoft Ingestion Services entfernt nicht zulässige Tags immer. Der Taginhalt und die untergeordneten Elemente können ebenfalls entfernt werden.
• Microsoft Ingestion Services kann HTML von Elementen sauber, die sich auf Renderingfunktionen auswirken können, z. B. Inlineformatvorlagen.
• Es wird empfohlen, dass Herausgeber die HTML-Hierarchie einfach halten und tief verknüpfte Hierarchien vermeiden, die über 10 Ebenen hinausgehen.
• 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 explizit erwähnt werden, wird entfernt.

Zulässige HTML-Tags

Diese Tags sind im Artikeltext zulässig:

• Schriftschnitt<b>, <i>, <em>, <strong>
• Schriftgrad<sub>, <sup>, <small>
• Überschriften<h1>, <h2>, <h3>, <h4>, <h5>
• Links<a> – href-Werte sollten vorzugsweise HTTPS, HTTP und mailto verwenden:
• Bilder<Img>
• Tabellen<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <Untertitel>, <colgroup>
• Liste<ol>, <ul>, <li>
• Gruppierung<span>, <div>, <p>, <br>
• Bettet<blockquote>, <iframe> nur für Videos und unterstützte soziale Einbettungen akzeptabel.

Eingeschränkte HTML-Tags

Die folgenden Tags werden immer aus dem Textkörper eingehender Artikel entfernt und können dazu führen, dass Inhalte abgelehnt werden:

• <Formatvorlage>
• <script>
• <Objekt>
• <param>
• <Applet>
• <Einbetten>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <Abbildung>
• <Medien>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>via GIPHY</a>

Bilder

Bildplatzierung

Wenn Sie dem HTML-Text des Artikels mithilfe von <img> - oder <figure-Tags> ein Bild hinzufügen, behält es automatisch seine Position innerhalb des Textkörpers bei. Andernfalls wird Ihr Bild bei Verwendung <von media:content> möglicherweise an einem Ort platziert, der automatisch von Erfassungsdienste 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 wird.

Führendes Bild

Sie können die Erfassung darüber informieren, dass ein bestimmtes Bild als ausgewähltes Bild im promo-Karte verwendet werden kann, indem Sie class="type:primaryImage" zum <img-Tag> 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 angeben, 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 media:content-Metadaten> immer Vorrang.

Sie können alle Bildmetadaten inline innerhalb des HTML-Codes platzieren, indem Sie die data-*-Attribute wie im folgenden Beispiel verwenden:

<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 mit optionalen Parametern auffüllen, wie im vorherigen Beispiel.

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

Anzeigen von Bildern mit Medien-RSS

Die empfohlene Methode zum Hinzufügen von Bildmetadaten besteht darin, das Media RSS <media:content-Element> zum Angeben von Bildmetadaten zu verwenden. Standardmäßig wird das Bild am Anfang des Artikels platziert.

<media:content-Elemente> können nicht im Textkörper des Artikels 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 konfigurationen First-Party Player (1PP) und Third-Party Player (3PP).

1PP-Videos: In diesem Szenario muss die Videodatei-URL bereitgestellt werden, damit microsoft Ingestion Services die Datei herunterlädt und auf MSN-Servern speichert. 1PP-Videos werden mit MSN Video Player gerendert.

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

Video mit HTML anzeigen

1PP

Sie können das <Video-HTML-Tag> 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 mit dem <iframe-Element> unterstützt wird.

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

Anzeigen von Videos mit Medien-RSS

Um Medien mithilfe von Media RSS einzubetten, müssen die <media:content> Elemente und <media:group>außerhalb des HTML-Texts platziert und als unmittelbare untergeordnete Elemente des<item> (RSS)- oder <entry> (ATOM)-Elements hinzugefügt werden. Diese Tags können nicht umschlossen oder mit HTML-Inhalten innerhalb des Artikeltexts (z. B. in <content:encoded>) kombiniert werden, oder sie werden während der Erfassung 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>

Andere

Unterstützte 3PP-Videoplayer müssen angegeben werden, wenn die Marke des Herausgebers integriert wird. Für diese unterstützten 3PP-Videoplayer müssen Sie einen eindeutigen Videobezeichner über das <GUID-Element> für alle 3PP-Videos 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 im Video

Sie können das <media:subtitle-Element> verwenden, um eine externe Timed Text-Formatdatei bereitzustellen, die auf dem W3C-Format für zeitbasierten Text basiert. 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 genehmigten Format gespeichert werden, z. B. in einer 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 und nicht sofort aus diesen Links ziehen kann, da sie "gated" sind.

Links zu verwandten Themen

Das Modul "Mehr vom Anbieter" ist eine Möglichkeit für Marken, drei Inhaltslinks auf Artikel- und Katalogseiten anzuzeigen, die auf die eigene Website der Marke verweisen.

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

1. Automatisches Auffüllen der neuesten Artikel : Microsoft zeigt Links zu den neuesten Geschichten an, die es in den Feeds ihrer Marke erfasst hat. Wir verwenden standardmäßig den kanonischen Link, aber wenn nicht angegeben, zeigt Microsoft diesen Link nicht an.
2. Stellen Sie verwandte Links mit Einem Artikel bereit. Beispiele dazu finden Sie unten. Wenn diese Option ausgewählt ist, müssen Sie mindestens drei verwandte Links für jedes Inhaltselement im Feed angeben.

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

Alle verwandten und Inlinelinks sollten vorzugsweise das HTTPS-Schema verwenden.

Um in Atom anzugeben, können Herausgeber einfach das -Element verwenden. Sie müssen auch dasselbe Element in RSS verwenden, nachdem sie den Atom-Namespace deklariert haben. Da ein Miniaturbild erforderlich ist, können Sie darüber hinaus mit <Media:> -Elementen kombinieren, wie in diesem Beispiel gezeigt:

<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 Inlinepräsentation an einer bestimmten Stelle innerhalb des Texttext-HTML-Codes des Artikels hinzufügen, indem Sie ein spezielles Konstrukt <div class="Gallery"> als Container einer Reihe von <Figurelementen> 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>

Anzeigen von Diashows mit Medien-RSS

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

Inline Media RSS Slideshows Platz innerhalb des Artikels wird durch die Erfassungsdienste entschieden. 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 social embeds können in einen HTML-Text eines Artikels eingefügt werden:

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

Sie können den Standardeinbettungscode verwenden, der von jedem Anbieter für soziale Netzwerke empfohlen wird, um sicherzustellen, dass die Einbettung im Artikel beibehalten wird.

Alle URLs, die auf Social Media-Einbettungsquellen verweisen, müssen streng https sein. Andernfalls werden sie abgelehnt.

Hier sind einige Beispiele für Einbettungen:

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

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

Pinterest-Boardwidget

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

<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 (reaktionsfähig)

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

Florieren (div)

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

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