Tekstisiseste meediumide ja manustamiste kuvamine MSN-is
Siit saate teada, kuidas HTML-i ja Meediumi RSS-i abil õigesti kuvada artikli sisus pilte, videoid, slaidiseansse ja sotsiaalseid manustamisi. Selles juhendis antakse ülevaade toetatud siltidest, metaandmetest ja vormingu headest tavadest, et tagada MSN-is sujuv renderdamine.
Selle artikli teemad
Kuva pildid tekstisisese HTML-iga
Piltide kuvamine meediumi RSS-iga
HTML-i juhised
HTML-i saab kasutada artikli kehavälja või slaidiseansi slaidipildi kirjelduse välja määramiseks. See pole ühelgi teisel väljal lubatud. HTML-i kasutamisel tuleb silmas pidada mõningaid üldisi juhiseid.
- Microsoft Ingestion Services eemaldab alati keelatud sildid. Samuti võidakse eemaldada sildi sisu ja lapsed.
- Microsoft Ingestion Services võib HTML-i puhastada elementidest, mis võivad mõjutada renderdamisfunktsioone (nt tekstisiseseid laade).
- Soovitatav on, et avaldajad hoiaks HTML-hierarhia lihtsana ja väldiks sügavalt lingitud hierarhiaid üle 10 taseme.
- Vältige mitme järjestikuse <br-sildi> kasutamist. < > Dokumendi lõpust eemaldatakse reapiirid.
- <Iframe> , mida kasutatakse mis tahes eesmärgil, mida selles dokumendis selgesõnaliselt ei mainita, eemaldatakse.
Lubatud HTML-sildid
Need sildid on lubatud artikli sisus:
- Fondi laad<b>, <i>, <em>, <tugev>
- Fondi suurus<sub>, <sup>, <small>
- Pealkirjad<h1>, <h2>, <h3>, <h4>, <h5>
- Lingid<a> - href-väärtused peaksid eelistatavalt kasutama HTTPS-i, HTTP-i ja mailtot:
- Pilte<Img>
- Tabelid<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
- Loetletakse<ol>, <ul>, <li>
- Rühmitamine<span>, <div>, <p>, <br>
- Manustab<blockquote>, <iframe> aktsepteeritav ainult video ja toetatud suhtlusmanuste jaoks.
Märkus.
Üldiselt eemaldatakse atribuudid kõigist elementidest, v.a juhul, kui neid kasutavad põhifunktsioonid nagu href <a> ja src in <img>.
Piiratud HTML-sildid
Järgmised sildid eemaldatakse alati sissetulevate artiklite sisust ja nende tulemuseks võib olla sisu hülgamine:
- <laad>
- <Skripti>
- <objekt>
- <Param>
- <Applet>
- <manustamine>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Joonis>
- <meedia>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...">GIPHY</a kaudu>
Pildid
Pildi paigutus
Kui lisate artikli HTML-kehasse pildi img> või <joonise> siltide abil<, säilitab see automaatselt selle asukoha kehas. Muul juhul, kui kasutate <meediumisisu:sisu>, võidakse teie pilt paigutada asukohta, mille allaneelamisteenused on automaatselt valinud. Kui sildil on "src" URL, mis vastab elemendi media:content> URL-ile<, laaditakse pilt alla ainult üks kord ja see asub img sildi asukohas.
Alguspilt
Kui soovite teada anda, et konkreetset pilti saab kasutada sooduskaardil esiletõstetud pildina, lisage img> sildile <class="type:primaryImage" (tüüp:primaryImage).
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Kuva pildid tekstisisese HTML-iga
<img> sildid
Kui kasutate <kanaliüksuse HTML-kehas img> silti, saate lisada täiendavaid metaandmeid. Kui sama pildi URL-i jaoks on nii tekstisiseselt kui ka meediumi RSS-siltide kasutamisel esitatud metaandmed, <alistab meediumi:sisu> metaandmed alati.
Kui soovite kõik pildi metaandmed HTML-i sisse paigutada, saate kasutada atribuudid data-*, nagu järgmises näites.
<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
Samuti võite img> sildi asustada <valikuliste parameetritega nagu eelmises näites.
<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>
Piltide kuvamine meediumi RSS-iga
Soovitatav viis pildi metaandmete lisamiseks on kasutada elemendi Media RSS <media:content> pildi metaandmete määramiseks. Vaikimisi paigutatakse pilt artikli algusse.
<media:sisuelemente> ei saa määrata artikli sisuosas. Need tuleb määrata juurüksuse elemendi< (RSS-i üksus> või <Atom-kirje)> vahetuteks tütarüksusteks.
<!-- 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>
Videod
MSN toetab First-Party Playeri (1PP) ja muude tootjate Playeri (3PP) konfiguratsioone.
1PP videod: Selle stsenaariumi korral peab videofaili URL olema esitatud nii, et Microsoft Ingestion Services laadib faili alla ja salvestab MSN-i serveritesse. 1PP-videod renderdatakse MSN-i videod Playeri abil.
3PP videod: 3PP-videoid esitatakse pakkujakohasel mängijal (nt YouTube, DailyMotion jne).
Kuva video HTML-vormingus
1PP
Tekstisisese video väljendamiseks saate kasutada <video> HTML-silti.
<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 on ainus 3PP-mängija, mida toetatakse iframe-elemendi> abil<.
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
NB!
YouTube'i poolel tehtud hiljutiste platvormimuudatuste tõttu ei saa MSN praegu YouTube'i manustamist modereerida. Selle tulemusena lükatakse alla laadimise ajal tagasi kõik kanalite või artikli HTML-i kaudu edastatud YouTube'i 3PP-videod. See probleem mõjutab väikest osa globaalsest sisust, kuid partnerid peaksid hoiduma YouTube'i manustamise kasutamisest kuni edasise teatamiseni. Värskendame neid juhiseid, kui tugi on taastatud.
Video kuvamine meediumi RSS-iga
Meediumifailide manustamiseks Meediumi RSS-i <media:content> abil tuleb need ja <media:group> elemendid paigutada html-kehast väljapoole ja lisada elemendi (RSS) või <entry> (ATOM) koheste lastena<item>. Neid silte ei saa mähkida artikli sisus oleva HTML-sisuga (nt <content:encoded>sees ), ega neid eiratakse allaneelamise ajal.
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>
Muu
Toetatud 3PP-videopleierid tuleb määrata väljaandja kaubamärgi kasutuselevõtul. Nende toetatud 3PP-videopleierite jaoks peate esitama kõigi 3PP-videote GUID-elemendi> kaudu <kordumatu videoidentifikaatori.
<!-- 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>
Subtiitrid videol
Elemendi media:subtitle> abil <saate luua W3C ajastatud teksti vormingul põhineva välise timed Text-vormingu faili. Praegu toetatakse ainult 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>
Toetatud lingid
Videofailid tuleb salvestada kinnitatud vormingus (nt MP4-failina). Files on lubatud, kui need on pärit teie veebisaidilt või on majutatud mõnes serveris (nt AWS- is).
Toetuseta lingid
RSS-kanalid ei toeta Dropboxi linke, YouTube'i linke jne. Seda seetõttu, et video ei saa neid linke kerge vaevaga ega kohe tõmmata, kuna need on "väravastatud".
Seotud lingid
Moodul "rohkem pakkujalt" annab brändidele võimaluse kuvada artikli- ja galeriilehtedel kolm sisulinki, mis lingivad brändi enda veebisaidile.
Selles moodulis kuvatavate kolme lingi valimiseks on kaks võimalust.
- Asustage automaatselt kõige uuemad artiklid – Microsoft kuvab lingid uusimatele lugudele, mille see on teie kaubamärgist tarnitud kanalite hulgast alla laaditud. Kasutame vaikimisi kanoonilist linki, kuid kui seda ei kuvata, siis Microsoft seda linki ei kuva.
- Lisage artikliga seotud lingid – selle kohta leiate näiteid altpoolt. Kui see suvand on valitud, peate kanali iga sisuüksusega lisama vähemalt kolm seotud linki.
Seostuvaid linke saab lisada juurtaseme kanaliüksustele (artiklitele ja galeriidele) tütarelementidena. Üldiselt peavad väljaandjad esitama vähemalt 3 linki, et need kuvada msn-is "seotud" jaotises.
Kõik seotud ja tekstisisesed lingid peaksid eelistatavalt kasutama HTTPS-skeemi.
Atom-is määramiseks saavad avaldajad elementi kasutada. Pärast Atom-nimeruumi deklareerimist peavad nad kasutama RSS-is sama elementi. Lisaks, kuna pisipilt on nõutav, saate kombineerida <meediumi:> elemendid, nagu on näidatud järgmises näites:
<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>
Pilt
Tekstisisese slaidiseansi saate lisada artikli sisu HTML-i kindlasse asukohta, kasutades jooniselementide sarja <ümbrisena spetsiaalset koostet <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>
Slaidiseansside kuvamine meediumi RSS-iga
Tekstisisese slaidiseansi lisamiseks kasutage <elementi meedium:rühm> üksuse tütarüksusena<>, millega soovite slaidiseansi manustada.
Tekstisisese meediumi RSS-i slaidiseansside koha artiklis otsustab ingestion Services. Kui soovite slaidiseansid paigutada kindlasse kohta, kasutage selle asemel HTML-i.
<!-- 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>
Sotsiaalmeedia manustamised
Artikli HTML-sisusse saab lisada järgmisi suhtluse manustamisi.
- X
- Infogram
- Spotify
- Areneda
- Google Maps
- Giphy
- TikTok
Saate kasutada standardset manustamiskoodi, mida iga sotsiaalteenuse osutaja soovitab, veendumaks, et manustamine on artiklis säilitatud.
Kõik sotsiaalse manustamise allikatele osutavad URL-id peavad olema rangelt https-aadressid või muidu lükatakse need tagasi.
Siin on mõned näite manustamised.
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>
Pinterest pin widget
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Pinteresti tahvli vidin
<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>
Pinteresti profiilividin
<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>
Infogramm (reageeriv)
<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>
Infogramm (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>
Õitsemine (sukeldumine)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Õitsemine (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>
<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>