Jekyll

|

The legacy Microlink Embed SDK is no longer maintained. It keeps working and you can still use it, but it won't receive further updates. The new Microlink SDK — the microlink.io package — is the way to consume the Microlink API going forward.

The Jekyll integration is pretty similar to the Vanilla approach.

Just you need to be sure to load the script. A good place to put it's _layouts/default.html:

<script src="//cdn.jsdelivr.net/npm/@microlink/vanilla@latest/umd/microlink.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.card-preview')
  })
</script>

In the code above, we are associating microlink cards with the class name card-preview.

So now, when we write a new jekyll post, we are going to associate card-preview class name with the links we want to convert into previews.

[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview}

Then the link will be rendered as

You can pass any Microlink API query parameter as a data-* field.

[](https://www.theverge.com/2016/4/1/11342104/tesla-model-3-announcement-photos){:.card-preview data-size="large"}

It's the equivalent to passing {size: 'large'} with the Vanilla integration.

If you want to customize the style, it can be done using CSS variables or CSS classes.