Slik viser du innebygde medier og innebygginger på MSN
Lær hvordan du viser bilder, videoer, lysbildefremvisninger og sosiale innebygginger i brødteksten i artikkelen på riktig måte ved hjelp av HTML og Media RSS. Denne veiledningen beskriver støttede koder, metadata og anbefalte fremgangsmåter for formatering for å sikre jevn gjengivelse på MSN.
I denne artikkelen
Innebygginger for sosiale medier
HTML-retningslinjer
HTML kan brukes til å angi brødtekstfeltet i en artikkel eller beskrivelsesfeltet for lysbilder i en lysbildefremvisning. Det er ikke tillatt i andre felt. Det finnes få generelle retningslinjer å huske på når du bruker HTML:
- Microsoft Ingestion Services fjerner alltid tillatte koder. Merkeinnholdet og underordnede kan også fjernes.
- Microsoft Ingestion Services kan fjerne HTML fra elementer som kan påvirke gjengivelsesopplevelser, for eksempel innebygde stiler.
- Det anbefales at utgivere gjør HTML-hierarkiet enkelt og unngår dypt koblede hierarkier utover 10 nivåer.
- Unngå å bruke flere etterfølgende <br-koder> . <br-linjeskift> på slutten av dokumentet fjernes.
- <iframe> som brukes til noe formål som ikke er eksplisitt nevnt i dette dokumentet, vil bli fjernet.
Tillatte HTML-koder
Disse kodene er tillatt i brødteksten i artikkelen:
- Skriftstil<b>, <i>, <em>, <strong>
- Skriftstørrelse<sub>, <sup>, <small>
- Overskrifter<h1>, <h2>, <h3>, <h4>, <h5>
- Koblinger<a> – href-verdier bør helst bruke HTTPS, HTTP og mailto:
- Bilder<Img>
- Tabeller<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
- Oppføringen<ol>, <ul>, <li>
- Gruppering<span>, <div>, <p>, <br>
- Bygger<blockquote>, <iframe> bare akseptabelt for video og støttede sosiale innebygginger.
Obs!
Generelt vil attributter bli fjernet fra alle elementer med mindre de brukes av underliggende funksjoner som href i <a og src i img><.>
Begrensede HTML-koder
Følgende koder fjernes alltid fra brødteksten i innkommende artikler og kan føre til at innhold blir avvist:
- <stil>
- <Skript>
- <objekt>
- <Param>
- <Applet>
- <bygg inn>
- <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
Bildeplassering
Hvis du legger til et bilde i artikkelens HTML-brødtekst ved hjelp av <img> - eller <figurkoder> , bevares plasseringen i brødteksten automatisk. Hvis du bruker <media:content>, kan det hende at bildet plasseres på en plassering som velges automatisk av Ingestion Services. Hvis en kode har en url-adresse for src som samsvarer med nettadressen til et <media:content-element> , blir bildet bare inntatt én gang og vil bli plassert der img-koden er plassert.
Innledende bilde
Du kan informere inntak om at et bestemt bilde kan brukes som et utvalgt bilde i kampanjekortet ved å <legge til class="type:primaryImage" i img-merket> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Vise bilder med innebygd HTML
<img-koder>
Du kan angi flere metadata når du bruker <img-koden> i HTML-brødteksten for feedelementet. Hvis metadata er angitt for den samme nettadressen for bilder både innebygd og ved hjelp av Media RSS-koder, <vil metadata for media:innhold> alltid ha forrang.
Du kan plassere alle innebygde bildemetadata i HTML-koden ved å benytte data-*attributtene som i eksemplet nedenfor:
<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>
<figurkoder>
Du kan også fylle ut <img-koden> med valgfrie parametere som 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 bilder med medie-RSS
Den anbefalte måten å legge til metadata for bilder på, er å bruke medie-RSS-mediet <:innholdselementet> til å angi metadata for bilder. Bildet plasseres som standard øverst i artikkelen.
<media:innholdselementer> kan ikke angis i brødteksten i artikkelen. De må angis som underordnede for rotelementelementet (<element> i RSS eller <oppføring> 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 støtter konfigurasjoner for First-Party Player (1PP) og Tredjepartsspiller (3PP).
1PP-videoer: I dette scenarioet må nettadressen for videofil angis slik at Microsoft Ingestion Services laster ned og lagrer filen på MSN-servere. 1PP-videoer gjengis ved hjelp av MSN Video Player.
3PP-videoer: 3PP-videoene spilles av på en leverandørspesifikk spiller (f.eks. YouTube, DailyMotion osv.)
Vis video med HTML
1PP
Du kan bruke <HTML-koden for video> til å uttrykke en innebygd 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-spilleren som støttes ved hjelp av <iframe-elementet> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Viktig
På grunn av nylige plattformendringer på YouTube-siden kan ikke MSN for øyeblikket moderere YouTube-innebygginger. Som et resultat vil alle YouTube 3PP-videoer som sendes inn via feeder eller artikkel-HTML, bli avvist under inntak. Dette problemet påvirker en liten del av det globale innholdet, men partnere bør unngå å bruke YouTube-innebygginger inntil videre. Vi oppdaterer denne veiledningen når støtten er gjenopprettet.
Vise video med medie-RSS
Hvis du vil bygge inn medier ved hjelp av Media RSS, <media:content> må elementene og <media:group> elementene plasseres utenfor HTML-brødteksten og legges til som underordnede elementer i<item> (RSS) eller <entry> (ATOM). Disse kodene kan ikke pakkes inn i eller kombineres med HTML-innhold i brødteksten i artikkelen (for eksempel innenfor <content:encoded>), eller de vil bli ignorert under inntak.
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>
Annet
Støttede 3PP-videospillere må angis når utgiverens merke er pålastet. For disse støttede 3PP-videospillerne må du oppgi en unik videoidentifikator gjennom <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>
Teksting for hørselshemmede på video
Du kan bruke <mediet:undertittelelementet> til å angi en fil med eksternt tidsavbrutt tekstformat basert på W3C Timed Text-format. Bare TTML 1 støttes for øyeblikket.
<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>
Støttede koblinger
Videofiler må lagres i et godkjent format, for eksempel en MP4-fil. Files tillates hvis de er fra ditt eget nettsted eller driftes på en server, for eksempel AWS.
Koblinger som ikke støttes
Dropbox-koblinger, YouTube-koblinger osv., støttes ikke i RSS-feeder. Dette er fordi videoen ikke kan enkelt eller umiddelbart trekke fra disse koblingene som de er "gated".
Beslektede koblinger
Modulen "mer fra leverandør" er en mulighet for merkevarer til å vise tre innholdskoblinger på artikkel- og gallerisider, som kobler til merkevarens eget nettsted.
Det finnes to måter å bestemme hvilke tre koblinger som skal vises i denne modulen:
- Fyll ut de nyeste artiklene automatisk – Microsoft viser koblinger til de nyeste historiene som den har inntatt blant feedene fra merkevaren din. Vi bruker den kanoniske koblingen som standard, men hvis den ikke er angitt, viser ikke Microsoft denne koblingen.
- Oppgi relaterte koblinger med artikkelen – se nedenfor for eksempler på hvordan du gjør dette. Hvis dette alternativet er valgt, må du angi minst tre relaterte koblinger med hvert innholdselement i feeden.
Relaterte koblinger kan legges til som underordnede elementer i feedelementer på rotnivå (artikler og gallerier). Vanligvis må utgivere oppgi minst tre koblinger for at de skal vises i den relaterte delen i msn.
Alle relaterte og innebygde koblinger bør helst bruke HTTPS-oppsettet.
Hvis du vil angi i Atom, kan utgivere ganske enkelt bruke elementet. De må også bruke det samme elementet i RSS etter å ha deklarert Atom-navneområdet. I tillegg, fordi et miniatyrbilde er nødvendig, kan du kombinere med <medier:> elementer, som vist i dette eksemplet:
<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>
Lysbildeserier
Du kan legge til en innebygd lysbildefremvisning på en bestemt plassering i artikkelens brødtekst HTML ved å bruke en spesiell konstruksjon <div class="Gallery"> som en beholder for en serie med <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 lysbildefremvisninger med medie-RSS
Hvis du vil legge til en innebygd lysbildefremvisning, bruker <du medie-:gruppeelementet> som underordnet elementet <> du vil bygge inn lysbildefremvisning med.
Innebygde Media RSS-lysbildefremvisninger i artikkelen avgjøres av Ingestion Services. Hvis du trenger å plassere lysbildefremvisningene på et bestemt sted, bruker du 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>
Innebygginger for sosiale medier
Følgende sosiale innebygginger kan settes inn i en HTML-artikkeltekst:
- X
- Infogram
- Spotify
- Blomstre
- Google Maps
- Giphy
- TikTok
Du kan bruke standard innebyggingskode som anbefales av hver sosiale leverandør for å sikre at innebyggingen beholdes i artikkelen.
Alle nettadresser som peker til sosiale innebyggingskilder, må strengt være https ellers vil bli avvist.
Her er noen eksempler på innebygginger:
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>
Pin-kontrollprogram for Pinterest
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Kontrollprogram for Pinterest-tavle
<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>
Kontrollprogram for Pinterest-profil
<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 (responsivt)
<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>