Uzziniet, kā pareizi parādīt attēlus, video, slaidrādes un sociālo tīklu ieguljumus sava raksta pamattekstā, izmantojot HTML un multivides RSS. Šajā rokasgrāmatā ir aprakstītas atbalstītās atzīmes, metadati un formatēšanas paraugprakse, lai nodrošinātu vienmērīgu atveidošanu pakalpojumā MSN.
Tēmas šajā rakstā
Attēlu rādīšana ar iekļautu HTML
Attēlu parādīšana ar multivides RSS
HTML vadlīnijas
HTML var izmantot, lai slaidrādē norādītu raksta pamatteksta lauku vai slaida attēla apraksta lauku. Tas nav atļauts nevienā citā laukā. Ir dažas vispārīgas vadlīnijas, kas jāpatur prātā, izmantojot HTML:
- Microsoft uzņemšanas pakalpojumi vienmēr noņems neatļautās atzīmes. Iespējams, tiks noņemts arī atzīmju saturs un bērni.
- Microsoft uzņemšanas pakalpojumi var notīrīt HTML no elementiem, kas var ietekmēt atveidošanas iespējas, piemēram, iekļautos stilus.
- Izdevējiem ieteicams ievērot vienkāršu HTML hierarhiju un izvairīties no dziļi saistītām hierarhijām ārpus 10 līmeņiem.
- Izvairieties no vairāku secīgu <br> tagu lietošanas. <Br> Rindiņu pārtraukumi dokumenta beigās tiks noņemti.
- <Iframe,> kas tiek izmantots jebkādiem mērķiem, kas nav skaidri minēti šajā dokumentā, tiks noņemti.
Atļautie HTML tagi
Šie tagi ir atļauti raksta pamattekstā:
- Fonta stils<b>, <i>, em>, <<strong>
- Fonta lielums<sub>, <sup>, <small>
- Virsraksti<h1>, <h2>, <h3>, <h4>, <h5>
- Saites<a> - href vērtībām vēlams izmantot HTTPS, HTTP un mailto:
- Attēli<img>
- Tabulas<>table, <th>, <tr>, <td>, <thead>, <tbody, <tfoot>>, <col>, <caption>, <col>
- Saraksts<OL>, <UL,>< LI>
- Grupēšana<>span, <div>, <p>, <br>
- Iegulšanas< gadījumiCitāta> bloks, <iframe> ir pieņemams tikai video un atbalstītiem sociālo tīklu ieguljumiem.
Piezīme
Parasti atribūti tiek noņemti no visiem elementiem, ja vien tos neizmanto pamatā esošie līdzekļi, piemēram, href in <a> un src in <img>.
Ierobežotie HTML tagi
Ienākošajiem rakstiem vienmēr tiks noņemti šādi tagi, kā rezultātā saturs var tikt noraidīts:
- <stils>
- <skripts>
- <objekts>
- <parametrs>
- <sīklietotne>
- <iegulšana>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <attēls>
- <multivide>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...">caur GIPHY/<a>
Attēli
Attēla novietojums
Ja jūs pievienojat attēlu raksta HTML pamattekstā, izmantojot <img> vai <attēla> tagus, tas automātiski saglabā savu atrašanās vietu pamattekstā. Pretējā gadījumā, ja izmantojat <media:content>, jūsu attēls var tikt novietots atrašanās vietā, ko automātiski izvēlas uzņemšanas pakalpojumi. Ja tagam ir "src" vietrādis URL, kas atbilst elementa <media:content> vietrādim URL, attēls tiks uzņemts tikai vienreiz un tiks novietots vietā, kur ir ievietots img tags.
Vadošais attēls
Varat informēt ingestion, ka konkrētu attēlu var izmantot kā piedāvāto attēlu reklāmas kartē, pievienojot img> tagam <class="type:primaryImage".
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Attēlu rādīšana ar iekļautu HTML
<img> tagi
Varat norādīt papildu metadatus, izmantojot img> tagu <plūsmas vienuma HTML pamattekstā. Ja vienam un tam pašam attēla vietrādim URL tiek nodrošināti metadati gan iekļautajā veidā, gan izmantojot multivides RSS tagus, <multivides:satura> metadati vienmēr ir prioritāri.
Visus attēlu metadatus varat ievietot iekļautā HTML failā, izmantojot data-*attributes, kā šajā piemērā:
<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
Varat arī aizpildīt img> tagu <ar neobligātiem parametriem, kā norādīts iepriekšējā piemērā.
<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>
Attēlu parādīšana ar multivides RSS
Ieteicamais attēla metadatu pievienošanas veids ir izmantot elementu multivides RSS <media:content> , lai norādītu attēla metadatus. Pēc noklusējuma attēls tiks novietots raksta augšpusē.
<multivide:satura> elementus nevar norādīt raksta pamattekstā. Tie ir jānorāda kā saknes elementa elementa tiešie bērni (<vienums> RSS vai <ieraksts> 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>
Video
MSN atbalsta First-Party atskaņotāja (1PP) un trešās puses atskaņotāja (3PP) konfigurācijas.
1PP videoklipi: Šādā gadījumā ir jānorāda video faila vietrādis URL, lai Microsoft uzņemšanas pakalpojumi lejupielādētu un saglabātu failu MSN serveros. 1PP video tiks renderēti, izmantojot MSN videoklipi atskaņotāju.
3PP videoklipi: 3PP video tiek atskaņoti konkrētā atskaņotājā (piemēram, YouTube, DailyMotion utt.)
Rādīt video ar HTML
1PP
Varat izmantot <video> HTML tagu, lai izteiktu iekļauto 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 ir vienīgais 3PP atskaņotājs, kas tiek atbalstīts, izmantojot iframe> elementu<.
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Svarīgi!
Sakarā ar nesenajām platformas izmaiņām pakalpojumā YouTube, MSN pašlaik nevar regulēt YouTube iegulšanu. Tā rezultātā visi YouTube 3PP videoklipi, kas iesniegti, izmantojot plūsmas vai raksta HTML, uzņemšanas laikā tiks noraidīti. Šī problēma ietekmē nelielu globālā satura daļu, taču partneriem līdz turpmākam paziņojumam vajadzētu izvairīties no YouTube iegulšanas izmantošanas. Kad atbalsts tiks atjaunots, mēs atjaunināsim šos norādījumus.
Video parādīšana ar multivides RSS
Lai iegultu multividi, izmantojot multivides RSS, elementi "un" <media:group> ir jānovieto <media:content>ārpus HTML pamatteksta un jāpievieno kā elementa <item> (RSS) vai <entry> (ATOM) tiešie bērni. Šos tagus nevar ietīt vai kombinēt ar HTML saturu raksta pamattekstā (piem., iekš <content:encoded>), vai arī tie tiks ignorēti uzņemšanas laikā.
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>
Citas
Atbalstītie 3PP video atskaņotāji ir jānorāda, kad tiek pievienots izdevēja zīmols. Šiem atbalstītajiem 3PP video atskaņotājiem ir jānorāda unikāls video identifikators, izmantojot <guid> elementu visiem 3PP video.
<!-- 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>
Slēptie titri video
Varat izmantot elementu media <:subtitle,> lai izveidotu ārēju noteikta laika teksta formāta failu, kura pamatā ir W3C laika teksta formāts. Pašlaik tiek atbalstīts tikai 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>
Atbalstītās saites
Video faili ir jāsaglabā apstiprinātā formātā, piemēram, MP4 failā. Files ir atļauti, ja tie ir no jūsu vietnes vai mitināti serverī, piemēram, AWS.
Neatbalstītas saites
RSS plūsmās netiek atbalstītas Dropbox saites, YouTube saites u.c. Tas ir tāpēc, ka video nevar viegli un uzreiz izvilkt no šīm saitēm, jo tās ir "slēgtas".
Saistītās saites
Modulis "vairāk no piegādātāja" ir iespēja zīmoliem rakstu un galeriju lapās parādīt trīs satura saites, kas norāda uz paša zīmola vietni.
Ir divi veidi, kā izlemt, kuras trīs saites tiek rādītas šajā modulī:
- Automātiski aizpildīt jaunākos rakstus — jūsu zīmola plūsmās Microsoft rādīs saites uz jaunākajiem rakstiem, ko tā ir uzņēmusi. Pēc noklusējuma mēs izmantojam kanonisko saiti, bet, ja tā nav nodrošināta, Microsoft šo saiti nerāda.
- Norādiet saistītās saites ar rakstu - skatiet zemāk piemērus par to, kā to izdarīt. Ja šī opcija ir atzīmēta, katram plūsmas satura vienumam ir jānorāda vismaz trīs saistītas saites.
Saistītās saites var pievienot saknes līmeņa plūsmas vienumiem (rakstiem un galerijām) kā bērnelementus. Parasti izdevējiem ir jāsniedz vismaz 3 saites, lai tie parādītos msn sadaļā "saistītie".
Visām saistītajām un iekļautajām saitēm vēlams izmantot HTTPS shēmu.
Lai norādītu Atom, izdevēji var vienkārši izmantot elementu. Viņiem arī jāizmanto tas pats elements RSS pēc Atom nosaukumvietas deklarēšanas. Turklāt, tā kā ir nepieciešams sīktēls, varat kombinēt ar <multivides> elementiem: elementiem, kā parādīts šajā piemērā:
<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>
Slaidrādes
Jūs varat pievienot iekļauto slaidrādi konkrētā vietā raksta pamattekstā HTML, izmantojot īpašu konstruktu <div class="Galerija"> kā attēla> elementu sērijas <konteineru.
<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>
Slaidrāžu rādīšana ar multivides RSS
Lai pievienotu iekļautu slaidrādi, izmantojiet <elementu media:group> kā tā vienuma> bērnelementu<, kurā vēlaties iegult slaidrādi.
Iekļautā multivide RSS slaidrādes vietu rakstā nosaka uzņemšanas pakalpojumi. Ja slaidrādes jāievieto noteiktā vietā, izmantojiet 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>
Sociālās multivides iegulšana
Raksta HTML pamattekstā var ievietot šādus sociālos ieguljumus:
- X
- Infogram
- Spotify
- Uzplaukums
- Google kartes
- Giphy
- TikTok
Varat izmantot standarta iegulšanas kodu, ko iesaka katrs sociālo pakalpojumu sniedzējs, lai nodrošinātu, ka iegulšana rakstā tiek saglabāta.
Visiem URL, kas norāda uz sociālo tīklu iegulšanas avotiem, jābūt stingri https, pretējā gadījumā tie tiks noraidīti.
Tālāk ir sniegti daži iegulšanas piemēri.
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 piespraušanas logrīks
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Pinterest paneļa logrīks
<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 profila logrīks
<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>
Infogramma (reaģējoša)
<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>
Infogramma (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>
Uzplaukt (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Uzplaukums (iframe)
<iframe src="https://public.flourish.studio/visualisation/2038977/embed" frameborder="0" scrolling="no" height="575" width="700" style="width:100%;"></iframe>
Google kartes
<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>