Kā parādīt iekļauto multividi un iegulšanu MSN
Uzziniet, kā pareizi parādīt attēlus, video, slaidrādes un sabiedriskos iegulšanas līdzekļus 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 atveidi MSN.
Tēmas šajā rakstā
Attēlu attēlošana ar iekļauto HTML
Attēlu rādīšana, izmantojot multivides RSS
HTML vadlīnijas
HTML var izmantot, lai norādītu raksta pamatteksta lauku vai slaida attēla apraksta lauku slaidrādē. Tas nav atļauts jebkurā citā laukā. Izmantojot HTML, ir dažas vispārējas vadlīnijas, kas jāpatur prātā:
- Microsoft ingestion Services vienmēr noņems neatļautās atzīmes. Iespējams, tiks noņemts arī atzīmju saturs un bērni.
- Microsoft ingestion Services var notīrīt HTML no elementiem, kas var ietekmēt atveidošanas pieredzi, piemēram, iekļautos stilus.
- Izdevējiem ieteicams uzturēt vienkāršu HTML hierarhiju un izvairīties no dziļi saistītām hierarhijām, kas pārsniedz 10 līmeņus.
- Izvairieties lietot vairākus secīgus <br tagus> . <br> line breaks at the end of document will removed.
- <iframe> , kas tiek izmantots jebkādiem mērķiem, kas nav konkrēti minēti šajā dokumentā, tiks noņemts.
Atļautie HTML tagi
Šīs atzīmes ir atļautas 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>, tpa>, <<tfoot>, <col>, <caption>, <colgroup>
- Listing<ol>, <ul>, <li>
- < Grupēšanalaidums>, <div>, <p>, <br>
- Iegulšana<blockquote>, <iframe acceptable> only acceptable for video and supported social embeds.
Piezīme
Parasti atribūti tiks 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žoti HTML tagi
Šīs atzīmes vienmēr tiks noņemtas no ienākošo rakstu pamatteksta, un, iespējams, saturs tiks noraidīts:
- <stils>
- <skripts>
- <objekts>
- <param>
- <ābele>
- <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...'>izmantojot GIPHY</a>
Attēli
Attēla novietojums
Ja pievienojat attēlu raksta HTML <pamattekstam, izmantojot img><> vai attēla tagus, tas automātiski saglabā tā atrašanās vietu pamattekstā. Pretējā gadījumā, ja izmantojat <multividi>:saturu, jūsu attēls var atrasties vietā, ko automātiski izvēlas ingestion services (Ingestion Services). Ja tagam ir "src" vietrādis URL, kas atbilst multivides:satura> elementa vietrādim URL<, attēls tiks uzņemsies tikai vienreiz un tiks novietots tur, kur tiek novietota img atzīme.
Sākuma attēls
Lai informētu ingestion that a particular image can be used as a featured image in the promo card by adding class="type:primaryImage" to the <img> tag.
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Attēlu attēlošana ar iekļauto HTML
<img> tagi
Izmantojot img> tagu plūsmas vienuma HTML pamattekstā<, varat sniegt papildu metadatus. Ja metadati tiek nodrošināti viena un tā paša attēla vietrāža URL nodrošinātajiem gan vienādības, gan multivides RSS tagiem, <multivides:> satura metadatiem vienmēr ir prioritāte.
Visus attēla metadatus HTML kodā var ievietot, izmantojot datu-*atribūtus, 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 atzīmi <img> ar papildu parametriem kā 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 rādīšana, izmantojot multivides RSS
Ieteicamais attēla metadatu pievienošanas veids ir izmantot multivides RSS <multivides:satura> elementu, lai norādītu attēla metadatus. Pēc noklusējuma attēls tiks novietots raksta augšdaļā.
<multivide> :satura elementus nevar norādīt raksta pamattekstā. Tie ir jānorāda kā saknes vienuma elementa tūlītējie bērni (<vienums> RSS plūsmā vai <ieraksts Atoma> ).
<!-- 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 video: Šajā scenārijā ir jānorāda video faila vietrādis URL, lai Microsoft Ingestion Services lejupielādē un saglabā failu MSN serveros. 1PP video tiks atveidoti, izmantojot MSN videoklipi atskaņotāju.
3PP video: 3PP video tiek atskaņoti nodrošinātāja atskaņotājā (piemēram, YouTube, DailyMotion utt.)
Video rādīšana ar HTML
1PP
Varat izmantot <video HTML atzīmi> , 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!
Tā kā YouTube pusē ir nesen veiktas platformas izmaiņas, MSN pašlaik nevar regulēt YouTube iegulšanu. Līdz ar to visi YouTube 3PP video, kas iesniegti, izmantojot plūsmas vai raksta HTML, tiks noraidīti uzņemšanas laikā. Šāda problēma ietekmē nelielu globālā satura daļu, taču partneriem nav jāizvairās no YouTube iegulšanas līdz papildu brīdinājumam. Kad atbalsts būs atjaunots, mēs atjaunināsim šos norādījumus.
Video rādīšana, izmantojot multivides RSS
Lai iegultu multividi, izmantojot multivides RSS, <media:content><media:group> šie elementi ir jāievieto ārpus HTML<item> pamatteksta un jāpievieno kā elementa (RSS) vai (ATOM) <entry> tūlītējie bērni. Šos tagus nevar aplauzt vai kombinēt ar HTML saturu raksta pamattekstā (piemēram, <content:encoded>pamattekstā), vai arī ingestion laikā tie tiks ignorēti.
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>
Cits
Atbalstītie 3PP video atskaņotāji ir jānorāda, kad ir pievienojot izdevēja zīmolu. Ja izmantojat šos atbalstītos 3PP video atskaņotājus, jums ir jānodrošina unikāls video <> identifikators, izmantojot guido 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 nodrošinātu ārēju teksta formāta failu ar laika formātu, kura pamatā ir W3C timed text 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 tīmekļa vietnes vai tiek viesoti serverī, piemēram, AWS.
Neatbalstītās saites
Dropbox saites, YouTube saites u.c., netiek atbalstītas RSS plūsmās. Tas ir tāpēc, ka video nevar vienkārši ne uzreiz izvilkt no šīm saitēm, jo tās ir "vārti".
Saistītās saites
Modulis "vairāk no pakalpojumu sniedzēja" ir iespēja zīmoliem parādīt trīs satura saites rakstu un galerijas lapās, kas ir saite uz zīmola tīmekļa vietni.
Pastāv divi veidi, kā izlemt, kuras trīs saites tiek rādītas šajā modulī:
- Automātiski aizpildīt jaunākos rakstus — Microsoft parādīs saites uz jaunākajiem rakstiem, kurus tā ir saistījusi starp jūsu zīmola nodrošinātajām plūsmām. Mēs pēc noklusējuma izmantojam kanonisko saiti, bet, ja tā nav nodrošināta, Microsoft nerāda šo saiti.
- Lietojiet saistītās saites ar rakstu — skatiet tālāk piemērus par to, kā to paveikt. Ja šī opcija ir atlasīta, ar katru plūsmā saistīto vienumu ir jānorāda vismaz trīs saistītās saites.
Saknes līmeņa plūsmas vienumiem (rakstiem un galerijām) kā bērnelementus var pievienot saistītās saites. Parasti izdevējiem ir jānodrošina vismaz 3 saites, lai tie tiktu parādīti "saistītajā" sadaļā msn.
Visas saistītās un iekļautas saites vēlams izmantot HTTPS shēmu.
Lai norādītu Atoma, izdevēji var vienkārši izmantot elementu. Tiem arī jāizmanto tas pats elements RSS plūsmā pēc atoma nosaukumvietas deklarēšanas. Turklāt, tā kā ir nepieciešams sīktēla attēls, varat apvienot ar multividi <:> 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
Iekļauto slaidrādi var pievienot noteiktai atrašanās vietai raksta pamatteksta HTML <, izmantojot īpašu konstrukcijas div class="Gallery"><kā attēlu 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ādes rādīšana, izmantojot multivides RSS
Lai pievienotu iekļauto slaidrādi, <izmantojiet elementu multivide:><> grupa kā tā vienuma bērnobjektu, ar kuru vēlaties iegult slaidrādi.
Iekļauto multivides RSS slaidrādes vietu rakstā nosaka uzņemšanas pakalpojumi. Ja slaidrādes jāveic noteiktā atrašanās 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ālo tīklu iegulšana
Tālāk norādītos sabiedriskos iegulšanas ierakstus var ievietot raksta HTML pamattekstā.
- X
- Infogram
- Spotify
- Uzplaukt
- Google kartes
- Giphy
- TikToka
Varat izmantot standarta iegulšanas kodu, ko iesaka katrs sabiedrisko sakaru pakalpojumu sniedzējs, lai nodrošinātu, ka iegulšana tiek saglabāta rakstā.
Visiem vietrāžiem URL, kas norāda uz sociālo tīklu iegulšanas avotiem, ir obligāti jābūt https vai citādi noraidītiem.
Tālāk ir piedāvājam dažus iegulšanas piemērus.
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 logrīks
<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 (reaģē)
<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>
Uzplaukts (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Nuplaukts (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>
TikToka
<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>