Microlink SDK v4.5:
Introducing iframe support

December 29, 2019 (4 years ago)

We released

, introducing a powerful functionality: the ability to embed native iframes 🔥.

Every time you use Microlink SDK, it turns any link into a beautiful link preview, where the card can be displayed with three size variations: 'small', 'normal' and 'large'.

Microlink SDK size variations.

The card approach improves a lot of the URL preview experience, making it possible for you to adopt it on your own website or application.

However, some domains on the Internet (like Instagram, SoundCloud, Spotify, Facebook, Twitter,…) have their own way of embedding their content, making the Microlink card displayed less recognizable than using their own way.

Microlink SDK v4.5 introduces the ability to set iframe as the media property for using a native embed solution always when it's available.

The media property takes into consideration the URL preferences, setting up the Microlink API call in order to satisfy the media requirements.

For example, when the URL is an audio provider (like SoundCloud or Spotify) if you set media: ['audio'] you are telling at Microlink API level that you want to detect the streaming source of audio behind the URL, enabling audio for that purpose.


{
  "audio": {
    "url": "https://p.scdn.co/mp3-preview/4036341425a86cbe3fe0aa39a034ba7b6c5e4432?cid=6313d40896f64a2ead4f67035049a647",
    "type": "mp3",
    "duration": 30.040816,
    "size": 362861,
    "duration_pretty": "30s",
    "size_pretty": "363 kB"
  }
}

If the audio detection is done successfully, Microlink API will return an audio data field as part of the response that will be used by Microlink SDK for creating the audio preview.

In the same way, in case you prefer to use provider iframes, just need to set media: ['iframe'] for enabling iframe detection.


{
  "iframe": {
    "html": "<iframe width=\"300\" height=\"380\" allowtransparency=\"true\" frameborder=\"0\" allow=\"encrypted-media\" title=\"Spotify Embed: Space Spine\" src=\"https://open.spotify.com/embed/album/49ax7HUaKuueaVtZBkEZD4?highlight=spotify:track:1W2919zs8SBCLTrOB1ftQT\"></iframe>",
    "scripts": []
  }
}

After that, Microlink API does the magic and returns you the iframe, leveraging into Microlink SDK for embedding it properly.

Note that we are specifying media as a collection. That's because you can add more than one value to be used as fallbacks.


import Microlink from '@microlink/react'

export default props => (
  // The card media could be:
  // - `iframe`, if the URL provider supports it.
  // - `video`, in case `iframe` hasn't been satisfied.
  // - `audio`, in case `video` and `iframe` haven't been satisfied.
  // - `image`, in case neither of the previous values have been satisfied.
  <Microlink media={['iframe', 'video', 'audio' 'image']} {...props} />
)

That's specially useful for the cases where the URL provider doesn't support iframe, or you don't know if the URL is exposing and audio/video streaming source to consume.

Providers supported

That's the best part: Any provider that implements

oembed

specification is supported.

A non exhaustive list of the most common providers could be:

Join the community

All of these improvements or features are community driven: We listen to your feedback and act accordingly.

Whether you are are building a product and you need fancy previews, you’re an indie hacker or simply you like frontend stuff, come chat with us 🙂.