كيفية عرض الوسائط المضمنة والتضمينات على MSN
تعرف على كيفية عرض الصور ومقاطع الفيديو وعروض الشرائح والتضمينات الاجتماعية بشكل صحيح داخل نص المقالة باستخدام HTML و Media RSS. يوضح هذا الدليل أفضل الممارسات المعتمدة والعلامات وبيانات التعريف والتنسيق لضمان العرض السلس على MSN.
في هذه المقالة
عرض الصور باستخدام HTML المضمن
عرض الصور باستخدام الوسائط RSS
تضمينات وسائل التواصل الاجتماعي
إرشادات HTML
يمكن استخدام HTML لتحديد حقل النص الأساسي لمقالة أو حقل وصف صورة الشريحة في عرض شرائح. غير مسموح به في أي حقل آخر. هناك بعض الإرشادات العامة التي يجب وضعها في الاعتبار عند استخدام HTML:
- ستقوم Microsoft Ingestion Services دائما بإزالة العلامات غير المسموح بها. قد تتم إزالة محتويات العلامة والأولاد أيضا.
- قد تقوم Microsoft Ingestion Services بتنظيف HTML من العناصر التي قد تؤثر على تجارب العرض مثل الأنماط المضمنة.
- يوصى بأن يحافظ الناشرون على التدرج الهرمي ل HTML بسيطا ويتجنبون التسلسلات الهرمية المرتبطة بشكل عميق بما يتجاوز 10 مستويات.
- تجنب استخدام علامات br> المتتالية <المتعددة. <ستتم إزالة فواصل أسطر br> في نهاية المستند.
- <ستتم إزالة iframe> المستخدم لأي غرض غير مذكور صراحة في هذا المستند.
علامات HTML المسموح بها
يسمح بهذه العلامات ضمن نص المقالة:
- نمط< الخطب>، <أنا>، <م>، <قوي>
- حجم< الخطsub>, <sup>, <small>
- عناوين<h1>، <h2>، <h3>، <h4>، <h5>
- ارتباطات<أ> - يجب أن تستخدم قيم href HTTPS وHTTP و mailto:
- الصور<Img>
- الجداول<table>, <th>, <tr>, <td>, <thead>, <tbody>, <tfoot>, <col>, <caption>, <colgroup>
- قائمه<ol>, <ul>, <li>
- تجميع<span>, <div>, <p>, <br>
- يضمن<blockquote>، <iframe> مقبول فقط للفيديو والتضمينات الاجتماعية المدعومة.
ملاحظة
بشكل عام، ستتم إزالة السمات من جميع العناصر ما لم يتم استخدامها من قبل ميزات أساسية مثل href في <وsrc> في <img>.
علامات HTML المقيدة
سيتم دائما تجريد العلامات التالية من النص الأساسي للمقالات الواردة وقد يؤدي ذلك إلى رفض المحتوى:
- <نمط>
- <البرنامج النصي>
- <عنصر>
- <بارام>
- <الصغير>
- <تضمين>
- <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> أو <الشكل> ، فإنها تحافظ تلقائيا على موقعها داخل النص الأساسي. وإلا، إذا كنت تستخدم <الوسائط:المحتوى>، فقد يتم وضع صورتك في موقع تختاره خدمات الاستيعاب تلقائيا. إذا كانت العلامة تحتوي على عنوان 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 للصورة سواء المضمنة أو باستخدام علامات Media RSS، <فستأخذ بيانات تعريف الوسائط:المحتوى> الأسبقية دائما.
يمكنك وضع جميع بيانات تعريف الصورة المضمنة داخل 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 <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: في هذا السيناريو، يجب توفير عنوان URL لملف الفيديو بحيث تقوم Microsoft Ingestion Services بتنزيل الملف وتخزينه على خوادم MSN. سيتم عرض مقاطع فيديو 1PP باستخدام فيديو MSN Player.
مقاطع فيديو 3PP: يتم تشغيل مقاطع الفيديو 3PP على مشغل خاص بالموفر (على سبيل المثال، YouTube و DailyMotion وما إلى ذلك)
عرض الفيديو باستخدام HTML
1PP
يمكنك استخدام <علامة 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>
3PP
YouTube هو مشغل 3PP الوحيد المدعوم باستخدام <عنصر iframe> .
<iframe width="100%" height="100%" frameborder="0" allowfullscreen="true" src="https://www.youtube.com/embed/XnZ_J3l_0z4?rel=0" ></iframe>
هام
نظرا للتغييرات الأخيرة في النظام الأساسي على جانب YouTube، لا يمكن ل MSN حاليا الإشراف على تضمينات YouTube. ونتيجة لذلك، سيتم رفض جميع مقاطع فيديو YouTube 3PP المقدمة من خلال الموجزات أو المقالة HTML أثناء الاستيعاب. تؤثر هذه المشكلة على جزء صغير من المحتوى العالمي، ولكن يجب على الشركاء تجنب استخدام تضمينات YouTube حتى إشعار آخر. سنقوم بتحديث هذا التوجيه بمجرد استعادة الدعم.
عرض الفيديو باستخدام الوسائط RSS
لتضمين الوسائط باستخدام Media RSS، <media:content> يجب وضع العناصر و <media:group>خارج نص HTML وإضافتها كعناصر تابعة مباشرة للعنصر<item> (RSS) أو <entry> (ATOM). لا يمكن تضمين هذه العلامات أو دمجها مع محتوى HTML داخل نص المقالة (على سبيل المثال، داخل <content:encoded>)، أو سيتم تجاهلها أثناء الاستيعاب.
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>
غير ذلك
يجب تحديد مشغلات فيديو 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. وذلك لأن الفيديو لا يمكن بسهولة ولا على الفور سحب من تلك الروابط لأنها 'مسبوذة'.
ارتباطات ذات صلة
الوحدة النمطية "المزيد من الموفر" هي فرصة للعلامات التجارية لعرض ثلاثة روابط محتوى على صفحات المقالة والمعرض، والتي ترتبط بموقع العلامة التجارية الخاص.
هناك طريقتان لتحديد الارتباطات الثلاثة المعروضة في هذه الوحدة النمطية:
- ملء أحدث المقالات تلقائيا - ستعرض Microsoft ارتباطات لأحدث القصص التي تم تناولها من بين الموجزات المقدمة من علامتك التجارية. نستخدم الارتباط المتعارف عليه بشكل افتراضي ولكن إذا لم يتم توفيره، فلن تعرض Microsoft هذا الارتباط.
- توفير الارتباطات ذات الصلة مع المقالة - راجع أدناه للحصول على أمثلة حول كيفية القيام بذلك. إذا تم تحديد هذا الخيار، فيجب عليك توفير ثلاثة ارتباطات ذات صلة على الأقل مع كل عنصر محتوى في الموجز.
يمكن إضافة الارتباطات ذات الصلة كعناصر تابعة إلى عناصر موجز مستوى الجذر (المقالات والمعارض). بشكل عام، يجب على الناشرين توفير 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> كعنصر تابع للعنصر> الذي <ترغب في تضمين عرض الشرائح به.
يتم تحديد وضع عروض شرائح Media RSS المضمنة ضمن المقالة بواسطة خدمات الاستيعاب. إذا كنت بحاجة إلى وضع عروض الشرائح في موقع معين، فاستخدم 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
- بينتيريست
- 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>— 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
<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>
مخطط معلوماتي (سريع الاستجابة)
<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>
مخطط معلومات (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>