MSN'de satır içi medya ve eklemeleri görüntüleme

HTML ve Medya RSS kullanarak makalenizin gövdesinde resimleri, videoları, slayt gösterilerini ve sosyal eklemeleri düzgün bir şekilde görüntülemeyi öğrenin. Bu kılavuzda, MSN'de sorunsuz işleme sağlamak için desteklenen etiketler, meta veriler ve biçimlendirme en iyi yöntemleri özetlenmektedir.

Bu makalede

HTML yönergeleri

İzin verilen HTML etiketleri

Kısıtlanmış HTML etiketleri

Resimler

Resimleri satır içi HTML ile görüntüleme

Görüntüleri medya RSS ile görüntüleme

Videolar

İlgili bağlantılar

Slidesho

Sosyal medya eklemeleri

HTML yönergeleri

HTML, bir makalenin gövde alanını veya slayt gösterisindeki slayt resmi açıklama alanını belirtmek için kullanılabilir. Başka hiçbir alanda buna izin verilmez. HTML kullanırken göz önünde bulundurulması gereken birkaç genel yönerge vardır:

• Microsoft Alma Hizmetleri her zaman izin verilmeyen etiketleri kaldırır. Etiket içeriği ve alt öğeleri de kaldırılabilir.
• Microsoft Alma Hizmetleri, satır içi stiller gibi işleme deneyimlerini etkileyebilecek öğelerden HTML'yi temizleyebilirsiniz.
• Yayımcıların HTML hiyerarşisini basit tutmaları ve 10 düzeyin ötesinde derin bağlantılı hiyerarşilerden kaçınmaları önerilir.
• Ardışık <birden çok br> etiketi kullanmaktan kaçının. <Belgenin sonundaki br> satır sonları kaldırılır.
• <Bu belgede açıkça belirtilmeyen herhangi bir amaç için kullanılan iframe> kaldırılacaktır.

İzin verilen HTML etiketleri

Bu etiketlere makale gövdesinde izin verilir:

• Yazı tipi stili<b>, <i>, <em>, <strong>
• Yazı tipi boyutu<sub>, <sup>, <small>
• Başlık<h1>, <h2>, <h3>, <h4>, <h5>
• Bağlantı<a> - href değerleri tercihen HTTPS, HTTP ve mailto kullanmalıdır:
• Görüntü<ımg>
• Tablo<table>, <th>, tr>, <<td>, <thead>, tbody>, <tfoot>, <<col>, <başlık>, <colgroup>
• Liste<ol>, <ul>, <li>
• Grup -landırma<span>, <div>, <p>, <br>
• Gömer<blockquote>, <iframe> yalnızca video ve desteklenen sosyal eklemeler için kabul edilebilir.

Kısıtlanmış HTML etiketleri

Aşağıdaki etiketler her zaman gelen makalelerin gövdesinden çıkarılır ve içeriğin reddedilmesine neden olabilir:

• <stil>
• <Komut dosyası>
• <nesne>
• <param>
• <Uygulaması>
• <katıştırma>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <Şekil>
• <Medya>
• <div><a href='https://infogram.com' /></div>
• <a href='... GIPHY</a aracılığıyla giphy.com/gifs...'>>

Resimler

Görüntü yerleştirme

img> veya <şekil> etiketlerini kullanarak <makalenin HTML gövdesine bir resim eklerseniz, resim otomatik olarak gövde içindeki konumunu korur. Aksi takdirde media:content> kullanıyorsanız<, görüntünüz Alma Hizmetleri tarafından otomatik olarak seçilen bir konuma yerleştirilebilir. Bir etiketin media:content> öğesinin URL'si ile eşleşen bir "src" URL'si varsa, görüntü yalnızca bir <kez alınır ve img etiketinin yerleştirildiği konuma yerleştirilir.

Baştaki görüntü

img> etiketine class="type:primaryImage" <ekleyerek promosyon kartında öne çıkan görüntü olarak belirli bir görüntünün kullanılabileceğini alma işlemini bilgilendirebilirsiniz.

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

Resimleri satır içi HTML ile görüntüleme

<img> etiketleri

Akış öğesinin HTML gövdesinde <img> etiketini kullandığınızda ek meta veriler sağlayabilirsiniz. Aynı görüntü URL'si için hem satır içi hem de Media RSS etiketleri kullanılarak meta veriler sağlanırsa, <media:content> meta verileri her zaman öncelikli olur.

Aşağıdaki örnekte olduğu gibi data-*özniteliklerinden yararlanarak tüm görüntü meta verilerini HTML'nin içine satır içine yerleştirebilirsiniz:

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

<şekil> etiketleri

img> etiketini önceki örnek olarak isteğe bağlı parametrelerle de doldurabilirsiniz<.

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

Görüntüleri medya RSS ile görüntüleme

Görüntü meta verilerini eklemenin önerilen yolu, görüntü meta verilerini belirtmek için Media RSS <media:content> öğesini kullanmaktır. Varsayılan olarak, resim makalenin en üstüne yerleştirilir.

<media:content> öğeleri makalenin gövdesinde belirtilemez. Kök öğe öğesinin (<RSS'deki öğe> veya <Atom'daki girdi> ) hemen alt öğeleri olarak belirtilmelidir.

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

Videolar

MSN, First-Party Player (1PP) ve Üçüncü Taraf Oynatıcı (3PP) yapılandırmalarını destekler.

1PP videoları: Bu senaryoda, Microsoft Alma Hizmetleri'nin dosyayı MSN sunucularında indirmesi ve depolaması için video dosyası URL'si sağlanmalıdır. 1PP videoları MSN Video Player kullanılarak işlenir.

3PP videoları: 3PP videoları sağlayıcıya özgü bir oynatıcıda oynatılır (ör. YouTube, DailyMotion vb.)

HTML ile video görüntüleme

1PP

Satır içi videoyu <ifade etmek için video> HTML etiketini kullanabilirsiniz.

<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, iframe> öğesi kullanılarak <desteklenen tek 3PP oynatıcıdır.

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

Medya RSS ile video görüntüleme

Medya RSS <media:content> kullanarak medya eklemek için ve <media:group> öğeleri HTML gövdesinin dışına yerleştirilmeli ve (RSS) veya <entry> (ATOM) öğesinin<item> hemen alt öğeleri olarak eklenmelidir. Bu etiketler makale gövdesinde (örneğin, içinde <content:encoded>) HTML içeriğiyle sarmalanamaz veya birleştirilemez veya alım sırasında yoksayılır.

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>

Diğer

Yayımcının markası eklendiğinde desteklenen 3PP video oynatıcılar belirtilmelidir. Bu desteklenen 3PP video oynatıcılar için, tüm 3PP videoları için guid> öğesi aracılığıyla <benzersiz bir video tanımlayıcısı sağlamanız gerekir.

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

Videoda kapalı açıklamalı alt yazılar

W3C Zamanlanmış Metin biçimine dayalı bir dış Zamanlanmış Metin biçimi dosyası sağlamak için media:subtitle> öğesini kullanabilirsiniz<. Şu anda yalnızca TTML 1 desteklenmektedir.

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

Desteklenen bağlantılar

Video dosyalarının MP4 dosyası gibi onaylı bir biçimde kaydedilmesi gerekir. Files, kendi web sitenizden veya AWS gibi bir sunucuda barındırılıyorsa izin verilir.

Desteklenmeyen bağlantılar

Dropbox bağlantıları, YouTube bağlantıları vb. RSS akışlarında desteklenmez. Bunun nedeni, videonun 'geçitli' oldukları için bu bağlantıları kolayca veya hemen çekememesidir.

İlgili bağlantılar

"Sağlayıcıdan daha fazlası" modülü, markaların makale ve galeri sayfalarında markanın kendi web sitesine bağlantı veren üç içerik bağlantısı görüntülemesi için bir fırsattır.

Bu modülde hangi üç bağlantının gösterileceğini belirlemenin iki yolu vardır:

1. En son makaleleri otomatik olarak doldur – Microsoft, markanızdan sağlanan akışlar arasında aldığı en son hikayelerin bağlantılarını görüntüler. Kurallı bağlantıyı varsayılan olarak kullanırız, ancak sağlanmazsa Microsoft bu bağlantıyı görüntülemez.
2. Makaleyle ilgili bağlantılar sağlayın – bunun nasıl yapıldığını gösteren örnekler için aşağıya bakın. Bu seçenek belirlenirse, akıştaki her içerik öğesiyle en az üç ilgili bağlantı sağlamanız gerekir.

İlgili bağlantılar kök düzeyindeki akış öğelerine (makaleler ve Galeriler) alt öğe olarak eklenebilir. Genel olarak, yayımcıların msn'deki "ilgili" bölümünde görünmesi için en az 3 bağlantı sağlaması gerekir.

Tüm ilgili ve satır içi bağlantılar tercihen HTTPS şemasını kullanmalıdır.

Atom'da belirtmek için yayımcılar yalnızca öğesini kullanabilir. Ayrıca Atom ad alanını bildirdikten sonra RSS'de de aynı öğeyi kullanmaları gerekir. Ayrıca, küçük resim görüntüsü gerektiğinden, bu örnekte gösterildiği gibi medya:> öğelerle <birleştirebilirsiniz:

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

Slidesho

Bir dizi <şekil> öğesinin kapsayıcısı olarak özel bir yapı <div class="Gallery"> kullanarak makalenin gövde HTML'sindeki belirli bir konuma satır içi Slayt Gösterisi ekleyebilirsiniz.

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

Medya RSS ile slayt gösterilerini görüntüleme

Satır içi Slayt Gösterisi eklemek için media:group> öğesini Slayt Gösterisi'ni <eklemek istediğiniz öğenin alt öğesi> olarak kullanın<.

Makalenin içindeki Satır İçi Medya RSS Slayt Gösterileri, Alım Hizmetleri tarafından belirlenir. Slayt Gösterilerini belirli bir konuma yerleştirmeniz gerekiyorsa, bunun yerine HTML kullanın.

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

Sosyal medya eklemeleri

Aşağıdaki sosyal eklemeler bir makale HTML gövdesine eklenebilir:

• X
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• Güzelleşmek
• Google Maps
• Giphy
• Reddit
• TikTok

Eklemenin makalede korundığından emin olmak için her sosyal hizmet sağlayıcısı tarafından önerilen standart ekleme kodunu kullanabilirsiniz.

Sosyal ekleme kaynaklarına işaret eden tüm URL'ler kesinlikle https olmalıdır, aksi takdirde reddedilir.

Aşağıda bazı örnek eklemeler verilmiştir:

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 pin pencere öğesi

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

Pinterest panosu pencere öğesi

<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 profili pencere öğesi

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

Bilgi birimi (duyarlı)

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

Bilgi Birimi (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>

Gelişme (div)

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

Gelişme (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>​​​​​​​