README.md

Instagram Managed Component

Documentation

Managed Components docs are published at https://managedcomponents.dev .

Find out more about Managed Components here for inspiration and motivation details.

🚀 Quickstart local dev environment

1. Make sure you're running node version >=18.
2. Install dependencies with npm i
3. Run unit test watcher with npm run test:dev

⚙️ Tool Settings

Settings are used to configure the tool in a Component Manager config file

No settings are required to use the Instagram Managed Components.

🧱 Fields Description

Fields are properties that can/must be sent with certain events

No fields are processed by the Instagram Managed Components.

⎙ Embeds

Instagram Post

This Managed Components uses the Embeds API to render Instagram posts on a web page, with its embed instagram-post. This Embed accepts the folowing parameters:

Post URL required

Specify the post you wish to render using the post-url parameter. The value should hold the full URL, excluding any query parameters.

Captions optional

Use the captions parameter to determine whether to include post captions. If captions parameter is set to true, the MC will render the post including its captions. Otherwise, it will render the post without captions.

---

Examples:

1. To place an embed on a page using WebCM, use a placeholder div element with the following attributes:

<div
  data-component-embed="instagram-instagram-post"
  data-post-url="https://www.instagram.com/p/C3Sk6d2MTjI/"
  data-captions="true"
></div>

2. To place an embed on a page using Cloudflare Zaraz, use a placeholder instagram-post HTML element with the following attributes:

<instagram-post
  post-url="https://www.instagram.com/p/C3Sk6d2MTjI/"
  captions="true"
></instagram-post>

Support

This MC only supports the rendering an image, text, captions and post details. Posts that include an image gallery and/or videos will be rendered as a single image post. ◊

📝 License

Licensed under the Apache License.