Jak zobrazit vložená média a vložená média ve službě MSN
Naučte se správně zobrazovat obrázky, videa, prezentace a vložení do sociálních sítí v textu článku pomocí html a informačního kanálu RSS médií. Tato příručka popisuje doporučené osvědčené postupy pro podporované značky, metadata a formátování, které zajišťují bezproblémové vykreslování ve službě MSN.
V tomto článku
Zobrazení obrázků s vloženým kódem HTML
Zobrazení obrázků pomocí informačního kanálu RSS médií
Pokyny pro HTML
Html se dá použít k určení pole textu článku nebo pole popisu obrázku snímku v prezentaci. Není povolen v žádném jiném poli. Při používání HTML je potřeba mít na paměti několik obecných pokynů:
- Služba Microsoft Příjmu dat vždy odebere nepovolené značky. Obsah značky a podřízené položky mohou být také odebrány.
- Služby příjmu dat společnosti Microsoft mohou vyčistit html od prvků, které by mohly ovlivnit prostředí vykreslování, jako jsou vložené styly.
- Doporučujeme, aby vydavatelé udržovali hierarchii HTML jednoduchou a vyhnuli se hierarchii nad 10 úrovní.
- Nepoužívejte více po sobě jdoucích <značek br> . <Konce řádků br> na konci dokumentu budou odebrány.
- <Prvek iframe> použitý pro jakýkoli účel, který není explicitně uveden v tomto dokumentu, bude odebrán.
Povolené značky HTML
V textu článku jsou povolené tyto značky:
- Styl< písmab>, <i>, <em>, <strong>
- Velikost< písmasub>, <sup>, <small>
- Záhlaví<h1>, <h2>, <h3>, <h4>, <h5>
- Odkazy<a> - hodnoty href by měly přednostně používat HTTPS, HTTP a mailto:
- Obrázky<Img>
- Tabulky<table>, <th>, <tr>, <td>, <thead>, tbody>, <<tfoot>, <col>, <popis>, <colgroup>
- Výpis<ol>, <ul>, <li>
- Seskupení<span>, <div>, <p>, <br>
- Vloží<blockquote>, <iframe> je přijatelný pouze pro video a podporované sociální vložení.
Poznámka
Obecně platí, že atributy budou odebrány ze všech elementů, pokud je nepoužívají základní funkce, jako je href v <> a src v <img>.
Omezené značky HTML
Následující značky budou vždy odstraněny z textu příchozích článků a mohou vést k odmítnutí obsahu:
- <Styl>
- <Skript>
- <objekt>
- <Param>
- <Applet>
- <vložit>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Obrázek>
- <multimédia>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>prostřednictvím GIPHY</a>
Obrázky
Umístění obrázku
Pokud do textu HTML článku přidáte obrázek pomocí <značek img> nebo <figure> , automaticky se zachová jeho umístění v textu. V opačném případě, pokud použijete <media:content>, může být váš obrázek umístěn na místo, které automaticky zvolí služba příjmu dat. Pokud má značka adresu URL "src", která odpovídá adrese URL <prvku media:content> , obrázek se ingestuje pouze jednou a bude umístěn na místě, kde je umístěna značka img.
Úvodní obrázek
Příjem dat o tom, že konkrétní obrázek lze použít jako doporučený obrázek na propagační kartě, můžete informovat přidáním třídy class="type:primaryImage" do <značky img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Zobrazení obrázků s vloženým kódem HTML
<Značky img>
Při použití <značky img> v textu HTML položky informačního kanálu můžete zadat další metadata. Pokud jsou pro stejnou adresu URL obrázku k dispozici metadata vložená i pomocí značek RSS médií, <budou mít vždy přednost metadata media:content> .
Všechna metadata obrázku můžete umístit do kódu HTML pomocí atributů data-*jako v následujícím příkladu:
<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>
<značky figure>
Můžete také naplnit <značku img> volitelnými parametry jako v předchozím příkladu.
<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>
Zobrazení obrázků pomocí informačního kanálu RSS médií
Doporučeným způsobem přidání metadat obrázku je použití prvku Media RSS <media:content> k zadání metadat obrázku. Ve výchozím nastavení se obrázek umístí na začátek článku.
<prvky media:content> nelze zadat v textu článku. Musí být zadány jako bezprostřední podřízené položky elementu kořenové položky (<položka> v RSS nebo <položka> v Atomu).
<!-- 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>
Videa
Msn podporuje konfigurace First-Party Player (1PP) a Third-Party Player (3PP).
1PP videa: V tomto scénáři musí být zadaná adresa URL videosouboru, aby služba Microsoft Ingestion Services stáhla a uloží soubor na servery MSN. 1PP videa se budou vykreslovat pomocí MSN Video Playeru.
3PP videa: Videa 3PP se přehrávají na přehrávači specifickém pro konkrétního poskytovatele (např. YouTube, DailyMotion atd.).
Zobrazení videa s HTML
1PP
K vyjádření vloženého <videa můžete použít značku HTML videa> .
<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 je jediný přehrávač 3PP, který je podporován pomocí elementu <iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Důležité
Vzhledem k nedávným změnám platformy na straně YouTube nemůže služba MSN v současné době moderovat vkládání z YouTube. V důsledku toho budou všechna videa YouTube 3PP odeslaná prostřednictvím informačních kanálů nebo html článků během příjmu odmítnuta. Tento problém se týká malé části globálního obsahu, ale partneři by se měli až do odvolání vyhnout používání vkládání z YouTube. Po obnovení podpory tyto doprovodné materiály aktualizujeme.
Zobrazení videa s informačním kanálem RSS médií
Chcete-li vložit média pomocí informačního kanálu RSS média, <media:content> musí být prvky a <media:group> umístěny mimo text HTML a přidány jako bezprostřední podřízené položky elementu<item> (RSS) nebo <entry> (ATOM). Tyto značky nelze zabalit ani kombinovat s obsahem HTML v textu článku (např. v rámci <content:encoded>) nebo budou během příjmu ignorovány.
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>
Jiné
Při onboardingu značky vydavatele musí být zadány podporované přehrávače videa 3PP. U těchto podporovaných přehrávačů videa 3PP musíte pro všechna 3PP videa zadat jedinečný identifikátor videa prostřednictvím elementu <guid> .
<!-- 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>
Skryté titulky ve videu
Element media:subtitle> můžete použít <k poskytnutí externího souboru formátu Timed Text založeného na formátu W3C Timed Text. V současné době se podporuje pouze TTML 1.
<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>
Podporované odkazy
Videosoubory je potřeba uložit ve schváleném formátu, jako je například soubor MP4. Files jsou povolené, pokud jsou z vašeho vlastního webu nebo hostované na serveru, jako je AWS.
Nepodporované odkazy
V informačních kanálech RSS nejsou podporovány odkazy dropboxu, odkazy na YouTube atd. Je to proto, že video nemůže snadno nebo okamžitě vytáhnout z těchto odkazů, protože jsou 'gated'.
Související odkazy
Modul "více od poskytovatele" je příležitostí pro značky zobrazit tři odkazy na obsah na stránkách článků a galerie, které odkazují na vlastní web značky.
Existují dva způsoby, jak se rozhodnout, které tři odkazy se v tomto modulu zobrazí:
- Automaticky naplnit nejnovější články – Microsoft zobrazí odkazy na nejnovější příspěvky, které ingestoval mezi informačními kanály dodaných od vaší značky. Ve výchozím nastavení používáme kanonický odkaz, ale pokud není k dispozici, Microsoft tento odkaz nezobrazí.
- Zadejte související odkazy k článku – níže najdete příklady, jak to udělat. Pokud je tato možnost vybraná, musíte pro každou položku obsahu v informačním kanálu zadat alespoň tři související odkazy.
Související odkazy je možné přidat jako podřízené prvky k položkám kanálu kořenové úrovně (články a galerie). Obecně platí, že vydavatelé musí poskytnout alespoň 3 odkazy, aby se zobrazily v části "související" v msn.
Všechny související a vložené odkazy by měly přednostně používat schéma HTTPS.
K zadání v Atomu můžou vydavatelé jednoduše použít element . Po deklarování oboru názvů Atom musí také použít stejný prvek v rss. Vzhledem k tomu, že se vyžaduje miniatura, můžete navíc zkombinovat s <prvky media:> , jak je znázorněno v tomto příkladu:
<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>
Prezentace
Vloženou prezentaci můžete přidat do konkrétního umístění v html textu článku pomocí speciálního konstruktoru <div class="Gallery"> jako kontejneru řady prvků obrázku<>.
<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>
Zobrazení prezentací s informačním kanálem RSS médií
Pokud chcete přidat vloženou prezentaci, použijte <element media:group> jako podřízený <prvek položky> , do které chcete prezentaci vložit.
O umístění vložených mediálních prezentací RSS v článku rozhoduje služba příjmu dat. Pokud potřebujete prezentace umístit na konkrétní místo, použijte místo toho 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>
Vložení sociálních médií
Do textu HTML článku je možné vložit následující vložení do sociálních sítí:
- X
- Infogram
- Spotify
- Vzkvétat
- Mapy Google
- Giphy
- TikTok
Můžete použít standardní kód pro vložení doporučený jednotlivými poskytovateli sociálních sítí, abyste měli jistotu, že se vložení v článku zachová.
Všechny adresy URL odkazující na zdroje pro vložení na sociálních sítích musí být výhradně https, jinak budou odmítnuty.
Tady je několik příkladů vložení:
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 pro připnutí pinterestu
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widget tabule Pinterestu
<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>
Widget profilu Pinterestu
<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 (responzivní)
<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>
Vzkvétat (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Vzkvétat (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Mapy Google
<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>