วิธีการแสดงสื่อแบบอินไลน์และฝังตัวบน MSN
เรียนรู้วิธีการแสดงรูปภาพ วิดีโอ การนําเสนอสไลด์ และการฝังทางสังคมภายในเนื้อความของบทความได้อย่างถูกต้องโดยใช้ HTML และ Media RSS คู่มือนี้กล่าวถึงแท็ก เมตาดาต้า และหลักปฏิบัติที่ดีที่สุดของการจัดรูปแบบที่สนับสนุน เพื่อให้แน่ใจว่าการแสดงภาพบน MSN เป็นไปอย่างราบรื่น
ในบทความนี้
แนวทางของ HTML
HTML สามารถใช้เพื่อระบุเขตข้อมูลเนื้อความของบทความหรือเขตข้อมูลคําอธิบายรูปภาพสไลด์ในการนําเสนอภาพนิ่ง ไม่อนุญาตให้ใช้ในฟิลด์อื่น มีแนวทางทั่วไปสองสามข้อที่ควรทราบเมื่อใช้ HTML:
- Microsoft Ingestion Services จะลบแท็กที่ไม่ได้รับอนุญาตออกเสมอ เนื้อหาแท็กและเด็กๆ อาจถูกเอาออกเช่นกัน
- Microsoft Ingestion Services อาจล้าง HTML จากองค์ประกอบที่อาจส่งผลต่อประสบการณ์ในการแสดงผล เช่น ลักษณะแบบอินไลน์
- ขอแนะนําให้ผู้เผยแพร่ทําให้ลําดับชั้น HTML เป็นแบบง่ายๆ และหลีกเลี่ยงลําดับชั้นที่เชื่อมโยงอย่างมากเกินกว่า 10 ระดับ
- หลีกเลี่ยงการใช้แท็ก br> ติดกันหลาย<แท็ก <ตัวแบ่งบรรทัด br> ที่ส่วนท้ายของเอกสารจะถูกเอาออก
- <iframe> ที่ใช้สําหรับวัตถุประสงค์ใดๆ ที่ไม่ได้กล่าวถึงในเอกสารนี้จะถูกเอาออก
แท็ก HTML ที่อนุญาต
แท็กเหล่านี้ได้รับอนุญาตภายในเนื้อความของบทความ:
- ลักษณะ<แบบอักษรข>, <ฉัน>, <em>, <strong>
- ขนาด<แบบอักษรย่อย>, <sup>, <ขนาดเล็ก>
- หัว เรื่อง<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> ยอมรับได้เฉพาะวิดีโอและการฝังทางสังคมที่สนับสนุนเท่านั้น
หมายเหตุ
โดยทั่วไปแอตทริบิวต์จะถูกลบออกจากองค์ประกอบทั้งหมด เว้นแต่จะมีการใช้โดยฟีเจอร์พื้นฐาน เช่น href ใน <a> และ src ใน <img>
แท็ก HTML ที่ถูกจํากัด
แท็กต่อไปนี้จะถูกตัดออกจากเนื้อหาของบทความที่เข้ามาเสมอ และอาจส่งผลให้เนื้อหาถูกปฏิเสธ:
- <ลักษณะ>
- <สคริปต์>
- <วัตถุ>
- <พาราม>
- <แอ ปเพ ล็ต>
- <ฝัง>
- <สื่อ:url เนื้อหา='http://test.com/test.mp4'>
- <สื่อ:url เนื้อหา='http://test.com/test.avi'>
- <สื่อ:url เนื้อหา='http://test.com/test.wmv'>
- <รูป>
- <สื่อ>
- <div><a href='https://infogram.com' /></div>
- <a href='... giphy.com/gifs...'>ผ่าน GIPHY</a>
รูปภาพ
การจัดวางรูปภาพ
ถ้าคุณเพิ่มรูปลงในเนื้อความ HTML ของบทความโดยใช้ <แท็ก img> หรือ <รูป> รูปนั้นจะรักษาตําแหน่งที่ตั้งภายในเนื้อความโดยอัตโนมัติ มิฉะนั้น หากคุณใช้ <สื่อ:เนื้อหา> รูปภาพของคุณอาจถูกวางไว้ในตําแหน่งที่เลือกโดยอัตโนมัติโดยบริการ Ingestion หากแท็กมี URL "src" ที่ตรงกับ URL ของ <องค์ประกอบสื่อ:เนื้อหา> รูปภาพจะถูกกินเพียงครั้งเดียวและจะอยู่ในตําแหน่งที่แท็ก 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
วิธีที่แนะนําในการเพิ่มเมตาดาต้าของรูปคือการใช้องค์ประกอบสื่อ RSS <media:content> เพื่อระบุเมตาดาต้าของรูป ตามค่าเริ่มต้น รูปจะถูกวางไว้ที่ด้านบนของบทความ
<ไม่สามารถระบุองค์ประกอบเนื้อหา> ในเนื้อความของบทความได้ พวกเขาจะต้องระบุเป็นรายการลูกในทันทีขององค์ประกอบรายการราก (<รายการ> ใน RSS หรือ <รายการ> ในอะตอม)
<!-- 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 (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 หลังจากประกาศ Namespace 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
เมื่อต้องการเพิ่มการนําเสนอสไลด์แบบอินไลน์ ให้ใช้<องค์ประกอบสื่อ:กลุ่ม>เป็นองค์ประกอบย่อยของรายการ<>ที่คุณต้องการฝังการนําเสนอสไลด์
การนําเสนอสไลด์แบบอินไลน์สื่อ 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
<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>