eleventy-plugin-embed-instagram

An Eleventy plugin to automatically embed Instagram photos and videos, using just their URLs.

Usage no npm install needed!

<script type="module">
  import eleventyPluginEmbedInstagram from 'https://cdn.skypack.dev/eleventy-plugin-embed-instagram';
</script>

README

eleventy-plugin-embed-instagram

NPM Version Build test status codecov
MIT License Contributor Covenant

This Eleventy plugin automatically embeds Instagram photos and videos from URLs in markdown files.

Install in Eleventy

In your Eleventy project, install the plugin through npm:

$ npm i eleventy-plugin-embed-instagram

Then add it to your Eleventy config file (usually .eleventy.js):

const embedInstagram = require("eleventy-plugin-embed-instagram");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(embedInstagram);
};

Usage

To embed an Instagram photo or video into any markdown page, paste its URL into a new line. The URL should be the only thing on that line.

Markdown file example:

...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, elit vel condimentum porta, purus.

https://www.instagram.com/p/B9XK4J3jVui/

Maecenas non velit nibh. Aenean eu justo et odio commodo ornare. In scelerisque sapien at.

...

Result:

Screenshot of an Instagram photo of pine trees in fog

The plugin supports common URL variants as well. These will also work:

<!-- No protocol: -->

instagram.com/p/B9XK4J3jVui/
www.instagram.com/p/B9XK4J3jVui/

<!-- With or without HTTPS: -->

http://www.instagram.com/p/B9XK4J3jVui/
https://www.instagram.com/p/B9XK4J3jVui/

<!-- With or without 'www': -->

https://www.instagram.com/p/B9XK4J3jVui/
https://instagram.com/p/B9XK4J3jVui/

<!-- URLs with extra parameters: -->
https://www.instagram.com/p/B9XK4J3jVui/?foo=bar

Notes and caveats

  • This plugin is deliberately designed only to embed when the URL is on its own line, and not inline with other text.
  • To do this, it uses a regular expression to recognize Instagram URLs, wrapped in an HTML <p> tag. If your Markdown parser produces any other output, it won’t be recognized.
  • I’ve tried to accommodate common variants, but there are conceivably valid Instagram URLs that wouldn’t get recognized. Please file an issue if you run into an edge case!
  • This plugin uses transforms, so it alters Eleventy’s HTML output as it’s generated. It doesn’t alter the source markdown.
  • By necessity, this plugin will add a call to Instagram’s third-party javascript file. It does this once per page, if that page contains an Instagram embed.
  • Because the aspect ratio of Instagram media can vary widely, the embed is not currently responsive. By default, Instagram’s script injects an iframe with a hard-coded width of 326 pixels. I’ve opted to lead this default behavior intact.
  • To make your Instagram embeds responsive, you can change their widths with CSS. Give them a standard pixel size, or set them to fill their full available horizontal width. Instagram’s embed script will automatically upscale them to fill the available space.
.eleventy-plugin-embed-instagram {
  width: 100%;
}
  • You can change the class name to whatever you prefer by passing an options object when you configure the plugin in your .eleventy.js file:
module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(embedInstagram, {
    embedClass: 'alternate-class-string'
});
};