Kako se prikazuju umetnuti mediji i ugrađivanja na MSN-u
Saznajte kako da ispravno prikažete slike, video zapise, projekcije slajdova i društvene ugrađivanja u telo članka pomoću HTML i RSS-a medija. Ovaj vodič prikazuje najbolje prakse podržanih oznaka, metapodataka i oblikovanja kako bi se obezbedilo glatko vizuelizovanje na MSN-u.
U ovom članku
Prikaži slike sa umetnutim HTML-om
Prikaži slike sa RSS-om medija
HTML uputstva
HTML se može koristiti za navođenje polja tela članka ili polja za opis slike slajda u projekciji slajdova. Nije dozvoljeno ni u ovom drugom polju. Postoji nekoliko opštih smernica koje treba da imate na umu prilikom korišćenja HTML koda:
- Microsoft Ingestion Services će uvek uklanjati oznake koje nisu dozvoljene. Možda će biti uklonjen i sadržaj oznake i podređeni elementi.
- Microsoft Ingestion Services može da očisti HTML od elemenata koji mogu da utiču na iskustva prikazivanja, kao što su umetnuti stilovi.
- Preporučuje se da izdavači pojednostave HTML hijerarhiju i izbegnu duboko povezane hijerarhije na više od 10 nivoa.
- Izbegavajte korišćenje više uzastopnih <br> oznaka. <Br> prelomi redova na kraju dokumenta će biti uklonjeni.
- <iframe> korišćen u bilo koju svrhu koja nije izričito pomenuta u ovom dokumentu biće uklonjena.
Dozvoljene HTML oznake
Ove oznake su dozvoljene u telu članka:
- Stil fonta<b>, <i>, <em>, <strong>
- Veličina fonta<sub>, <sup>, <small>
- Naslove<h1>, <h2>, <h3>, <h4>, <h5>
- Veze<a> - href vrednosti bi po mogućstvu trebalo da koriste HTTPS, HTTP i mailto:
- Imidžis<img>
- Tabele<table>, <th>, <tr>, <td>, <thead>, <tbody>, tfoot>, <col>, <<caption>, <colgroup>
- < Listaol>, <ul>, <li>
- Grupisanje<span>, <div>, <p>, <br>
- Ugrađuje<blockquote>, <iframe> prihvatljiv samo za video i podržane društvene ugradnje.
Napomena
Atributi će obično biti uklonjeni iz svih elemenata osim ako ih ne koriste osnovne funkcije kao što su href u <> a i src <u img-u>.
Ograničene HTML oznake
Sledeće oznake će uvek biti uklonjene iz tela dolaznih članaka i mogu dovesti do odbacivanja sadržaja:
- <stil>
- <Skripte>
- <objekat>
- <param>
- <Aplet>
- <ugraditi>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <figure>
- <Media>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>putem GIPHY</a>
Slike
Položaj slike
Ako dodate sliku u HTML <telo članka pomoću img><> ili oznaka slika, on automatski čuva svoju lokaciju u okviru tela. U suprotnom, ako koristite <media:content>, vaša slika može biti postavljena na lokaciju koju automatski biraju Ingestion Services. Ako oznaka ima URL adresu "src" koja se podudara sa URL <adresom elementa media:content> , slika će se uneti samo jednom i nalaziće se na mestu gde je oznaka img postavljena.
Vodeća slika
Možete da obavestite ingestion da određena slika može da se koristi kao istaknuta slika na promo kartici tako što ćete dodati klasu="type:primaryImage" <oznaci img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Prikaži slike sa umetnutim HTML-om
<img> oznake
Možete da obezbedite dodatne metapodatke kada koristite img <oznaku> u okviru HTML tela stavke feeda. Ako su metapodaci obezbeđeni za istu URL adresu slike i u samom tekstu i za korišćenje MEDIJSKIH RSS oznaka, <> metapodaci sadržaja će uvek imati prednost.
Sve metapodatke slike možete da postavite u liniju unutar HTML koda tako što ćete iskoristiti atribute data-*kao u sledećem primeru:
<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 da popunite <opcionalnim> parametrima kao u prethodnom primeru.
<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>
Prikaži slike sa RSS-om medija
Preporučeni način dodavanja metapodataka slike jeste da koristite Media RSS <media:content> element da biste naveli metapodatke slike. Slika će podrazumevano biti postavljena na vrh članka.
<Media:content> elements nije moguće navesti u telu članka. Moraju biti navedeni kao neposredni podređeni element osnovne stavke (<stavka> u RSS-u ili stavka <> 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>
Video zapisi
MSN podržava First-Party Player (1PP) i konfiguracije nezavisnog plejera (3PP).
1PP video zapisi: U ovom scenariju, URL video datoteke mora biti obezbeđen tako da Microsoft Ingestion Services preuzme i uskladišti datoteku na MSN serverima. 1PP video zapisi će biti vizuelizovani pomoću MSN video zapisi Player.
3PP video zapisi: 3PP video zapisi se reprodukuju na plejeru specifičnom za dobavljača (npr. YouTube, DailyMotion itd.)
Prikaži video sa HTML kôdom
1PP
Video HTML oznaku možete <> da koristite da biste izrazili umetnuti video.
<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 je jedini 3PP plejer koji je podržan pomoću iframe <> elementa.
<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 promena platforme na youTube strani, MSN trenutno ne može da uredi YouTube ugradnje. Zbog toga će svi YouTube 3PP video zapisi prosleđeni putem feedova ili članka HTML biti odbačeni tokom ubacivanja. Ovaj problem utiče na mali deo globalnog sadržaja, ali partneri bi trebalo da izbegavaju korišćenje YouTube ugradnje do daljnjeg. Ažuriraćemo ovaj vodič kada se podrška vrati u prethodno stanje.
Prikazivanje video zapisa sa RSS-om medija
Da biste medije ugradili pomoću RSS-a medija, <media:content><media:group> elementi i elementi moraju biti postavljeni izvan HTML<item> tela i dodati kao neposredni podređeni elementi (RSS) <entry> ili (ATOM). Ove oznake nije moguće prelomiti ili kombinovati sa HTML sadržajem unutar tela članka (npr. <content:encoded>u okviru ) ili će biti zanemareni tokom unošanja.
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>
Ostalo
Podržani 3PP video plejeri moraju biti navedeni kada se brend izdavača uključi. Za ove podržane 3PP video plejere morate da obezbedite jedinstveni identifikator video <zapisa kroz guid> element za sve 3PP video zapise.
<!-- 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>
Pomoćni natpisi na video zapisu
Element media <:tittle> možete da koristite da biste obezbedili spoljnu datoteku formata vremenski definisanog teksta zasnovanu na formatu W3C vremenski definisanog teksta. 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
Video datoteke treba da budu sačuvane u odobrenom formatu, kao što je MP4 datoteka. Files su dozvoljene ako su sa vaše sopstvene veb lokacije ili hostovane na serveru kao što je AWS.
Nepodržane veze
Dropbox veze, YouTube veze itd., nisu podržane u RSS feedovima. To je zato što video ne može lako niti odmah da se povuče iz tih veza jer su "gated".
Srodne veze
Modul "više od dobavljača" predstavlja mogućnost za brendove da prikaže tri veze sadržaja na stranicama članka i galerije, koje su povezane sa sopstvenom veb lokacijom brenda.
Postoje dva načina da odlučite koje su tri veze prikazane u ovom modulu:
- Automatski popuni najnovije članke – Microsoft će prikazati veze ka najnovijim pričama koje je uneo među feedove koji su obezbeđeni od vašeg brenda. Podrazumevano koristimo kanonsku vezu, ali ako nije obezbeđena, Microsoft neće prikazati ovu vezu.
- Obezbedite srodne veze pomoću članka – pogledajte dolenavedene primere o tome kako to da uradite. Ako je ova opcija izabrana, morate da obezbedite najmanje tri povezane veze sa svakom stavkom sadržaja u feedu.
Srodne veze mogu da se dodaju kao podređeni elementi stavkama feeda osnovnog nivoa (članci i galerije). Izdavači obično moraju da navedu najmanje 3 veze da bi se pojavili u odeljku "srodno" u msn-u.
Sve povezane i umetnute veze po mogućstvu treba da koriste HTTPS šemu.
Da bi naveli u prikazu "Atom", izdavači mogu jednostavno da koriste element. Takođe treba da koriste isti element u RSS-u nakon što proglaše atom prostor za ime. Pored toga, pošto je sličica neophodna, <možete da kombinujete sa medijima:> elementima, kao što je prikazano u ovom primeru:
<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>
Projekcije slajdova
Umetnuu projekciju slajdova možete da dodate na određenu lokaciju u okviru HTML-a <><tela članka tako što ćete koristiti specijalnu konstrukciju div class="Gallery"> kao kontejner grupe elemenata slika.
<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>
Prikazivanje projekcija slajdova sa RSS-om medija
Da biste dodali umetnuti projekciju slajdova, <koristite element <> media:group> kao podređenu stavku u koju želite da ugradite projekciju slajdova.
Mesto za umetnute RSS projekcije slajdova u okviru članka odlučuje Ingestion Services. Ako je potrebno da postavite projekcije slajdova na određenu lokaciju, umesto toga 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>
Ugradnje društvenih medija
Sledeće društvene ugradnje mogu da se umetnu u HTML telo članka:
- X
- Infogram
- Spotify
- Cveta
- Google mape
- Giphy
- TikTok
Možete da koristite standardni kôd za ugradnju koji preporučuje svaki društveni dobavljač da biste se uverili da se ugradnja čuva u članku.
Svi URL-ovi koji upućuju na izvore društvenih ugrađivanja moraju strogo da budu https ili će na neki drugi način biti odbijeni.
Evo nekih primera ugradnje:
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>
Vidžet pinterest pin-a
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Vidžet Pinterest table
<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>
Vidžet Pinterest profila
<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 (odaziva se)
<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>
Ornamenti (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Ornamenti (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Google mape
<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>