כיצד להציג מדיה מוטבעת והטבעות ב- MSN

למד כיצד להציג כראוי תמונות, סרטוני וידאו, הצגת שקופיות והטבעות חברתיות בתוך גוף המאמר שלך באמצעות HTML ו- RSS של מדיה. מדריך זה מתאר את שיטות העבודה המומלצות של תגיות, מטה-נתונים ועיצוב נתמכים כדי להבטיח עיבוד חלק ב- MSN.

במאמר זה

קווים מנחים של HTML

תגי HTML מותרים

תגי HTML מוגבלים

תמונות

הצגת תמונות עם HTML מוטבע

הצגת תמונות עם מדיה RSS

סרטוני וידאו

קישורים קשורים

מצגות

הטבעות מדיה חברתית

קווים מנחים של HTML

ניתן להשתמש ב- HTML כדי לציין את שדה הגוף של מאמר או את שדה תיאור התמונה של השקופית בהצגת שקופיות. הוא אינו מותר בשדה אחר. יש כמה קווים מנחים כלליים שיש לזכור בעת שימוש ב- HTML:

• Microsoft Ingestion Services תמיד יסיר תגיות לא מותרות. ייתכן גם שתוכן התגים והצאצאים יוסרו.
• שירותי העיבוד של Microsoft עשויים לנקות HTML מרכיבים שעשויים להשפיע על חוויות עיבוד כגון סגנונות מוטבעים.
• מומלץ שלמוציאים לאור לשמור על הירארכיית HTML פשוטה ולהימנע מהירארכיות מקושרות עמוקות מעבר ל- 10 רמות.
• הימנע משימוש בתגי <br> עוקבות מרובות. <br> מעברי שורה בסוף המסמך יוסרו.
• <iframe> המשמש לכל מטרה שלא הוזכרה במפורש במסמך זה תוסר.

תגי HTML מותרים

תגיות אלה מותרות בגוף המאמר:

• סגנון גופן<b>, <i>, <em>, <strong>
• גודל גופן<sub>, <sup>, <small>
• כותרות<h1>, <h2>, <h3>, <h4>, <h5>
• קישורים<a> - ערכי href צריכים להשתמש עדיף ב- HTTPS, HTTP ו- mailto:
• תמונות<Img>
• טבלאות<שולחן>, <th>, <tr>, <td>, <thead>, <tbody, tfoot>>, <<col>, <caption>, <colgroup>
• רישום<ol>, <ul>, <li>
• קיבוץ<span>, <div>, <p>, <br>
• מטביע<blockquote>, <iframe> מקובל רק עבור הטבעות חברתיות נתמכות וסטוני וידאו.

תגי HTML מוגבלים

התגיות הבאות יופשטו תמיד מגוף המאמרים הנכנסים ועשויים לגרום לדחיית תוכן:

• <סגנון>
• <Script>
• <אובייקט>
• <פרם (פרם)>
• <יישומון>
• <הטבע>
• <media:content url='http://test.com/test.mp4'>
• <media:content url='http://test.com/test.avi'>
• <media:content url='http://test.com/test.wmv'>
• <איור>
• <מדיה>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>via GIPHY</a>

תמונות

מיקום תמונה

אם תוסיף תמונה לגוף ה- HTML <של המאמר באמצעות תגי img <> או איור>, היא תשמר באופן אוטומטי את מיקומה בגוף הטקסט. אחרת, אם אתה משתמש ב <- media:content>, ייתכן שהתמונה שלך תמוקם במיקום שנבחר באופן אוטומטי על-ידי שירותי Ingestion. אם לתגית יש כתובת URL "src" התואמת לכתובת ה- URL <של רכיב media:content> , התמונה תכלול פעם אחת בלבד והיא תמוקם במקום שבו ממוקם התג img.

תמונה מובילה

באפשרותך ליידע את ההכנסה שניתן להשתמש בתמונה מסוימת כתמונה מוצגת בכרטיס המבצע על-ידי הוספת class="type:primaryImage" <לתג img> .

<img src="http://contoso.com/image.jpg" class="type:primaryImage">

הצגת תמונות עם HTML מוטבע

<תגי img>

באפשרותך לספק מטה-נתונים נוספים בעת שימוש בתג <img> בתוך גוף ה- HTML של פריט ההזנה. אם סופקו מטה-נתונים עבור אותה כתובת URL של תמונה הן בתוך השורה והן באמצעות תגי RSS של מדיה, <המטה-נתונים של media:content> תמיד יהיו קדימים.

באפשרותך למקם את כל המטה-נתונים של התמונה בתוך ה- HTML על-ידי מינוף תכונות data-*, כמו בדוגמה הבאה:

<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>

<תגי> איור

באפשרותך גם לאכלס את תג <img> בפרמטרים אופציונליים כדוגמה הקודמת.

<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>

הצגת תמונות עם מדיה RSS

הדרך המומלצת להוספת מטה-נתונים של תמונה היא להשתמש ברכיב Media RSS <:content כדי> לציין מטה-נתונים של תמונה. כברירת מחדל, התמונה תמוקם בחלק העליון של המאמר.

<אין אפשרות להוסיף רכיבי media:content> בתוך גוף המאמר. יש להוסיף אותם כצאצאים מיידיים של רכיב פריט הבסיס (<פריט ב-> RSS או ערך <ב> - 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>

סרטוני וידאו

MSN תומך First-Party Player (1PP) ותצורות של נגן צד שלישי (3PP).

1PP videos: בתרחיש זה, יש לספק כתובת URL של קובץ וידאו כך ש- Microsoft Ingestion Services מוריד ומאחסן את הקובץ בשרתי MSN. סרטוני וידאו של 1PP יעובדו באמצעות MSN וידאו Player.

3PP סרטוני וידאו: סרטוני ה- 3PP מופעלים בנגן ספציפי לספק (לדוגמה, YouTube, DailyMotion וכולי)

הצגת וידאו עם HTML

1PP (עמ' 1)

באפשרותך להשתמש בתג <> HTML של הווידאו כדי לבטא סרטון וידאו מוטבע.

<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>

3 עמ'

YouTube הוא נגן 3PP היחיד שנתמך באמצעות הרכיב <iframe> .

<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true"  src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>

הצגת וידאו עם מדיה RSS

כדי להטביע מדיה באמצעות RSS של מדיה, <media:content><media:group> יש למקם את הרכיבים ומחוץ לגוף ה- HTML<item> ולהוסיף אותם כצאצאים מיידיים של הרכיב (RSS) <entry> או (ATOM). לא ניתן לעיין בתגיות אלה או לשלב בהן תוכן HTML בתוך גוף המאמר (לדוגמה, <content:encoded>בתוך ), או שהמערכת תתעלם מהם במהלך ההעלאה.

1PP (עמ' 1)

<!-- 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>

אחר

יש לציין נגני וידאו נתמכים של 3PP כאשר מותג המפרסם מחובר. עבור נגני וידאו נתמכים אלה של 3PP, <עליך לספק מזהה וידאו ייחודי באמצעות רכיב ה- GUID> עבור כל סרטוני הווידאו של 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>

כתוביות סמויות בווידאו

באפשרותך להשתמש ברכיב <media:subtitle> כדי לספק קובץ חיצוני של תבנית טקסט מתחלף המבוסס על תבנית טקסט מתם של W3C. רק 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>

קישורים נתמכים

יש לשמור קבצי וידאו בתבנית מאושרת, כגון קובץ MP4. Files מותרים אם הם מאתר האינטרנט שלך או מתארח בשרת כגון AWS.

קישורים שאינם נתמכים

קישורי Dropbox, קישורי YouTube וכו', אינם נתמכים בהזנות RSS. זאת משום שהווידאו לא יכול למשוך בקלות או באופן מיידי מקישורים אלה משום שהם 'משויכים'.

קישורים באותו נושא

המודול "יותר מהספק" הוא הזדמנות למותגים להציג שלושה קישורי תוכן במאמרים ודפים בגלריה, המקשרים לאתר האינטרנט של המותג עצמו.

קיימות שתי דרכים להחליט אילו שלושה קישורים יוצגו במודול זה:

1. אכלוס אוטומטי של המאמרים האחרונים – Microsoft תציג קישורים לסיפורים העדכניים ביותר שהיא כוללת בין ההזנות שסופקו מהמותגים שלך. אנו משתמשים בקישור קנוני כברירת מחדל, אך אם לא צוין, Microsoft לא תציג קישור זה.
2. ספק קישורים קשורים למאמר – ראה להלן דוגמאות לאופן ביצוע פעולה זו. אם אפשרות זו נבחרה, עליך לספק לפחות שלושה קישורים קשורים לכל פריט תוכן בהזנה.

ניתן להוסיף קישורים קשורים כרכיבים צאצאים לפריטי הזנה ברמת הבסיס (מאמרים וגלריות). באופן כללי, מפרסמים חייבים לספק לפחות 3 קישורים כדי שהם יופיעו במקטע 'קשור' ב- msn.

עדיף להשתמש בערכת HTTPS כל הקישורים הקשורים וה מוטבעים.

כדי לציין ב- Atom, מפרסמים יכולים פשוט להשתמש ברכיב. עליהם גם להשתמש באותו רכיב ב- RSS לאחר הצהרה על מרחב השמות של Atom. בנוסף, מכיוון שנדרשת תמונה ממוזערת, באפשרותך לשלב עם מדיה <:> רכיבים, כפי שמוצג בדוגמה זו:

<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>

מצגות

באפשרותך להוסיף הצגת שקופיות מוטבעת למיקום ספציפי בתוך גוף ה- HTML <של המאמר על-ידי שימוש במבנה מיוחד של 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>

הצגת הצגת שקופיות עם RSS של מדיה

כדי להוסיף הצגת שקופיות מוטבעת, <השתמש ברכיב media:group><> כצאצא של הפריט שברצונך להטביע איתו הצגת שקופיות.

מצגות שקופיות RSS מוטבעות של מדיה בתוך המאמר הוחלט על-ידי שירותי Ingestion. אם עליך למקם את הצגת השקופיות במיקום מסוים, השתמש ב- 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>

הטבעות מדיה חברתית

ניתן להוסיף את ההטבעות החברתיות הבאות בתוך גוף HTML של מאמר:

• X
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• לפרוח
• Google Maps
• Giphy
• עיט מחדש
• TikTok

באפשרותך להשתמש בקוד ההטבעה הרגיל המומלצ על-ידי כל ספק חברתי כדי לוודא שהטבעה נשמרת במאמר.

כל כתובות ה- URL המצביעות על מקורות מוטבעים חברתיים חייבות להיות https בלבד או יידחה באופן אחר.

להלן כמה דוגמאות להטבעות:

X

<blockquote class="twitter-tweet" align="center" width="350">    <p>We’re more optimistic than ever. The future will surprise the pessimists    </p>&mdash; 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&nbsp;<a href="https://www.facebook.com/contosoice/posts/1651549695142860">Thursday, 8 December 2017</a>    </blockquote></div>

Instagram

<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>

רכיב גרפי של הצמדת Pin של Pinterest

<a data-pin-do="embedPin" data-pin-width="medium" href="https://www.pinterest.com/pin/99360735500167749/"></a>  

רכיב גרפי של לוח 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>  

רכיב גרפי של פרופיל 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 (מגיב)

<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>

פרחוני (div)

<div class="flourish-embed" data-src="story/187069?27153"><script src=" https://public.flourish.studio/resources/embed.js"></script></div>

פרחוני (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>​​​​​​​