Så här visar du infogade media och inbäddningar på MSN
Lär dig hur du visar bilder, videoklipp, bildspel och sociala inbäddningar i artikelns brödtext på rätt sätt med HJÄLP av HTML- och media-RSS. I den här guiden beskrivs de bästa metoderna för taggar, metadata och formatering för att säkerställa en smidig återgivning på MSN.
Artikelinnehåll
HTML-riktlinjer
HTML kan användas för att ange brödtextfältet i en artikel eller bildbeskrivningsfältet i ett bildspel. Det är inte tillåtet i något annat fält. Det finns få allmänna riktlinjer att tänka på när du använder HTML:
- Microsoft Ingestion Services tar alltid bort otillåtna taggar. Tagginnehållet och underordnade kan också tas bort.
- Microsoft Ingestion Services kan rensa HTML från element som kan påverka återgivningsupplevelser som infogade format.
- Vi rekommenderar att utgivare håller HTML-hierarkin enkel och undviker djupt länkade hierarkier över 10 nivåer.
- Undvik att använda flera på varandra följande <br-taggar> . <radbrytningar i> slutet av dokumentet tas bort.
- <iframe> som används för något ändamål som inte uttryckligen nämns i detta dokument kommer att tas bort.
Tillåtna HTML-taggar
Dessa taggar är tillåtna i artikelns brödtext:
- Teckenstil<b>, <i>, <em>, <strong>
- Teckenstorlek<sub>, <sup>, <small>
- Rubriker<h1>, <h2>, <h3>, <h4>, <h5>
- Länkar<a> - href-värden bör helst använda HTTPS, HTTP och mailto:
- Bilder<Img>
- Tabeller<tabell>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <bildtext>, <kolgrupp>
- Lista<ol>, <ul>, <li>
- Gruppering<span>, <div>, <p>, <br>
- Bäddar in<blockquote>, <iframe> endast acceptabelt för video och stödda sociala inbäddningar.
Obs
I allmänhet tas attribut bort från alla element om de inte används av underliggande funktioner som href i <a och src i img><.>
Begränsade HTML-taggar
Följande taggar tas alltid bort från brödtexten i inkommande artiklar och kan leda till att innehåll avvisas:
- <format>
- <Skript>
- <objekt>
- <Param>
- <Applet>
- <bädda in>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Figur>
- <Media>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>via GIPHY</a>
Bilder
Bildplacering
Om du lägger till en bild i artikelns HTML-brödtext med img<>- eller <figurtaggar> bevaras automatiskt dess plats i brödtexten. Om du använder <media:innehåll> kan bilden annars placeras på en plats som automatiskt väljs av Ingestion Services. Om en tagg har en "src"-URL som matchar URL-adressen för ett <media:content-element> matas bilden bara in en gång och kommer att finnas där img-taggen placeras.
Inledande bild
Du kan informera intag om att en viss bild kan användas som en föreslagen bild i kampanjkortet genom att lägga till class="type:primaryImage" i img-taggen<>.
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Visa bilder med infogad HTML
<img-taggar>
Du kan ange ytterligare metadata när du använder img-taggen <> i HTML-brödtexten i feedobjektet. Om metadata tillhandahålls för samma bild-URL både infogade och med hjälp av MEDIA-RSS-taggar har <media:innehållsmetadata> alltid företräde.
Du kan infoga alla bildmetadata i HTML-koden genom att utnyttja data-*attributen som i följande exempel:
<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>
<figurtaggar>
Du kan också fylla i img-taggen <> med valfria parametrar som föregående exempel.
<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>
Visa bilder med media-RSS
Det rekommenderade sättet att lägga till bildmetadata är att använda RSS-medieinnehållselementet <> för media för att ange bildmetadata. Som standard placeras bilden högst upp i artikeln.
<media:innehållselement> kan inte anges i artikelns brödtext. De måste anges som omedelbara underordnade till elementet för rotobjektet (<objekt> i RSS eller <post> i 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>
Videor
MSN stöder konfigurationer av First-Party Player (1PP) och Tredjepartsspelare (3PP).
1PP-videor: I det här scenariot måste url-adressen till videofilen anges så att Microsoft Ingestion Services laddar ned och lagrar filen på MSN-servrar. 1PP-videor återges med MSN Video Player.
3PP-videor: 3PP-videorna spelas upp på en leverantörsspecifik spelare (t.ex. YouTube, DailyMotion osv.)
Visa video med HTML
1PP
Du kan använda HTML-taggen <video> för att uttrycka en infogad video.
<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 är den enda 3PP-spelaren som stöds med iframe-elementet<>.
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Viktigt!
På grund av de senaste plattformsändringarna på YouTubes sida kan MSN för närvarande inte moderera YouTube-inbäddningar. Därför avvisas alla YouTube 3PP-videor som skickas via feeds eller artikel HTML under intag. Det här problemet påverkar en liten del av det globala innehållet, men partner bör undvika att använda YouTube-inbäddningar tills vidare. Vi uppdaterar den här vägledningen när supporten har återställts.
Visa video med media-RSS
Om du vill bädda in media med hjälp av <item> Media RSS måste elementen <media:content> placeras <media:group>utanför HTML-brödtexten och läggas till som omedelbara underordnade till (RSS) eller <entry> (ATOM) elementet. De här taggarna kan inte lindas in eller kombineras med HTML-innehåll i artikelns brödtext (t.ex. inom <content:encoded>), annars ignoreras de vid förtäring.
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>
Övrigt
3PP-videospelare som stöds måste anges när utgivarens varumärke är inbyggt. För dessa 3PP-videospelare som stöds måste du ange en unik videoidentifierare via <guid-elementet> för alla 3PP-videor.
<!-- 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>
Undertexter på video
Du kan använda mediet:undertextelementet <> för att tillhandahålla en extern timed textformatfil baserat på W3C-tidsformatet textformat. Endast TTML 1 stöds för närvarande.
<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>
Länkar som stöds
Videofiler måste sparas i ett godkänt format, till exempel en MP4-fil. Files tillåts om de kommer från din egen webbplats eller finns på en server som AWS.
Länkar som inte stöds
Dropbox-länkar, YouTube-länkar osv., stöds inte i RSS-feeds. Detta beror på att videon inte kan enkelt eller omedelbart dra från dessa länkar eftersom de är "gated".
Relaterade länkar
Modulen "mer från leverantör" är en möjlighet för varumärken att visa tre innehållslänkar på artikel- och gallerisidor, som länkar till varumärkets egen webbplats.
Det finns två sätt att avgöra vilka tre länkar som visas i den här modulen:
- Fyll i de senaste artiklarna automatiskt – Microsoft visar länkar till de senaste nyheterna som de har intagit bland feeds som levereras från ditt varumärke. Vi använder den kanoniska länken som standard, men om den inte tillhandahålls kommer Microsoft inte att visa den här länken.
- Ange relaterade länkar med artikeln – se nedan för exempel på hur du gör detta. Om det här alternativet är markerat måste du ange minst tre relaterade länkar till varje innehållsobjekt i feeden.
Relaterade länkar kan läggas till som underordnade element i feedobjekt på rotnivå (artiklar och gallerier). I allmänhet måste utgivare tillhandahålla minst 3 länkar för att de ska visas i avsnittet "relaterade" i msn.
Alla relaterade och infogade länkar bör helst använda HTTPS-schemat.
För att ange i Atom kan utgivare helt enkelt använda elementet. De måste också använda samma element i RSS efter att Atom-namnrymden har deklarerats. Eftersom en miniatyrbild krävs kan du kombinera med <media:> element, så som visas i det här exemplet:
<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>
Bildspel
Du kan lägga till ett infogat bildspel på en viss plats i artikelns HTML-brödtext genom att använda en särskild konstruerad <div class="Gallery"> som en behållare för en serie <figurelement> .
<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>
Visa bildspel med media-RSS
Om du vill lägga till ett infogat bildspel använder <du mediet:gruppelementet> som ett underordnat <objekt> som du vill bädda in bildspel med.
Inline Media RSS Bildspel plats i artikeln bestäms av Ingestion Services. Om du behöver placera bildspelen på en viss plats använder du HTML i stället.
<!-- 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>
Bäddar in sociala medier
Följande sociala inbäddningar kan infogas i en artikel HTML-brödtext:
- X
- Infogram
- Spotify
- Blomstra
- Google Maps
- Giphy
- TikTok
Du kan använda standardinbäddningskoden som rekommenderas av varje social leverantör för att se till att inbäddningen bevaras i artikeln.
Alla URL:er som pekar på sociala inbäddningskällor måste strikt https eller på annat sätt avvisas.
Här är några exempel på inbäddning:
X
<blockquote class="twitter-tweet" align="center" width="350"> <p>We’re more optimistic than ever. The future will surprise the pessimists </p>— 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 <a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a> </blockquote></div>
<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>
Widget för Pinterest-kartnål
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widget för Pinterest-anslagstavla
<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 (responsiv)
<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>
Blomstra (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Blomstra (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>
<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>