Sådan får du vist indbyggede medier og integreringer på MSN
Få mere at vide om, hvordan du korrekt kan vise billeder, videoer, slideshows og sociale integreringer i din artikels brødtekst ved hjælp af HTML og Medie RSS. Denne vejledning beskriver de bedste fremgangsmåder for understøttede mærker, metadata og formatering for at sikre problemfri gengivelse på MSN.
Denne artikel indeholder
Vise billeder med indbygget HTML
HTML-retningslinjer
HTML kan bruges til at angive brødteksten i en artikel eller feltet med beskrivelse af slidebilledet i et slideshow. Det er ikke tilladt i andre felter. Der er nogle få generelle retningslinjer, du skal være opmærksom på, når du bruger HTML:
- Microsoft Ingestion Services fjerner altid ikke-tilladte mærker. Mærkets indhold og børn kan også blive fjernet.
- Microsoft Ingestion Services kan rydde HTML fra elementer, der kan påvirke gengivelsesoplevelser som indbyggede typografier.
- Det anbefales, at udgivere holder HTML-hierarkiet simpelt og undgår dybt sammenkædede hierarkier ud over 10 niveauer.
- Undgå at bruge flere på hinanden følgende <br-mærker> . <br> linjeskift i slutningen af dokumentet fjernes.
- <iframe> , der bruges til ethvert formål, der ikke udtrykkeligt er nævnt i dette dokument, fjernes.
Tilladte HTML-koder
Disse mærker er tilladt i artiklens brødtekst:
- < Typografib>, <i>, <em>, <strong>
- Skriftstørrelse<sub>, <sup>, <small>
- Overskrifter<h1>, <h2>, <h3>, <h4>, <h5>
- Links<a> - href-værdier bør helst bruge HTTPS, HTTP og mailto:
- Billeder<Img>
- Tabeller<tabel>, <th>, <tr>, <td>, <thead>, <tbody>, <fode>, <col>, <billedtekst>, <kolgruppe>
- Notering<ol>, <ul>, <li>
- Gruppering<span>, <div>, <p>, <br>
- Integrerer<blockquote>, <iframe> kun acceptabel til video og understøttede sociale integreringer.
Bemærk
Generelt fjernes attributter fra alle elementer, medmindre de bruges af underliggende funktioner som f.eks. href i <a> og src i img><.
Begrænsede HTML-koder
Følgende mærker fjernes altid fra brødteksten i indgående artikler og kan medføre, at indhold afvises:
- <typografi>
- <Script>
- <objekt>
- <Param>
- <Applet>
- <integrer>
- <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>
- <Medier>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>via GIPHY</a>
Billeder
Billedplacering
Hvis du føjer et billede til artiklens HTML-brødtekst ved hjælp af <img> - eller <figurmærker> , bevares dets placering automatisk i brødteksten. Ellers, hvis du bruger <medie:indhold>, kan dit billede blive placeret på en placering, der automatisk vælges af Ingestion Services. Hvis et mærke har en "src"-URL-adresse, der svarer til URL-adressen for et <medie:indholdselement> , vil billedet kun blive indtaget én gang og vil blive placeret, hvor img-koden er placeret.
Foranstillet billede
Du kan informere ingestion, at et bestemt billede kan bruges som et udvalgt billede i promo-kortet ved at tilføje class="type:primaryImage" til <img> tag.
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Vise billeder med indbygget HTML
<img-mærker>
Du kan angive yderligere metadata, når du bruger img-koden <> i HTML-brødteksten i feedelementet. Hvis der er angivet metadata for den samme url-adresse til billedet både i selve teksten og ved hjælp af Medie RSS-koder, <har media:content-metadata> altid forrang.
Du kan placere alle billedmetadata indbygget i HTML-koden ved at udnytte dataattributterne som i følgende eksempel:
<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>
<figurmærker>
Du kan også udfylde koden <img> med valgfrie parametre som det forrige eksempel.
<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>
Vis billeder med medie-RSS
Den anbefalede måde at tilføje billedmetadata på er at bruge medie-RSS-medie <:indholdselementet> til at angive billedmetadata. Billedet placeres som standard øverst i artiklen.
<medie:indholdselementer> kan ikke angives i artiklens brødtekst. De skal angives som umiddelbart underordnede af rodelementelementet (<element> i RSS eller <indtastning> 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>
Videoer
MSN understøtter konfigurationer af First-Party Player (1PP) og Tredjepartsafspiller (3PP).
1PP-videoer: I dette scenarie skal url-adressen til videofilen angives, så Microsoft Ingestion Services downloader og gemmer filen på MSN-servere. 1PP-videoer gengives ved hjælp af MSN Video Player.
3PP-videoer: 3PP-videoerne afspilles på en udbyderspecifik afspiller (f.eks. YouTube, DailyMotion osv.)
Vise video med HTML
1PP
Du kan bruge <HTML-koden til video> til at udtrykke en indbygget 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 er den eneste 3PP-afspiller, der understøttes ved hjælp af <iframe-elementet> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Vigtig
På grund af de seneste platformsændringer på YouTubes side kan MSN i øjeblikket ikke moderere YouTube-integreringer. Derfor vil alle YouTube 3PP-videoer, der indsendes via feeds eller artikel HTML, blive afvist under indtagelse. Dette problem påvirker en lille del af det globale indhold, men partnere bør undgå at bruge YouTube-integreringer indtil videre. Vi opdaterer denne vejledning, når supporten er genoprettet.
Visning af video med medie RSS
Hvis du vil integrere medier ved hjælp af Media RSS, <media:content> skal elementerne og <media:group> placeres uden for HTML-brødteksten og tilføjes som umiddelbare børn af<item> (RSS) eller <entry> (ATOM)-elementet. Disse koder kan ikke ombrydes i eller kombineres med HTML-indhold i artiklens brødtekst (f.eks. i <content:encoded>), da de ellers ignoreres under indtagelse.
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>
Andet
Understøttede 3PP-videoafspillere skal angives, når udgiverens brand er onboardet. For disse understøttede 3PP-videoafspillere skal du angive et entydigt video-id via <guid-elementet> for alle 3PP-videoer.
<!-- 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>
Undertekster på video
Du kan bruge <medie:undertitel-elementet> til at levere en ekstern tidsopdateringsfil, der er baseret på W3C Timed Text-format. Kun TTML 1 understøttes i øjeblikket.
<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>
Understøttede links
Videofiler skal gemmes i et godkendt format, f.eks. en MP4-fil. Files er tilladt, hvis de er fra dit eget websted eller hostes på en server som F.eks. AWS.
Ikke-understøttede links
Dropbox-links, YouTube-links osv. understøttes ikke i RSS-feeds. Dette skyldes, at videoen ikke kan let eller umiddelbart trække fra disse links, da de er 'gated'.
Relaterede links
Modulet "mere fra udbyder" giver varemærkerne mulighed for at vise tre indholdslinks på artikel- og gallerisider, som linker til varemærkets eget websted.
Der er to måder at beslutte, hvilke tre links der vises i dette modul:
- Udfyld automatisk de seneste artikler – Microsoft viser links til de seneste historier, som microsoft har indtaget blandt de feeds, der leveres fra dit varemærke. Vi bruger det vedtagne link som standard, men hvis det ikke er angivet, viser Microsoft ikke dette link.
- Angiv relaterede links til artiklen – se nedenstående eksempler på, hvordan du gør dette. Hvis denne indstilling er valgt, skal du angive mindst tre relaterede links til hvert indholdselement i feedet.
Relaterede links kan føjes som underordnede elementer til feedelementer på rodniveau (artikler og gallerier). Generelt skal udgiverne levere mindst tre links, for at de kan blive vist i afsnittet "relateret" på msn.
Alle relaterede og indbyggede links bør helst bruge HTTPS-skemaet.
For at angive i Atom kan udgivere blot bruge elementet. De skal også bruge det samme element i RSS efter at have erklæret Atom-navneområdet. Da der kræves et miniaturebillede, kan du desuden kombinere med <medieelementer som> vist i dette eksempel:
<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>
Lysbilledshow
Du kan føje et indbygget slideshow til en bestemt placering i artiklens HTML-brødtekst ved at bruge en særlig konstruktion <div class="Gallery"> som en beholder med en række <figurelementer> .
<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>
Vise slideshows med medie RSS
Hvis du vil tilføje et indbygget slideshow, skal du bruge <medie:gruppeelementet> som underordnet element til det <element> , du vil integrere slideshow med.
Indbyggede Medier RSS-slideshows sted i artiklen er besluttet af Ingestion Services. Hvis du vil placere slideshowene på en bestemt placering, skal du bruge HTML i stedet.
<!-- 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>
Integrering af sociale medier
Følgende sociale integreringer kan indsættes i en artikels HTML-brødtekst:
- X
- Infogram
- Spotify
- Blomstre
- Google Maps
- Giphy
- TikTok
Du kan bruge den standard integreringskode, der anbefales af hver social udbyder, for at sikre, at integreringen bevares i artiklen.
Alle URL-adresser, der peger på sociale integreringskilder, skal være https eller på anden måde vil blive afvist.
Her er nogle eksempler på integreringer:
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>
Pinterest-pinkodewidget
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Pinterest-tavlewidget
<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 (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>
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>
Blomstre (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Blomstre (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>