Vanilla

It is available as an
npm install @microlink/vanilla --save
The vanilla bundle is based on the React version, but exported as Universal Module Definition (UMD).
Since the bundle doesn't include the dependencies, we recommend loading them from a CDN.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/mql.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
or even better, combine them in just one line:
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/umd/react.production.min.js,npm/[email protected]/umd/react-dom.production.min.js,npm/[email protected]/dist/styled-components.min.js,npm/@microlink/[email protected]/dist/mql.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
After that, microlink will be available in the global scope.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    // Example 1
    // Replace all `a` tags for microlink cards
    microlink('a')
    // Example 2
    // Replace all elements with `link-preview` class
    // for microlink cards
    microlink('.link-previews')
    // Example 3
    // Replace all elements with `link-preview` class
    // for microlink cards, passing API specific options
    microlink('.link-previews', { size: 'large' })
  })
</script>

We recommend calling the `microlink` method before the DOM finishes loading.

The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as the target element you want to convert into a preview.
You can pass any API Parameter as an object property, e.g., size.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>

The API parameters passed there will be attached for all the links.

If you want to pass specific API Parameters just for some cases, you can pass them as
<a
  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk"
  class="link-preview"
  data-size="large"
  data-media='["logo", "image"]'
  data-set-data='{"title": "hello world"}'
>
</a>

You can pass objects, arrays, booleans or even JSON structures as data attributes.

Although it is shipped with default styles, you can customize it using
<style>
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>

Vanilla

It is available as an
npm install @microlink/vanilla --save
The vanilla bundle is based on the React version, but exported as Universal Module Definition (UMD).
Since the bundle doesn't include the dependencies, we recommend loading them from a CDN.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/styled-components.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/mql.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@microlink/[email protected]/dist/microlink.min.js"></script>
or even better, combine them in just one line:
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected]/umd/react.production.min.js,npm/[email protected]/umd/react-dom.production.min.js,npm/[email protected]/dist/styled-components.min.js,npm/@microlink/[email protected]/dist/mql.min.js,npm/@microlink/[email protected]/dist/microlink.min.js"></script>
After that, microlink will be available in the global scope.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    // Example 1
    // Replace all `a` tags for microlink cards
    microlink('a')
    // Example 2
    // Replace all elements with `link-preview` class
    // for microlink cards
    microlink('.link-previews')
    // Example 3
    // Replace all elements with `link-preview` class
    // for microlink cards, passing API specific options
    microlink('.link-previews', { size: 'large' })
  })
</script>

We recommend calling the `microlink` method before the DOM finishes loading.

The vanilla interface is pretty simliar to jQuery/Zepto: You need to provide a CSS selector as the target element you want to convert into a preview.
You can pass any API Parameter as an object property, e.g., size.
<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>

The API parameters passed there will be attached for all the links.

If you want to pass specific API Parameters just for some cases, you can pass them as
<a
  src="https://www.theverge.com/tldr/2018/2/7/16984284/tesla-space-falcon-heavy-launch-elon-musk"
  class="link-preview"
  data-size="large"
  data-media='["logo", "image"]'
  data-set-data='{"title": "hello world"}'
>
</a>

You can pass objects, arrays, booleans or even JSON structures as data attributes.

Although it is shipped with default styles, you can customize it using
<style>
  .microlink-card {
    font-family: 'Nitti, "Microsoft YaHei", 微软雅黑, monospace';
    max-width: 100%;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function (event) {
    microlink('.link-previews', {
      size: 'large'
    })
  })
</script>

By using this website you agree to ourprivacy.