Cum se afișează suportul media în linie și încorporarile în MSN
Aflați cum să afișați corect imagini, videoclipuri, expuneri de diapozitive și încorporari sociale în corpul articolului utilizând HTML și Media RSS. Acest ghid prezintă cele mai bune practici acceptate privind etichetele, metadatele și formatarea, pentru a asigura redarea fără probleme în MSN.
În acest articol
Afișare imagini cu HTML în linie
Afișarea imaginilor cu RSS media
Instrucțiuni HTML
HTML se poate utiliza pentru a specifica câmpul corp al unui articol sau câmpul descriere imagine diapozitiv într-o expunere de diapozitive. Nu este permis în niciun alt câmp. Există câteva instrucțiuni generale de reținut atunci când utilizați HTML:
- Microsoft Ingestion Services va elimina întotdeauna etichetele nepermise. Este posibil ca și conținutul etichetei și fiii să fie eliminați.
- Microsoft Ingestion Services poate curăța HTML-ul de elementele care ar putea afecta experiențele de redare, cum ar fi stilurile în linie.
- Se recomandă ca editorii să păstreze ierarhia HTML simplă și să evite ierarhiile profund legate dincolo de 10 niveluri.
- Evitați utilizarea mai multor etichete br> consecutive<. <br> sfârșiturile de linie de la sfârșitul documentului vor fi eliminate.
- <iframe> utilizat în orice scop care nu este menționat în mod explicit în acest document va fi eliminat.
Etichete HTML permise
Aceste etichete sunt permise în corpul articolului:
- Stil< fontb>, <i>, <em>, <strong>
- Dimensiune< fontsub>, <sup>, <mic>
- Titlurile<h1>, <h2>, <h3>, <h4>, <h5>
- Legături<a> - valorile href ar trebui să utilizeze, de preferință, HTTPS, HTTP și mailto:
- Imagini<Img>
- Tabele<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
- Listarea<ol>, <ul>, <li>
- Gruparea<span>, <div>, <p>, <br>
- Embeds<blockquote>, <iframe> acceptabil doar pentru încorporarile sociale video și acceptate.
Notă
În general, atributele vor fi eliminate din toate elementele, cu excepția cazului în care sunt utilizate de caracteristici subiacente, cum ar fi href într-un <> și src în <img>.
Etichete HTML restricționate
Următoarele etichete vor fi eliminate întotdeauna din corpul articolelor primite și ar putea duce la respingerea conținutului:
- <stil>
- <Script>
- <obiect>
- <Param>
- <Applet>
- <încorporare>
- <media:content url='http://test.com/test.mp4'>
- <media:content url='http://test.com/test.avi'>
- <media:content url='http://test.com/test.wmv'>
- <Figura>
- <media>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>via GIPHY</a>
Imagini
Amplasare imagine
Dacă adăugați o imagine la corpul HTML al articolului utilizând <etichete img> sau <figuri> , aceasta își păstrează automat locația din corp. În caz contrar, dacă utilizați <media:content>, imaginea poate fi plasată într-o locație aleasă automat de Serviciile de ingestie. Dacă o etichetă are un URL "src" care se potrivește cu URL-ul unui <element media:content> , imaginea va fi ingerată o singură dată și se va afla în locul unde este plasată eticheta img.
Imagine la început
Puteți informa ingestia că o anumită imagine poate fi utilizată ca imagine recomandată în fișa promoțională, adăugând class="type:primaryImage" la <eticheta img> .
<img src="http://contoso.com/image.jpg" class="type:primaryImage">
Afișare imagini cu HTML în linie
<etichete img>
Puteți furniza metadate suplimentare atunci când utilizați <eticheta img> din corpul HTML al elementului de flux. Dacă sunt furnizate metadate pentru același URL de imagine, atât în linie, cât și utilizând etichete MEDIA RSS, <metadatele media:conținut> vor avea întotdeauna prioritate.
Puteți plasa toate metadatele de imagine în linie în cadrul HTML, valorificând atributele data-*ca în exemplul următor:
<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
De asemenea, puteți completa <eticheta img> cu parametri opționali ca exemplu anterior.
<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>
Afișarea imaginilor cu RSS media
Modalitatea recomandată de a adăuga metadate de imagine este să utilizați elementul media rss <media:content> pentru a specifica metadatele imaginii. În mod implicit, imaginea va fi plasată în partea de sus a articolului.
<media:elementele de conținut> nu pot fi specificate în corpul articolului. Acestea trebuie specificate ca fii imediati ai elementului elementului rădăcină (<element> din RSS sau <intrare> în 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>
Videoclipuri
MSN acceptă configurațiile First-Party Player (1PP) și Player terț (3PP).
Videoclipuri 1PP: În acest scenariu, trebuie furnizat URL-ul fișierului video, astfel încât Microsoft Ingestion Services să descarce și să stochează fișierul pe serverele MSN. Videoclipurile 1PP vor fi redate utilizând MSN Video Player.
Videoclipuri 3PP: Videoclipurile 3PP sunt redați pe un jucător specific furnizorului (de exemplu, YouTube, DailyMotion etc.)
Afișare video cu HTML
1PP
Puteți utiliza <eticheta HTML video> pentru a exprima un videoclip în linie.
<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 este singurul jucător 3PP care este acceptat folosind <elementul iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
Important
Din cauza modificărilor recente de pe platformă de pe YouTube, MSN nu poate modera în prezent încorporarile YouTube moderate. Prin urmare, toate videoclipurile YouTube 3PP remise prin fluxuri sau html articol vor fi respinse în timpul ingestiei. Această problemă afectează o mică parte a conținutului global, dar partenerii ar trebui să evite utilizarea încorporarii YouTube până la o notificare ulterioară. Vom actualiza aceste instrucțiuni după ce se restabilește asistența.
Afișarea unui fișier video cu RSS media
Pentru a încorpora elemente media utilizând Media RSS, elementele <media:content> și <media:group> trebuie plasate în afara corpului HTML și adăugate ca fii imediat ai elementului<item> (RSS) sau <entry> (ATOM). Aceste etichete nu pot fi încadrate sau combinate cu conținut HTML în interiorul corpului articolului (de exemplu, în cadrul <content:encoded>) sau vor fi ignorate în timpul ingerării.
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>
Altele
Playerele video 3PP acceptate trebuie specificate atunci când marca editorului este înscrisă. Pentru aceste playere video 3PP acceptate, trebuie să furnizați un identificator video unic prin elementul <GUID> pentru toate videoclipurile 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>
Subtitrări în videoclip
Puteți utiliza <elementul media:subtitlu> pentru a furniza un fișier de format Text temporizată extern bazat pe formatul Text temporizată W3C. Numai TTML 1 este acceptat în prezent.
<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>
Linkuri acceptate
Fișierele video trebuie salvate într-un format aprobat, cum ar fi un fișier MP4. Files sunt permise dacă sunt de pe site-ul dvs. web sau găzduite pe un server precum AWS.
Linkuri neacceptate
Linkurile Dropbox, linkurile YouTube etc., nu sunt acceptate în fluxurile RSS. Acest lucru se datorează faptul că video nu poate cu ușurință, nici imediat trage de la aceste link-uri ca acestea sunt "gated".
Linkuri utile
Modulul "mai mult de la furnizor" este o oportunitate pentru branduri de a afișa trei linkuri de conținut pe paginile de articole și de galerie, care fac legătura cu site-ul web propriu al mărcii.
Există două modalități de a decide ce trei linkuri sunt afișate în acest modul:
- Completarea automată a celor mai recente articole - Microsoft va afișa linkuri către cele mai recente articole pe care le-a ingerat printre fluxurile furnizate de marca dvs. Utilizăm linkul canonic în mod implicit, dar, dacă nu este furnizat, Microsoft nu va afișa acest link.
- Furnizați linkuri asociate cu articolul - vedeți mai jos exemple despre cum să faceți acest lucru. Dacă această opțiune este selectată, trebuie să furnizați cel puțin trei linkuri asociate cu fiecare element de conținut din flux.
Linkurile asociate pot fi adăugate ca elemente fiu la elementele fluxului la nivel rădăcină (articole și galerii). În general, editorii trebuie să furnizeze cel puțin 3 linkuri pentru ca aceștia să apară în secțiunea "asociate" din msn.
Toate linkurile corelate și în linie ar trebui să utilizeze, de preferință, schema HTTPS.
Pentru a specifica în Atom, editorii pot folosi pur și simplu elementul. Ei au nevoie, de asemenea, de a utiliza același element în RSS după declararea atom namespace. În plus, deoarece este necesară o imagine în miniatură, puteți combina cu <elementele media:> așa cum se arată în acest exemplu:
<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>
Diapozitive
Puteți adăuga o Expunere de diapozitive în linie într-o anumită locație din corpul HTML al articolului, utilizând o construcție <specială div class="Gallery"> ca un container al unei serii de elemente figură<>.
<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>
Afișarea expunerilor de diapozitive cu RSS media
Pentru a adăuga o expunere de diapozitive în linie, utilizați <elementul media:group> ca fiu al elementului> cu care <doriți să încorporați Expunere de diapozitive.
Inline Media RSS Slideshows loc în cadrul articolului este decis de către Serviciile de ingestie. Dacă trebuie să plasați expunerile de diapozitive într-o anumită locație, utilizați HTML în schimb.
<!-- 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>
Încorporari de rețele sociale
Următoarele încorporari sociale pot fi inserate într-un corp HTML de articol:
- X
- Infogram
- Spotify
- Înflori
- Google Maps
- Giphy
- TikTok
Puteți utiliza codul încorporat standard recomandat de fiecare furnizor social pentru a vă asigura că încorporarea este păstrată în articol.
Toate URL-urile care indică spre surse de încorporare socială trebuie să fie strict https sau altfel vor fi respinse.
Iată câteva exemple de încorporare:
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>
Widgetul Pinterest pin
<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>
Widgetul avizier Pinterest
<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>
Widgetul profil Pinterest
<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ă (receptiv)
<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>
Floral (div)
<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>
Floral (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>