Prikaz predstavnosti v vrstici in vdelave v MSN
Naučite se pravilno prikazati slike, videoposnetke, diaprojekcije in družabne vdelave v telesu članka z viri HTML in RSS za predstavnost. V tem vodniku so orisne podprte oznake, metapodatki in najboljše prakse oblikovanja za zagotavljanje nemotenega upodabljanja v storitvi MSN.
V tem članku
Prikaz slik s htmlom v vrstici
Prikaz slik z RSS-jem predstavnosti
Smernice HTML
HTML lahko uporabite za določanje telesa polja članka ali polja z opisom slike diapozitiva v diaprojekciji. Polje ni dovoljeno v katerem koli drugem polju. Pri uporabi HTML-ja morate upoštevati nekaj splošnih navodil:
- Storitve Microsoft Ingestion Services bodo vedno odstranile oznake, ki niso več na voljo. Morda bodo odstranjeni tudi vsebina oznak in otroci.
- Storitve Microsoft Ingestion Services lahko počistijo HTML iz elementov, ki lahko vplivajo na izkušnje upodabljanja, kot so slogi v vrstici.
- Priporočljivo je, da založniki ohranijo hierarhijo HTML preprost in se izognejo globoko povezanim hierarhijam, ki presegajo 10 ravni.
- Izogibajte se uporabi več zaporednih <oznak BR> . <br> line breaks at the end of document will be removed.
- <iframe> , ki se uporablja za kateri koli namen, ki ni izrecno omenjen v tem dokumentu, bo odstranjen.
Dovoljene oznake HTML
Te oznake so dovoljene v telesu članka:
- Slog pisave<b>, <i>, <em>, <strong>
- Velikost pisave<sub>, <sup>, <small>
- Naslovi<h1>, <h2>, <h3>, <h4>, <h5>
- Povezave<a> - href vrednosti morajo po možnosti uporabiti HTTPS, HTTP in mailto:
- Slike<Img>
- Tabele<table>, <th>, <tr>, <td>, <thead>, tbody, <<tfoot>>, <col>, <caption>, <colgroup>
- Seznam<ol>, <ul>, <li>
- Združevanje<span>, <div>, <p>, <br>
- Vdela<blockquote>, <iframe only acceptable> for video and supported social embeds.
Opomba
Na splošno, atributi bodo odstranjeni iz vseh elementov, razen če jih uporabljajo temeljne značilnosti, kot so href v in <> src v <img>.
Omejene oznake HTML
Te oznake bodo vedno izbrisane iz telesa dohodnih člankov in lahko vrnejo vsebino:
- <slog>
- <Skript>
- <predmet>
- <param (param)>
- <Applet>
- <vdelaj>
- <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>
- <predstavnost>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>prek GIPHY</a>
Slike
Postavitev slike
Če dodate sliko v telo HTML <članka z uporabo img><> ali figure oznake, samodejno ohrani svojo lokacijo v telesu. Če uporabljate predstavnost <:vsebino, bo> vaša slika morda postavljena na mesto, ki ga storitev Ingestion Services samodejno izbere. Če ima oznaka URL »src«, ki se ujema z URL-jem <medija:> elementa vsebine, bo slika zaustavljena samo enkrat in bo na mestu, kjer je nameščena oznaka img.
Vodilna slika
S tem, ko v oznako img dodate class="type:primaryImage" <, lahko obvestite, da je določeno sliko mogoče uporabiti kot izpostavljeno sliko na promocijski> kartici.
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Prikaz slik s htmlom v vrstici
<img> tags
Dodatne metapodatke lahko podarite, ko uporabite <oznako img> v telesu HTML elementa vira. Če so metapodatki na voljo za isti URL slike v vrstici in za uporabo oznak RSS za predstavnost, <imajo predstavnost:> metapodatki vsebine vedno prednost.
Vse metapodatke slike lahko postavite v vrstico znotraj HTML-ja tako, da uporabite atribute data-*, kot je prikazano v tem 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
Prav tako lahko izpolnite img tag <> z neobveznimi parametri, kot je prejšnji primer.
<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 slik z RSS-jem predstavnosti
Priporočeni način dodajanja metapodatkov slike je, da uporabite predstavnostni element RSS <media:content> za določanje metapodatkov slike. Slika bo privzeto postavljena na vrh članka.
<predstavnost:elementov> vsebine ni mogoče določiti v telesu članka. Določiti jih je treba kot takojšnje podrejene elemente korenskega elementa (<>element v RSS-jih <ali vnos v> 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>
Videi
MSN podpira First-Party predvajalnika Player (1PP) in predvajalnika neodvisnih proizvajalcev (3PP).
Videoposnetki 1PP: V tem primeru morate navesti URL videodatoteke, da lahko storitve Microsoft Ingestion Services prenesejo in shranijo datoteko v strežnike MSN. Videoposnetki 1PP bodo upodobljeni s programom Videoposnetki MSN Player.
Videoposnetki 3PP: Videoposnetki 3PP se predvajajo v predvajalniku, specifičnem za ponudnika (na primer YouTube, DailyMotion itd.)
Prikaz videa s html-jem
1PP
Z oznako HTML videoposnetka <> lahko izrazite videoposnetek v vrstici.
<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 edini 3PP predvajalnik, ki je podprt z uporabo <elementa iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Pomembno
Zaradi nedavnih sprememb platforme na strani storitve YouTube MSN trenutno ne more moder število vdelav v YouTube. Posledično bodo vsi videoposnetki YouTube 3PP, poslani prek virov ali članka HTML, zavrnjeni med zaužitjem. Ta težava vpliva na majhen del globalne vsebine, vendar pa se morajo partnerji do nadaljnjega izogniti uporabi vdelav iz storitve YouTube. Ko bo podpora obnovljena, bomo posodobili ta navodila.
Prikaz videa z RSS-jem predstavnosti
Če želite vdelati predstavnost z viri RSS za predstavnost, <media:content><media:group> morajo biti elementi postavljeni zunaj telesa HTML<item> in dodani kot neposredni podrejeni elementi elementa (RSS) <entry> ali (ATOM). Teh oznak ni mogoče združiti z vsebino HTML v telesu članka (npr. <content:encoded>v ), saj bodo med zaužitjem prezrte.
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>
Drugi
Podprti predvajalniki videoposnetkov 3PP morajo biti določeni, ko je nameščena blagovna znamka izdajatelja. Za te podprte predvajalnike videoposnetkov 3PP morate zagotoviti enolični identifikator videoposnetka <prek elementa GUID> za vse videoposnetke 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>
Podnaslovi v videoposnetku
Z elementom predstavnost <:podnaslov> lahko zagotovite zunanjo datoteko v obliki zapisa časovno časovno oblikovanega besedila, ki temelji na obliki zapisa časovno zapisa za besedilo W3C. Trenutno je podprt le 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>
Podprte povezave
Videodatoteka mora biti shranjena v odobreni obliki zapisa, na primer v obliki zapisa MP4. Files so dovoljene, če so na vašem spletnem mestu ali pa gostujejo v strežniku, kot je AWS.
Nepodprte povezave
Povezave storitve Dropbox, povezave storitve YouTube itd., niso podprte v virih RSS. To je zato, ker video ne more enostavno niti takoj potegnite iz teh povezav, saj so "gledali".
Sorodne povezave
Modul »več ponudnikov« ponuja priložnost, da blagovne znamke prikažejo tri povezave do vsebine na straneh članka in galerije, ki imajo povezavo do lastnega spletnega mesta blagovne znamke.
Za odločanje, katere tri povezave so prikazane v tem modulu, lahko izberete dva načina:
- Samodejno izpolnite najnovejše članke – Microsoft bo prikazal povezave do najnovejših zgodb, ki jih je zaužijel med viri, ki jih je posredovala vaša blagovna znamka. Kanonično povezavo privzeto uporabljamo, če pa povezava ni na voljo, Microsoft te povezave ne bo prikazal.
- Povezave, povezane z dobavo, s člankom – v nadaljevanju si oglejte primere, kako to naredite. Če izberete to možnost, morate vnesti najmanj tri povezane povezave z vsakim elementom vsebine v viru.
Sorodne povezave lahko dodate kot podrejene elemente elementom vira na ravni korena (članki in galerije). Na splošno morajo založniki donesti najmanj 3 povezave, da so te prikazane v »sorodnem« odseku na msn.
Vse sorodne in povezave v vrstici bi morale po možnosti uporabljati shemo HTTPS.
Če želite v celici Atom določiti element, ga lahko preprosto uporabijo založniki. Isti element morajo uporabiti tudi v RSS-jih, ko deklarantijo imenski prostor Atom. Ker je zahtevana sličica, jo lahko kombinirate z predstavnostmi <:> elementi, kot je prikazano v tem 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>
Slideshows
Diaprojekcijo v vrstici lahko dodate na določeno mesto v telesu članka HTML <tako, da uporabite posebno konstrukt div class="Gallery"><kot vsebnik niza elementov 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 diaprojekcij z RSS-jem predstavnosti
Če želite dodati diaprojekcijo v vrstici, <uporabite element <> media:group> kot podrejeni element elementa, s katerim želite vdelati diaprojekcijo.
Inline Media RSS Slideshows place within the article is decided by the Ingestion Services. Če morate diaprojekcije postaviti na določeno mesto, uporabite 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>
Vdelave družabnih medijev
V telo HTML članka lahko vstavite te družabne vdelave:
- X
- Infogram
- Spotify
- Razcvet
- Google Zemljevidi
- Giphy
- TikTok
Uporabite lahko standardno vdelano kodo, ki jo priporoča vsak družabni ponudnik, da se prepričate, da je vdelava ohranjena v članku.
Vsi URL-ji, ki kažejo na družabne vdelane vire, morajo biti strogo https ali drugače zavrnjeni.
Tukaj je nekaj primerov vdelave:
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>
Pinterest board widget
<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 profile widget
<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 (odziven)
<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>
Cvetojša (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Razcvet (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Google Zemljevidi
<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>