Cara menampilkan media sebaris dan sematkan di MSN

Pelajari cara menampilkan gambar, video, peragaan slide, dan sematan sosial dalam isi artikel dengan benar menggunakan HTML dan RSS Media. Panduan ini menjelaskan praktik terbaik pemformatan, metadata, dan tag yang didukung untuk memastikan penyajian yang lancar di MSN.

Di artikel ini

Panduan HTML

Tag HTML yang diizinkan

Tag HTML terbatas

Gambar

Menampilkan gambar dengan HTML sebaris

Menampilkan gambar dengan RSS media

Video

Link terkait

Tayangan slide

Sematkan media sosial

Panduan HTML

HTML dapat digunakan untuk menentukan bidang isi artikel atau bidang deskripsi gambar slide dalam peragaan slide. Ini tidak diperbolehkan di bidang lain. Ada beberapa panduan umum yang perlu diingat saat menggunakan HTML:

• Layanan Pencernaan Microsoft akan selalu menghapus tag yang tidak diperbolehkan. Konten tag dan anak-anak mungkin juga dihapus.
• Layanan Pencernaan Microsoft dapat membersihkan HTML dari elemen yang dapat memengaruhi pengalaman penyajian seperti gaya sebaris.
• Disarankan agar penerbit menjaga hierarki HTML tetap sederhana dan menghindari hierarki yang sangat tertaut melebihi 10 tingkat.
• Hindari menggunakan beberapa tag br> berturut-turut<. <hentian baris br> di akhir dokumen akan dihapus.
• <iframe> yang digunakan untuk tujuan apa pun yang tidak secara eksplisit disebutkan dalam dokumen ini akan dihapus.

Tag HTML yang diizinkan

Tag ini diperbolehkan dalam isi artikel:

• Gaya< fontb>, <i>, <em>, <strong>
• Ukuran font<sub>, <sup>, <small>
• Judul<h1>, <h2>, <h3>, <h4>, <h5>
• Link<a> - nilai href sebaiknya gunakan HTTPS, HTTP, dan mailto:
• Gambar<Img>
• Tabel<tabel>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
• Daftar<ol>, <ul>, <li>
• Pengelompokan<span>, <div>, <p>, <br>
• Komprehensif<blockquote>, <iframe> hanya dapat diterima untuk video dan semat sosial yang didukung.

Tag HTML terbatas

Tag berikut akan selalu dilucuti dari isi artikel masuk dan dapat mengakibatkan konten ditolak:

• <gaya>
• <Script>
• <objek>
• <Param>
• <Applet>
• <sematkan>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <Gambar>
• <media>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>via GIPHY</a>

Gambar

Penempatan gambar

Jika Anda menambahkan gambar ke isi HTML artikel menggunakan <tag img> atau <gambar> , gambar secara otomatis mempertahankan lokasinya di dalam isi. Jika tidak, jika Anda menggunakan <media:konten>, gambar Anda mungkin ditempatkan di lokasi yang dipilih secara otomatis oleh Layanan Pencernaan. Jika tag memiliki URL "src" yang cocok dengan URL <elemen media:konten> , gambar hanya akan dicerna sekali dan akan ditempatkan di tempat tag img ditempatkan.

Gambar awal

Anda dapat menginformasikan penyerapan bahwa gambar tertentu dapat digunakan sebagai gambar unggulan dalam kartu promo dengan menambahkan class="type:primaryImage" ke <tag img> .

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

Menampilkan gambar dengan HTML sebaris

<tag img>

Anda dapat menyediakan metadata tambahan saat menggunakan <tag img> dalam isi HTML item umpan. Jika metadata disediakan untuk URL gambar yang sama baik sebaris maupun menggunakan tag RSS Media, <metadata media:konten> akan selalu diutamakan.

Anda dapat menempatkan semua metadata gambar sebaris dalam HTML dengan memanfaatkan atribut data-*seperti dalam contoh berikut:

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

<tag gambar>

Anda juga dapat mengisi <tag img> dengan parameter opsional sebagai contoh sebelumnya.

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

Menampilkan gambar dengan RSS media

Cara yang direkomendasikan untuk menambahkan metadata gambar adalah menggunakan elemen media RSS <media:konten> untuk menentukan metadata gambar. Secara default, gambar akan ditempatkan di bagian atas artikel.

<media:elemen konten> tidak dapat ditentukan di dalam isi artikel. Mereka harus ditentukan sebagai anak-anak langsung dari elemen item akar (<item> dalam RSS atau <entri> di 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>

Video

MSN mendukung konfigurasi First-Party Player (1PP) dan Pemain Pihak Ketiga (3PP).

Video 1PP: Dalam skenario ini, URL file video harus disediakan agar Microsoft Ingestion Services mengunduh dan menyimpan file di server MSN. Video 1PP akan dirender menggunakan MSN Video Player.

Video 3PP: Video 3PP diputar di pemutar khusus penyedia (misalnya YouTube, DailyMotion, dll.)

Menampilkan video dengan HTML

1PP

Anda dapat menggunakan <tag HTML video> untuk mengekspresikan video sebaris.

<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 adalah satu-satunya pemutar 3PP yang didukung menggunakan <elemen iframe> .

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

Menampilkan video dengan RSS media

Untuk menyematkan media menggunakan RSS Media, <media:content> elemen dan harus <media:group> ditempatkan di luar isi HTML dan ditambahkan sebagai turunan langsung elemen<item> (RSS) atau <entry> (ATOM). Tag ini tidak dapat dibungkus atau digabungkan dengan konten HTML di dalam isi artikel (misalnya, di dalam <content:encoded>), atau tag tersebut akan diabaikan selama penyerapan.

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>

Lainnya

Pemutar video 3PP yang didukung harus ditentukan ketika merek penerbit di-onboarding. Untuk pemutar video 3PP yang didukung ini, Anda harus menyediakan pengidentifikasi video unik melalui <elemen panduan> untuk semua video 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>

Teks tertutup pada video

Anda dapat menggunakan <elemen media:subjudul> untuk menyediakan file format Teks Berwaktu eksternal berdasarkan format Teks Berwaktu W3C. Hanya TTML 1 yang saat ini didukung.

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

Tautan yang didukung

File video perlu disimpan dalam format yang disetujui, seperti file MP4. Files diperbolehkan jika berasal dari situs web Anda sendiri atau dihosting di server seperti AWS.

Tautan yang tidak didukung

Tautan Dropbox, tautan YouTube, dll., tidak didukung di umpan RSS. Ini karena video tidak dapat dengan mudah atau langsung menarik dari tautan tersebut saat 'dipagari'.

Link terkait

Modul "more from provider" adalah kesempatan bagi merek untuk menampilkan tiga tautan konten di halaman artikel dan galeri, yang menautkan ke situs web merek sendiri.

Ada dua cara untuk memutuskan tiga tautan mana yang ditampilkan dalam modul ini:

1. Mengisi artikel terbaru secara otomatis – Microsoft akan menampilkan tautan ke cerita terbaru yang telah dicerna di antara umpan yang disediakan dari merek Anda. Kami menggunakan tautan kanonis secara default tetapi jika tidak disediakan, Microsoft tidak akan menampilkan tautan ini.
2. Masukkan tautan terkait dengan artikel - lihat di bawah ini untuk contoh tentang cara melakukan hal ini. Jika opsi ini dipilih, maka Anda harus memasukkan setidaknya tiga tautan terkait dengan setiap item konten dalam umpan.

Tautan terkait dapat ditambahkan sebagai elemen turunan ke item umpan tingkat akar (artikel dan Galeri). Umumnya, penerbit harus menyediakan setidaknya 3 tautan agar muncul di bagian "terkait" di msn.

Semua tautan terkait dan sebaris sebaiknya menggunakan skema HTTPS.

Untuk menentukan di Atom, penerbit cukup menggunakan elemen tersebut. Mereka juga perlu menggunakan elemen yang sama di RSS setelah mendeklarasikan ruang nama Atom. Selain itu, karena gambar mini diperlukan, Anda bisa menggabungkan dengan <media:> elemen, seperti yang diperlihatkan dalam contoh ini:

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

Tayangan slide

Anda dapat menambahkan Peragaan Slide sebaris ke lokasi tertentu dalam HTML isi artikel dengan menggunakan konstruksi <khusus div class="Gallery"> sebagai wadah dari serangkaian <elemen gambar> .

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

Menampilkan peragaan slide dengan RSS media

Untuk menambahkan peragaan Slide sebaris, gunakan <elemen media:grup> sebagai anak item <> yang ingin Anda sematkan peragaan Slide.

Inline Media RSS Slideshows place within the article is decided by the Ingestion Services. Jika Anda perlu menempatkan Peragaan Slide di lokasi tertentu, gunakan HTML sebagai gantinya.

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

Sematkan media sosial

Sematan sosial berikut ini bisa disisipkan dalam artikel isi HTML:

• X
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• Berkembang
• Google Maps
• Giphy
• Reddit
• TikTok

Anda dapat menggunakan kode semat standar yang direkomendasikan oleh setiap penyedia sosial untuk memastikan bahwa semat dipertahankan dalam artikel.

Semua URL yang mengarah ke sumber semat sosial harus benar-benar https atau sebaliknya akan ditolak.

Berikut adalah beberapa contoh semat:

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>

Widget pinterest pin

<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>  

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

Widget profil 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 (responsif)

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

Berkembang (div)

<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>

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

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

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