Відображення вбудованих носіїв і вбудовування в MSN

Дізнайтеся, як правильно відобразити зображення, відео, покази слайдів і соціальні вбудовування у вміст статті за допомогою RSS-коду HTML і Media. У цьому посібнику описано підтримувані теги, метадані та практичні поради з форматування, щоб забезпечити плавне відтворення в MSN.

У цій статті

Рекомендації щодо HTML

Дозволені ТЕГИ HTML

Обмежені HTML-теги

Зображення

Відображення зображень із вбудованим HTML-кодом

Відображення зображень за допомогою rss-каналу мультимедіа

Відео

Пов’язані посилання

Слайдшоу

Вбудовування соціальних мереж

Рекомендації щодо HTML

За допомогою HTML можна вказати основне поле статті або поле опису зображення слайда під час показу слайдів. Це заборонено в жодному іншому полі. Під час використання HTML-коду слід пам'ятати про кілька загальних рекомендацій.

• Служби Microsoft Ingestion завжди видалятимуть заборонені теги. Вміст позначок і дочірні елементи також можуть бути видалені.
• Служби Microsoft Ingestion можуть очищати HTML від елементів, що може вплинути на можливості рендерінгу, наприклад вбудовані стилі.
• Рекомендовано, щоб видавці просимізували ієрархію HTML і уникають глибоко пов'язаних ієрархій за межами 10 рівнів.
• Уникайте використання кількох послідовних <тегів br> . <розриви рядків 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>, <iframeable> only for video and supported social embeds.

Обмежені 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> або <тегів рисунків> , воно автоматично зберігає його розташування в тексті. В іншому разі, якщо ви використовуєте <media:content>, ваше зображення може бути розміщено в розташуванні, автоматично вибраному Службами Ingestion. Якщо тег має URL-адресу "src", яка відповідає URL-адресі <елемента media:content> , зображення буде надіслано лише один раз і буде розташовано там, де розміщено тег img.

Зображення на початку

Ви можете повідомити про те, що певне зображення можна використовувати як рекомендоване зображення в промо-картці, додавши до тегу <img> class="type:primaryImage".

<img src="http://contoso.com/image.jpg" class="type:primaryImage">

Відображення зображень із вбудованим HTML-кодом

<теги img>

Ви можете вказати додаткові метадані, <якщо використовується тег img> у вмісті HTML елемента каналу. Якщо метадані надаються для однієї URL-адреси зображення як в межах рядка, так і за допомогою RSS-тегів мультимедіа, <метадані media:content> завжди матимуть вищий пріоритет.

Ви можете розмістити всі метадані зображення в тексті HTML, використовуючи дані-*атрибути, як у наведеному нижче прикладі:

<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 cannot be specified inside article's body. Їх потрібно вказати як безпосередні дочірні елементи кореневого елемента (<елемент> у 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 завантажували та зберегли файл на серверах MSN. Відео 1PP буде відображено за допомогою програвача MSN Відео.

Відео 3PP: Відео 3PP відтворюється на програвачі, що відповідає конкретному постачальнику (наприклад, YouTube, DailyMotion тощо)

Відображення відео з HTML-кодом

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>

3PP

YouTube – єдиний програвач 3PP, який підтримується за допомогою <елемента iframe> .

<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true"  src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>

Відображення відео за допомогою rss-каналу мультимедіа

Щоб вбудувати медіавміст за допомогою rss-каналу <media:content> Media, елементи та <media:group> елементи слід розміщувати поза текстом HTML і додавати як безпосередніх дочірніх<item> елементів елемента (RSS) або <entry> (ATOM). Ці позначки не можна обтікати або комбінувати з HTML-вмістом у вмісті статті (наприклад, у межах <content:encoded>), інакше вони ігноруватимуться під час повертання.

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. Зараз підтримується лише 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-каналах. Це пов'язано з тим, що відео не може легко й негайно витягнути з цих посилань, оскільки вони "закриті".

Пов’язані посилання

Модуль "більше від постачальника" - це можливість для брендів відобразити три посилання на вміст на сторінках статті та галереї, які посилаться на власний веб-сайт бренду.

Існує два способи вибрати, які три посилання відображаються в цьому модулі:

1. Автоматично заповнюйте найновіші статті – корпорація Майкрософт відображатиме посилання на найновіші історії, які вона входить до числа каналів, наданих від вашого бренду. Ми використовуємо канонічне посилання за замовчуванням, але якщо цього не передбачено, корпорація Майкрософт не відображатиме це посилання.
2. Надати пов'язані посилання зі статтею – див. нижче приклади того, як це зробити. Якщо цей параметр вибрано, потрібно вказати принаймні три пов'язані посилання з кожним елементом вмісту в каналі.

Пов'язані посилання можна додавати як дочірні елементи до елементів каналу кореневого рівня (статей і колекцій). Як правило, видавці повинні вказати принаймні 3 посилання, щоб вони відображалися в розділі "Пов'язані" в 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 class="Gallery"> як контейнер серії елементів рисунка<>.

<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> як дочірній <елемент елемента> , з яким потрібно вбудувати показ слайдів.

Inline Media RSS Slideshows place within the article is decided by the Ingestion Services. Якщо потрібно розмістити показ слайдів у певному розташуванні, використовуйте натомість 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
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• Процвітати
• Карти Google
• Giphy
• Reddit
• TikTok (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>&mdash; 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&nbsp;<a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a>    </blockquote></div>

Instagram

<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

<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>  

Infogram (адаптивна)

<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>

Цвітіння (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>

Reddit

<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 (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>​​​​​​​