Как да показвате вградена мултимедия и вграждане в MSN
Научете как правилно да показвате изображения, видеоклипове, слайдшоута и социални вграждания в тялото на статията, като използвате RSS за HTML и media. Това ръководство описва поддържаните етикети, метаданни и най-добри практики за форматиране, за да се гарантира гладко рендиране на MSN.
В тази статия
Показване на изображения с вграден HTML
Показване на изображения с RSS за мултимедия
HTML указания
HTML може да се използва, за да зададете полето на основния текст на статия или полето за описание на изображението на слайда в слайдшоу. То не е разрешено в никое друго поле. Има няколко общи насоки, които трябва да имате предвид, когато използвате HTML:
- Услугите за поглъщане на Microsoft винаги ще премахват забранените етикети. Съдържанието на етикетите и дъщерните елементи може също да бъдат премахнати.
- Услугите за поглъщане на Microsoft може да изчистят HTML от елементи, които могат да повлияят на възможностите за рендиране, като вградени стилове.
- Препоръчва се издателите да поддържат HTML йерархията проста и да избягват дълбоко свързани йерархии над 10 нива.
- Избягвайте използването на множество последователни <етикети за br> . <знаците> за нов ред в края на документа ще бъдат премахнати.
- <iframe,> използван за каквато и да е цел, която не е изрично посочена в този документ, ще бъде премахната.
Разрешени HTML етикети
Тези етикети са разрешени в основния текст на статията:
- Стил <на шрифтаb>, <i>, <em>, <strong>
- Размер на< шрифтаsub>, <sup>, <small>
- Заглавия<h1>, <h2>, <h3>, <h4>, <h5>
- Връзки<a> – href стойности за предпочитане трябва да използват HTTPS, HTTP и mailto:
- Изображения<Img>
- Таблици<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
- Списък<ol>, <ul>, <li>
- Групиране<span>, <div>, <p>, <br>
- Вгражда<blockquote>, <iframe> приемлива само за видео и поддържани социални вграждане.
Забележка
По принцип атрибутите ще бъдат премахнати от всички елементи, освен ако не се използват от основни функции, като href в <и> src в <img>.
Ограничени HTML етикети
Следните етикети винаги ще бъдат премахвани от основния текст на входящите статии и може да доведат до отхвърляне на съдържанието:
- <стил>
- <Скрипт>
- <обект>
- <парам>
- <Аплет>
- <вграждане>
- <media:content url='http://test.com/test.mp4">
- <media:content url='http://test.com/test.avi">
- <media:content url='http://test.com/test.wmv">
- <Фигура>
- <Медии>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>чрез GIPHY</a>
Изображения
Разполагане на изображение
Ако добавите изображение към HTML основния текст на статията с помощта на <етикети img> или <фигура> , то автоматично запазва местоположението му в основния текст. В противен случай, ако използвате <мултимедия:съдържание>, вашето изображение може да бъде поставено в местоположение, избрано автоматично от Услугите за поглъщане. Ако етикетът има URL адрес "src", който съответства на URL адреса на <елемент media:content> , изображението ще бъде погълнато само веднъж и ще бъде разположено там, където се поставя етикетът img.
Водещо изображение
Можете да информирате поглъщането, че определено изображение може да се използва като актуално изображение в промоционалната карта, като добавите class="type:primaryImage" към етикета <img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Показване на изображения с вграден HTML
<img> етикети
Можете да предоставите допълнителни метаданни, когато използвате етикет img <> в HTML тялото на елемента на канала. Ако метаданните са предоставени за един и същ URL адрес на изображение както вградени, така и с помощта на МУЛТИМЕДИЙНИ RSS етикети, <метаданните за мултимедия:съдържание> винаги ще имат приоритет.
Можете да поставите всички метаданни за изображения вградени в HTML, като използвате атрибутите data-*, както в следващия пример:
<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>
<етикети на фигури>
Можете също да попълните етикета <img> с незадължителни параметри като предишния пример.
<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>
Показване на изображения с RSS за мултимедия
Препоръчителният начин за добавяне на метаданни за изображение е да използвате елемента Media RSS <media:content> , за да зададете метаданни за изображението. По подразбиране изображението ще бъде поставено в горната част на статията.
<media:content> elements не могат да бъдат зададени в основния текст на статията. Те трябва да бъдат зададени като незабавни дъщерни елементи на коренния елемент (<елемент> в RSS или <запис> в 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>
Видеоклипове
MSN поддържа конфигурации на First-Party плейър (1PP) и на друг плейър (3PP).
1PP видеоклипове: В този случай трябва да бъде предоставен URL адрес на видеофайл, така че Microsoft Ingestion Services изтегля и съхранява файла на MSN сървъри. 1PP видеоклипове ще се рендират с помощта на Видеосъдържание на MSN Player.
3PP видеоклипове: 3PP-видеоклиповете се възпроизвеждат на специфичен за доставчика плейър (например YouTube, DailyMotion и т.н.)
Показване на видео с HTML
1.599 1.
Можете да използвате HTML етикета за <видео> , за да изразите вградено видео.
<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>
300 000 00
YouTube е единственият 3PP плейър, който се поддържа с помощта на <елемента iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Важно
Поради последните промени в платформата от страна на YouTube, MSN в момента не може да модерира вграждане на YouTube. В резултат на това всички видеоклипове от YouTube 3PP, подадени чрез информационни канали или статия, HTML ще бъдат отхвърлени по време на поглъщането. Този проблем засяга малка част от глобалното съдържание, но партньорите трябва да избягват използването на вграждане в YouTube до следващо известие. Ще актуализираме тези указания, след като поддръжката бъде възстановена.
Показване на видео с RSS за мултимедия
За да вградите мултимедия с помощта на MEDIA RSS, елементите <media:content> трябва <media:group> да бъдат поставени извън HTML основния текст и да се добавят като непосредствени дъщерни елементи на<item> елемента (RSS) или <entry> (ATOM). Тези етикети не могат да бъдат пренесени или комбинирани с HTML съдържание в тялото на статията (например в рамките на <content:encoded>) или ще бъдат игнорирани по време на поглъщането.
1.599 1.
<!-- 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>
Друго
Трябва да се зададат поддържани 3PP видеоплейъри, когато марката на издателя е включена. За тези поддържани видеоплейъри с 3PP трябва да предоставите уникален идентификатор на видеото <чрез GUID> елемента за всички 3PP видеоклипове.
<!-- 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>
Скрити надписи във видео
Можете да използвате <елемента media:subtitle> , за да предоставите файл във формат на външен текстов формат "Времева линия", базиран на формат W3C timed Text. В момента се поддържа само 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>
Поддържани връзки
Видеофайловете трябва да се запишат в одобрен формат, като например MP4 файл. Files са разрешени, ако са от вашия собствен уеб сайт или се хостват на сървър, като например AWS.
Неподдържани връзки
Връзките в Dropbox, връзките от YouTube и т.н., не се поддържат в RSS канали. Това е така, защото видеото не може лесно, нито незабавно да извлича тези връзки, тъй като те са "затворен".
Сродни връзки
Модулът "още от доставчик" е възможност марките да показват три връзки към съдържание на страниците на статията и галерията, които се свързват към собствения уеб сайт на марката.
Има два начина да решите кои три връзки да се показват в този модул:
- Автоматично попълване на най-новите статии – Microsoft ще покаже връзки към най-новите сюжети, които е погълнал сред информационните канали, предоставени от вашата марка. По подразбиране използваме каноничната връзка, но ако не е предоставена, Microsoft няма да покаже тази връзка.
- Връзки, свързани с доставка с статия – вижте по-долу за примери как да направите това. Ако тази опция е избрана, трябва да предоставите поне три свързани връзки с всеки елемент на съдържание в канала.
Свързаните връзки могат да бъдат добавяни като дъщерни елементи към елементите на канала на коренно ниво (статии и галерии). Обикновено издателите трябва да предоставят поне 3 връзки, за да се появят в секцията "related" в msn.
За предпочитане всички свързани и вградени връзки трябва да използват HTTPS схемата.
За да зададете в Atom, издателите могат просто да използват елемента. Те също така трябва да използват един и същ елемент в RSS след деклариране на пространството на имената Atom. Освен това, тъй като се изисква миниатюрно изображение, можете да комбинирате с <мултимедия:> елементи, както е показано в този пример:
<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>
Слайдшоу
Можете да добавите вградено слайдшоу към конкретно местоположение в HTML текста на статията, като използвате специален конструиран <div клас="Галерия"> като контейнер със серия от елементи на <фигура> .
<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>
Показване на слайдшоута с RSS за мултимедия
За да добавите вградено слайдшоу, използвайте <елемента media:group> като дъщерен елемент на <елемента, с който> искате да вградите слайдшоу.
Вградени мултимедийни RSS слайдшоута, намиращи се в статията, се определят от услугите за поглъщане. Ако трябва да поставите слайдшоутата на определено място, вместо това използвайте 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>
Вграждане на социални мрежи
Следните социални вграждания могат да бъдат вмъкнати в HTML основния текст на статията:
- X
- Infogram
- Spotify
- Процъфтяват
- Google Карти
- Giphy
- TikTok
Можете да използвате стандартния код за вграждане, препоръчван от всеки социален доставчик, за да се уверите, че вграждането се запазва в статията.
Всички URL адреси, сочещи към източници за вграждане на социални мрежи, трябва да бъдат https или по друг начин ще бъдат отхвърлени.
Ето някои примерни вграждания:
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 PIN
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Изпълним модул за табло на Pinterest
<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
<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>
Инфограма (адаптивна)
<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>
Инфограма (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>
С цветя (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
С цветя (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
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>