Kako prikazati umetnute medijske sadržaje i ugrađivanja na MSN-u
Saznajte kako pravilno prikazati slike, videozapise, dijaprojekcije i društvene ugrađivanja unutar tijela članka pomoću HTML-a i MEDIJSKOG RSS-a. U ovom se vodiču opisuju podržane oznake, metapodaci i najbolje prakse oblikovanja da bi se osiguralo besprijekorno renderiranje na servisu MSN.
Sadržaj članka
Prikaz slika s umetnutim HTML-om
Prikaz slika s medijskim RSS-om
HTML smjernice
HTML se može koristiti za određivanje polja tijela članka ili polja opisa slike slajda u dijaprojecij. Nije dopušteno ni u jednom drugom polju. Postoji nekoliko općenitih smjernica koje treba imati na umu prilikom korištenja HTML-a:
- Microsoftovi servisi za unos uvijek uklanjaju oznake koje nisu dopuštene. Sadržaj oznake i podređeni sadržaj mogu se ukloniti.
- Microsoft Ingestion Services može očistiti HTML iz elemenata koji bi mogli utjecati na okruženja za renderiranje, kao što su umetnuti stilovi.
- Preporučuje se da izdavači jednostavne HTML hijerarhije i izbjegavaju duboko povezane hijerarhije iznad 10 razina.
- Izbjegavajte korištenje više uzastopnih <oznaka br> . <br> prijelomi redaka na kraju dokumenta bit će uklonjeni.
- <iframe> koji se koristi u bilo koju svrhu koja nije izričito spomenuta u ovom dokumentu bit će uklonjen.
Dopuštene HTML oznake
Te su oznake dopuštene unutar tijela članka:
- Stil fonta<b>, <i>, <em>, <strong>
- Veličina fonta<sub>, <sup>, <small>
- Naslove<h1>, <h2>, <h3>, <h4>, <h5>
- Linkovi<a> - href vrijednosti bi po mogućnosti trebale koristiti HTTPS, HTTP i mailto:
- Slike<Img>
- Tablice<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
- Popis<ol>, <ul>, <li>
- Grupiranje<span>, <div>, <p>, <br>
- Ulaže<blockquote>, <iframe prihvatljiv> samo za videozapise i podržane društvene ugrađivanja.
Napomena
Općenito, atributi će se ukloniti iz svih elemenata, osim ako ih koriste temeljne značajke kao što su href u <i> src u <img>.
Ograničene HTML oznake
Sljedeće će oznake uvijek biti skinute s tijela dolaznih članaka i mogu rezultirati odbijanjima sadržaja:
- <stil>
- <Skripta>
- <objekt>
- <odlomak>
- <Apleta>
- <ugradnja>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Slika>
- <medij>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>putem GIPHY</a>
Slike
Položaj slike
Ako dodate sliku u HTML <tijelo članka pomoću oznake img><> ili slika, ona automatski čuva svoje mjesto unutar tijela. U suprotnom, ako koristite media <:content>, vaša će se slika možda smjestiti na mjesto koje će servisi za unos automatski odabrati. Ako oznaka ima URL "src" koji se podudara s URL-om <elementa media:content> , slika će se ingested samo jednom i nalazit će se na mjestu na kojem se nalazi oznaka img.
Početna slika
Unos možete obavijestiti da se određene slike mogu koristiti kao istaknute slike na promotivnoj kartici dodavanjem class="type:primaryImage" <u oznaku img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Prikaz slika s umetnutim HTML-om
<oznake za img>
Možete unijeti dodatne metapodatke kada koristite <oznaku img> unutar HTML tijela stavke sažetka sadržaja. Ako su metapodaci navedeni za isti URL slike i u istoj razini i za korištenje RSS oznaka za medijske sadržaje, <metapodaci medijskih sadržaja> uvijek će imati prednost.
Sve metapodatke slike možete postaviti u istoj razini unutar HTML-a iskorištavanjem atributa data-*kao u sljedećem primjeru:
<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>
<figure> tags
Oznaku img možete popuniti <i neobaveznim> parametrima kao prethodni primjer.
<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>
Prikaz slika s medijskim RSS-om
Preporučeni način dodavanja metapodataka slike jest korištenje medijskog RSS <medija:element sadržaja> za određivanje metapodataka slike. Slika će se po zadanom smjestiti na vrh članka.
<media:content> elements cannot bepecified inside article's body. Moraju se navesti kao podređeni element korijenske stavke (<>stavka u RSS-u ili unos <u> 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>
Videozapisi
MSN podržava First-Party playera (1PP) i drugih proizvođača (3PP).
1PP videozapisi: U tom se scenariju mora navesti URL videodatoteke da bi Microsoft Ingestion Services preuzimao i spremao datoteku na MSN poslužitelje. 1PP videozapisi prikazat će se pomoću MSN videozapisi Player.
3PP videozapisi: 3PP videozapisi reproduciraju se na reproduktoru određenom davatelju usluge (npr. YouTube, DailyMotion itd.)
Prikaz videozapisa s HTML-om
1PP (1PP)
Html oznaku videozapisa <možete> koristiti za prikaz umetnutog videozapisa.
<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 (3PP)
YouTube je jedini 3PP player koji je podržan pomoću elementa <iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Važno
Zbog nedavnih promjena platforme na strani Servisa YouTube MSN trenutno ne može moderirati ugrađivanja servisa YouTube. Zbog toga će se tijekom unosa svi videozapisi sa servisa YouTube 3PP poslani putem sažetaka sadržaja ili html-a članka odbaciti. Taj problem utječe na mali dio globalnog sadržaja, ali partneri bi trebali izbjegavati korištenje ugrađenih youTubea do daljnje obavijesti. Te ćemo smjernice ažurirati nakon obnavljanja podrške.
Prikaz videozapisa s medijskim RSS sadržajem
Da biste medijske sadržaje ugradili pomoću RSS-a medijskog sadržaja, <media:content><media:group> elementi moraju biti smješteni izvan HTML<item> tijela i dodati ih kao neposrednu podređenost elementa (RSS) ili <entry> (ATOM). Te oznake nije moguće omotati u HTML sadržaj ili ih kombinirati s HTML sadržajem unutar tijela članka (npr. <content:encoded>unutar ), ili će se zanemariti tijekom unosa.
1PP (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>
Drugo
Podržani 3PP videoreprojekti moraju biti navedeni kada se izdavačevi brand uvrsti. Za ove podržane 3PP videoreprojekte morate navesti jedinstveni identifikator videozapisa <putem guid> elementa za sve 3PP videozapise.
<!-- 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>
Titlovi na videozapisu
Pomoću elementa <media:subtitle možete> omogućiti vanjsku datoteku oblika teksta s vremenom utemeljenu na W3C obliku teksta s vremenom. Trenutno je podržan samo 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>
Podržane veze
Videodatoteke je potrebno spremiti u odobrenom obliku, kao što je MP4 datoteka. Files dopuštene su ako su s vašeg web-mjesta ili hostirane na poslužitelju kao što je AWS.
Nepodržane veze
Veze servisa Dropbox, veze sa servisa YouTube itd. nisu podržane u RSS sažecima sadržaja. To je zato što se videozapis ne može jednostavno ni odmah povući s tih veza jer su "zamušene".
Srodne veze
Modul "više od davatelja usluga" prilika je za prikaz triju veza sadržaja na stranicama članka i galerije, koje se odnose na vlastito web-mjesto robne marke.
Postoje dva načina za odlučivanje o tome koje su tri veze prikazane u ovom modulu:
- Automatski popunjava najnovije članke – Microsoft će prikazati veze na najnovije priče koje je ingested među sažecima sadržaja koje ste dobili od vaše robne marke. Po zadanom koristimo kanonski link, ali ako nije naveden, Microsoft neće prikazati ovu vezu.
- Navedite veze povezane s člankom – u nastavku potražite primjere kako to učiniti. Ako je odabrana ta mogućnost, morate navesti najmanje tri povezane veze sa svakom stavkom sadržaja u sažetku sadržaja.
Povezane veze mogu se dodati kao podređeni elementi u stavke sažetka sadržaja korijenske razine (članci i galerije). Izdavači obično moraju navesti najmanje 3 veze da bi se prikazivati u odjeljku "povezano" na msn-u.
Sve povezane i umetnute veze po mogućnosti bi trebale koristiti HTTPS shemu.
Da biste odredili u atomu, izdavači mogu jednostavno koristiti element. Oni također trebaju koristiti isti element u RSS nakon deklariranje Atom prostora za naziv. Osim toga, budući da je potrebna minijatura slike, možete kombinirati s medijskim sadržajima <:> elementima, kao što je prikazano u ovom primjeru:
<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>
Slideshows
Umetnutu dijaprojekciju možete dodati na određeno mjesto unutar HTML-a <<tijela članka korištenjem posebne konstrukcije div class="Gallery"> kao spremnika niza elemenata slike>.
<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>
Prikaz dijaprojekcija s medijskim RSS sadržajem
Da biste dodali dijaprojekciju u retku, <upotrijebite element <> media:group> kao podređeni element stavke čiju dijaprojekciju želite ugraditi.
Umetnute medijske RSS dijaprojekcije mjesto unutar članka odlučuje Ingestion Services. Ako dijaprojekcije morate postaviti na određeno mjesto, koristite 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>
Ugrađivanja društvenih mreža
Sljedeće društvene umetanja mogu se umetnuti unutar HTML tijela članka:
- X
- Infogram
- Spotify
- Cvjetati
- Google karte
- Giphy
- TikTok
Možete koristiti standardni kod za ugradnju koji preporučuje svaki davatelj usluga društvenih mreža da biste bili sigurni da je ugradnja sačuvana u članku.
Svi URL-ovi koji pokazuje na društvene izvore ugrađivanja moraju biti isključivo https ili će se na neki drugi način odbaciti.
Evo nekoliko primjera ugrađivanja:
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 pinterest pin
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widget ploče 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 profila 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 (responzivan)
<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>
Procvat (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Procvat (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Google karte
<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>