Inlinemedia en insluiten weergeven op MSN

Meer informatie over het correct weergeven van afbeeldingen, video's, diavoorstellingen en sociale insluitingen in de hoofdtekst van uw artikel met behulp van HTML en Media RSS. In deze handleiding vindt u een overzicht van ondersteunde tags, metagegevens en aanbevolen procedures voor opmaak om een soepele weergave op MSN te garanderen.

In dit artikel

HTML-richtlijnen

Toegestane HTML-tags

Beperkte HTML-tags

Afbeeldingen

Afbeeldingen weergeven met inline HTML

Afbeeldingen weergeven met media-RSS

Video's

Verwante koppelingen

Diavoorstellingen

Insluiten van sociale media

HTML-richtlijnen

HTML kan worden gebruikt om het hoofdtekstveld van een artikel of het beschrijvingsveld van de diaafbeelding in een diavoorstelling op te geven. Dit is niet toegestaan in een ander veld. Er zijn enkele algemene richtlijnen om rekening mee te houden bij het gebruik van HTML:

• Microsoft Ingestion Services verwijdert altijd niet-toegestane tags. De inhoud van de tag en onderliggende items kunnen ook worden verwijderd.
• Microsoft Ingestion Services kan HTML opschonen van elementen die van invloed kunnen zijn op weergave-ervaringen, zoals inlinestijlen.
• Het wordt aanbevolen dat uitgevers de HTML-hiërarchie eenvoudig houden en diep gekoppelde hiërarchieën boven 10 niveaus vermijden.
• Vermijd het gebruik van meerdere opeenvolgende <br-tags> . <br-regeleinden> aan het einde van het document worden verwijderd.
• <iframe> dat wordt gebruikt voor doeleinden die niet expliciet in dit document worden vermeld, wordt verwijderd.

Toegestane HTML-tags

Deze tags zijn toegestaan in de hoofdtekst van het artikel:

• Tekenstijl<b>, <i>, <em>, <sterk>
• Tekengrootte<sub>, <sup>, <small>
• < Koppenh1>, <h2>, <h3>, <h4>, <h5>
• Verwijzigingen<a> - href-waarden moeten bij voorkeur HTTPS, HTTP en mailto gebruiken:
• Afbeeldingen<Img>
• Tabellen<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <onderschrift>, <colgroup>
• Aanbieding<ol>, <ul>, <li>
• Groeperen<span>, <div>, <p>, <br>
• Ingesloten<blockquote>, <iframe> alleen acceptabel voor video en ondersteunde sociale insluitingen.

Beperkte HTML-tags

De volgende tags worden altijd verwijderd van de hoofdtekst van binnenkomende artikelen en kunnen ertoe leiden dat inhoud wordt geweigerd:

• <stijl>
• <Script>
• <object>
• <Param>
• <Applet>
• <insluiten>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <Figuur>
• <Media>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>via GIPHY</a>

Afbeeldingen

Afbeeldingsplaatsing

Als u een afbeelding toevoegt aan de HTML-hoofdtekst van het artikel met behulp van <img> - of <afbeeldingstags> , blijft de locatie binnen de hoofdtekst automatisch behouden. Als u anders media:content> gebruikt<, wordt uw afbeelding mogelijk op een locatie geplaatst die automatisch is gekozen door Ingestion Services. Als een tag een 'src'-URL heeft die overeenkomt met de URL van een <media:content-element> , wordt de afbeelding slechts eenmaal opgenomen en bevindt zich op de plaats waar de tag img wordt geplaatst.

Voorloopafbeelding

U kunt opname laten weten dat een bepaalde afbeelding kan worden gebruikt als aanbevolen afbeelding in de promotiekaart door class="type:primaryImage" toe te voegen aan de <tag img> .

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

Afbeeldingen weergeven met inline HTML

<img-tags>

U kunt aanvullende metagegevens opgeven wanneer u de tag img> in de <HTML-hoofdtekst van het feeditem gebruikt. Als metagegevens worden opgegeven voor dezelfde afbeeldings-URL, zowel inline als met behulp van media-RSS-tags, <hebben metagegevens van media:inhoud> altijd voorrang.

U kunt alle metagegevens van afbeeldingen inline in de HTML plaatsen door gebruik te maken van de gegevens-*kenmerken, zoals in het volgende voorbeeld:

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

<afbeeldingstags>

U kunt de <tag img> ook vullen met optionele parameters zoals in het vorige voorbeeld.

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

Afbeeldingen weergeven met media-RSS

De aanbevolen manier om metagegevens van afbeeldingen toe te voegen, is door het element Media RSS <media:content> te gebruiken om metagegevens van afbeeldingen op te geven. Standaard wordt de afbeelding boven aan het artikel geplaatst.

<media:inhoudselementen> kunnen niet worden opgegeven in de hoofdtekst van het artikel. Ze moeten worden opgegeven als directe onderliggende elementen van het hoofditemelement (<item> in RSS of <vermelding> 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's

MSN ondersteunt configuraties van First-Party Player (1PP) en Third-Party Player (3PP).

1PP-video's: In dit scenario moet de URL van het videobestand worden opgegeven, zodat Microsoft Ingestion Services het bestand downloadt en opslaat op MSN-servers. 1PP-video's worden weergegeven met MSN Video Player.

3PP-video's: De 3PP-video's worden afgespeeld op een provider-specifieke speler (bijvoorbeeld YouTube, DailyMotion, enz.)

Video weergeven met HTML

1PP

U kunt de HTML-tag van de <video> gebruiken om een inlinevideo uit te drukken.

<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 is de enige 3PP-speler die wordt ondersteund met behulp van het <iframe-element> .

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

Video weergeven met media-RSS

Als u media wilt insluiten met Media RSS, moeten de <media:content> elementen en <media:group>buiten de HTML-hoofdtekst worden geplaatst en als directe onderliggende elementen van het<item> element (RSS) of <entry> (ATOM) worden toegevoegd. Deze tags kunnen niet worden verpakt in of gecombineerd met HTML-inhoud in de hoofdtekst van het artikel (bijvoorbeeld binnen <content:encoded>), of ze worden genegeerd tijdens de opname.

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>

Overige

Ondersteunde 3PP-videospelers moeten worden opgegeven wanneer het merk van de uitgever wordt toegevoegd. Voor deze ondersteunde 3PP-videospelers moet u een unieke video-id opgeven via het <guid-element> voor alle 3PP-video's.

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

Ondertiteling op video

U kunt het <element media:subtitle> gebruiken om een extern getimed tekstindelingsbestand op te geven op basis van W3C Timed Text-indeling. Alleen TTML 1 wordt momenteel ondersteund.

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

Ondersteunde koppelingen

Videobestanden moeten worden opgeslagen in een goedgekeurde indeling, zoals een MP4-bestand. Files zijn toegestaan als ze afkomstig zijn van uw eigen website of worden gehost op een server zoals AWS.

Niet-ondersteunde koppelingen

Dropbox-koppelingen, YouTube-koppelingen, enzovoort, worden niet ondersteund in RSS-feeds. Dit komt doordat de video niet gemakkelijk of onmiddellijk uit die koppelingen kan worden gehaald, omdat ze 'gated' zijn.

Verwante koppelingen

De module 'meer van provider' biedt merken de mogelijkheid om drie inhoudskoppelingen weer te geven op artikel- en galeriepagina's, die verwijzen naar de eigen website van het merk.

Er zijn twee manieren om te bepalen welke drie koppelingen in deze module worden weergegeven:

1. Meest recente artikelen automatisch vullen : Microsoft geeft koppelingen weer naar de meest recente artikelen die zijn opgenomen in de feeds die door uw merk worden geleverd. We gebruiken standaard de canonieke koppeling, maar als deze niet is opgegeven, wordt deze koppeling niet weergegeven in Microsoft.
2. Geef gerelateerde koppelingen met artikel op – zie hieronder voor voorbeelden over hoe u dit doet. Als deze optie is geselecteerd, moet u ten minste drie gerelateerde koppelingen opgeven voor elk inhoudsitem in de feed.

Gerelateerde koppelingen kunnen als onderliggende elementen worden toegevoegd aan feeditems op hoofdniveau (artikelen en galerieën). Over het algemeen moeten uitgevers ten minste 3 koppelingen opgeven om ze weer te geven in de sectie 'gerelateerd' in msn.

Alle gerelateerde en inlinekoppelingen moeten bij voorkeur gebruikmaken van het HTTPS-schema.

Uitgevers kunnen het element gewoon gebruiken om op te geven in Atom. Ze moeten ook hetzelfde element in RSS gebruiken na het declareren van de Atom-naamruimte. Omdat een miniatuurafbeelding vereist is, kunt u bovendien combineren met <media:> -elementen, zoals in dit voorbeeld wordt weergegeven:

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

Diavoorstellingen

U kunt een inlinediavoorstelling toevoegen aan een specifieke locatie in de HTML-hoofdtekst van het artikel door een speciale construct <div class="Gallery"> te gebruiken als een container van een reeks <afbeeldingselementen> .

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

Diavoorstellingen weergeven met media-RSS

Als u een inlinediavoorstelling wilt toevoegen, gebruikt u het <element media:group> als onderliggend element van het <item> waarmee u diavoorstelling wilt insluiten.

Inline Media RSS Slideshows plaats binnen het artikel wordt bepaald door de Ingestion Services. Als u de diavoorstellingen op een specifieke locatie wilt plaatsen, gebruikt u in plaats daarvan 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>

Insluiten van sociale media

De volgende sociale insluitingen kunnen worden ingevoegd in de HTML-hoofdtekst van een artikel:

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

U kunt de standaard insluitcode gebruiken die wordt aanbevolen door elke sociale provider om ervoor te zorgen dat de insluiting in het artikel behouden blijft.

Alle URL's die verwijzen naar sociale insluitingsbronnen moeten strikt https zijn, anders worden ze geweigerd.

Hier volgen enkele voorbeelden van insluitingen:

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 bordwidget

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

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

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

Bloeien (div)

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

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