Τρόπος εμφάνισης ενσωματωμένων πολυμέσων και ενσωματώσεων στο MSN

Μάθετε πώς μπορείτε να εμφανίσετε σωστά εικόνες, βίντεο, παρουσιάσεις και κοινωνικές ενσωματώσεις μέσα στο σώμα του άρθρου σας χρησιμοποιώντας HTML και Media RSS. Αυτός ο οδηγός περιγράφει τις υποστηριζόμενες ετικέτες, μετα-δεδομένα και τις βέλτιστες πρακτικές μορφοποίησης, για να διασφαλιστεί η ομαλή απόδοση στο MSN.

Σε αυτό το άρθρο

Οδηγίες HTML

Επιτρεπόμενες ετικέτες HTML

Περιορισμένες ετικέτες HTML

Εικόνες

Εμφάνιση εικόνων με ενσωματωμένη HTML

Εμφάνιση εικόνων με πολυμέσα RSS

Βίντεο

Σχετικές συνδέσεις

Slideshows

Ενσωματώστε μέσα κοινωνικής δικτύωσης

Οδηγίες HTML

Η html μπορεί να χρησιμοποιηθεί για τον καθορισμό του πεδίου σώματος ενός άρθρου ή του πεδίου περιγραφής της εικόνας διαφάνειας σε μια παρουσίαση. Δεν επιτρέπεται σε κανένα άλλο πεδίο. Υπάρχουν λίγες γενικές οδηγίες που πρέπει να λαμβάνετε υπόψη κατά τη χρήση HTML:

• Οι Υπηρεσίες κατάποσης της Microsoft καταργούν πάντα τις ετικέτες που δεν επιτρέπονται. Τα περιεχόμενα των ετικετών και τα παιδιά ενδέχεται επίσης να καταργηθούν.
• Οι Υπηρεσίες microsoft Ingestion ενδέχεται να εκκαθαρίζουν HTML από στοιχεία που θα μπορούσαν να επηρεάσουν εμπειρίες απόδοσης, όπως ενσωματωμένα στυλ.
• Συνιστάται στους εκδότες να διατηρούν την ιεραρχία HTML απλή και να αποφεύγουν τις ιεραρχίες που συνδέονται βαθιά πέρα από τα 10 επίπεδα.
• Αποφύγετε τη χρήση πολλών διαδοχικών <ετικετών br> . <οι αλλαγές γραμμής br> στο τέλος του εγγράφου θα καταργηθούν.
• <Το iframe> που χρησιμοποιείται για οποιονδήποτε σκοπό που δεν αναφέρεται ρητά σε αυτό το έγγραφο θα καταργηθεί.

Επιτρεπόμενες ετικέτες HTML

Αυτές οι ετικέτες επιτρέπονται στο κύριο σώμα του άρθρου:

• Στυλ γραμματοσειράς<β>, <i>, <em>, <δυνατός>
• Μέγεθος γραμματοσειράς<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> acceptable only for video and supported social embeds.

Περιορισμένες ετικέτες HTML

Οι ακόλουθες ετικέτες θα αφαιρούνται πάντα από το σώμα των εισερχόμενων άρθρων και θα μπορούσαν να έχουν ως αποτέλεσμα την απόρριψη περιεχομένου:

• <στυλ>
• <Δέσμη ενεργειών>
• <αντικείμενο>
• <Παράμ>
• <Applet>
• <ενσωμάτωση>
• <πολυμέσα:content url='http://test.com/test.mp4'>
• <πολυμέσα:content url='http://test.com/test.avi'>
• <πολυμέσα:content url='http://test.com/test.wmv'>
• <Σχήμα>
• <πολυμέσα>
• <div><a href='https://infogram.com' /></div>
• <a href='... giphy.com/gifs...'>μέσω GIPHY</a>

Εικόνες

Τοποθέτηση εικόνας

Εάν προσθέσετε μια εικόνα στο σώμα HTML του άρθρου χρησιμοποιώντας <img> ή <ετικέτες εικόνας> , διατηρεί αυτόματα τη θέση της μέσα στο σώμα. Διαφορετικά, εάν χρησιμοποιείτε <πολυμέσα:περιεχόμενο>, η εικόνα σας μπορεί να τοποθετηθεί σε μια θέση που επιλέγεται αυτόματα από τις Υπηρεσίες κατάποσης. Εάν μια ετικέτα έχει μια διεύθυνση URL "src" που αντιστοιχεί στη διεύθυνση URL ενός <στοιχείου πολυμέσων:περιεχομένου> , η εικόνα θα καταναλωθεί μόνο μία φορά και θα βρίσκεται εκεί όπου τοποθετείται η ετικέτα img.

Εικόνα στην αρχική εικόνα

Μπορείτε να ενημερώσετε την κατάποση ότι μια συγκεκριμένη εικόνα μπορεί να χρησιμοποιηθεί ως επιλεγμένη εικόνα στην κάρτα προώθησης, προσθέτοντας class="type:primaryImage" στην <ετικέτα img> .

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

Εμφάνιση εικόνων με ενσωματωμένη HTML

<ετικέτες img>

Μπορείτε να παρέχετε πρόσθετα μετα-δεδομένα όταν χρησιμοποιείτε την <ετικέτα img> μέσα στο σώμα HTML του στοιχείου τροφοδοσίας. Εάν παρέχονται μετα-δεδομένα για την ίδια διεύθυνση URL εικόνας τόσο ενσωματωμένα όσο και χρησιμοποιώντας ετικέτες RSS πολυμέσων, <τα πολυμέσα:μετα-δεδομένα περιεχομένου> θα έχουν πάντα προτεραιότητα.

Μπορείτε να τοποθετήσετε όλα τα μετα-δεδομένα εικόνας ενσωματωμένα μέσα στην HTML αξιοποιώντας τα χαρακτηριστικά των δεδομένων*, όπως στο ακόλουθο παράδειγμα:

<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> element για να καθορίσετε μετα-δεδομένα εικόνας. Από προεπιλογή, η εικόνα θα τοποθετηθεί στο επάνω μέρος του άρθρου.

<πολυμέσα:τα στοιχεία περιεχομένου> δεν μπορούν να καθοριστούν στο σώμα του άρθρου. Πρέπει να καθοριστούν ως άμεσα παιδιά του ριζικού στοιχείου στοιχείου (<στοιχείο> στην 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) και Third-Party Player (3PP).

Βίντεο 1PP: Σε αυτό το σενάριο, πρέπει να παρέχεται διεύθυνση URL αρχείου βίντεο, ώστε οι Υπηρεσίες Microsoft Ingestion να κάνουν λήψη και αποθήκευση του αρχείου σε διακομιστές 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>

Εμφάνιση βίντεο με πολυμέσα 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>

Κλειστές λεζάντες σε βίντεο

Μπορείτε να χρησιμοποιήσετε το <στοιχείο πολυμέσων:υπότιτλων> για την παροχή ενός εξωτερικού αρχείου μορφής χρονομετρημένου κειμένου με βάση τη μορφή κειμένου χρονομετρημένου κειμένου 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 επιτρέπονται εάν προέρχονται από τη δική σας τοποθεσία Web ή φιλοξενούνται σε ένα διακομιστή όπως ο AWS.

Μη υποστηριζόμενες συνδέσεις

Οι συνδέσεις Dropbox, οι συνδέσεις YouTube κ.λπ., δεν υποστηρίζονται σε τροφοδοσίες RSS. Αυτό συμβαίνει επειδή το βίντεο δεν μπορεί εύκολα ή αμέσως να τραβήξει από αυτές τις συνδέσεις καθώς είναι "περιφραγμένο".

Σχετικές συνδέσεις

Η ενότητα "περισσότερα από υπηρεσία παροχής" είναι μια ευκαιρία για τις επωνυμίες να εμφανίσουν τρεις συνδέσεις περιεχομένου σε άρθρα και σελίδες συλλογής, οι οποίες συνδέονται με την τοποθεσία Web της μάρκας.

Υπάρχουν δύο τρόποι για να αποφασίσετε ποιες τρεις συνδέσεις θα εμφανίζονται σε αυτή την ενότητα:

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>

Slideshows

Μπορείτε να προσθέσετε μια ενσωματωμένη παρουσίαση σε μια συγκεκριμένη θέση μέσα στο σώμα 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 πολυμέσων

Για να προσθέσετε μια ενσωματωμένη παρουσίαση, χρησιμοποιήστε το <στοιχείο πολυμέσων:ομάδας> ως θυγατρικό στοιχείο του στοιχείου> με το <οποίο θέλετε να ενσωματώσετε την παρουσίαση.

Η θέση των παρουσιάσεων inline 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
• Facebook
• Instagram
• Pinterest
• Infogram
• Spotify
• Ανθίσει
• Χάρτες Google
• Giphy
• Reddit
• 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>

Γραφικό στοιχείο καρφίτσας 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

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

Reddit

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