Boosting Storefront Engagement with Dynamic Content: A Developer’s Guide to Integrating Instagram Reels into Your E-commerce Platform

In this document, we will learn how to show Instagram Reels in your storefront website using Instagram's GraphQL API and Fynd Storefront Binding. We will create a custom extension that fetches and displays Instagram Reels in the footer section of the storefront website. This integration allows sellers to show their latest Instagram content on their storefront, providing dynamic content to increase customer engagement.

Prerequisites

• Ensure that you have created an extension. Refer to Get Started for more details.
• Ensure that you have created a theme. Refer to Create a Theme for more details.
• Collect Instagram API tokens from your Meta Developer account. Refer to Instagram Basic Display API↗ for more details.

note

Please refer to the latest official Instagram documentation to ensure accuracy and compatibility, as APIs are subject to change.

This tutorial is divided into four sections:

1. Create a New Extension Bindings
2. Creation of Draft Binding
3. Add Bindings to Your Theme
4. Publish the Binding

Create a New Extension Bindings

Do the following steps to create a new extension bindings:

1. Run the following command inside the folder of the extension you've created:

fdk binding init

The CLI will prompt you to select your extension from the list.

2. Select the appropriate extension from the list.
3. Enter binding name insta-reels-binding.
4. Select the framework React.
5. Select extension interface Web Theme.

A insta-reels-binding folder is created in path: <extension_folder>/bindings/theme/react/.

Boilerplat Overview

The FDK CLI generates the following boilerplate code in insta-reels-binding folder.

<extension_folder>/bindings/theme/react/insta-reels-binding
  ├── dist
  │     ├── insta-reels-binding.umd.min.css
  │     ├── insta-reels-binding.umd.min.js
  │     └── sections.commonjs.js
  │
  └── src
        ├── component/ProductCard.jsx
        ├── sections/product-list.jsx
        ├── styles/styles.css
        └── index.js

Modify the Component Code

• Open /src/product-list.jsx file and replace its content with the following:

import React, { useState, useEffect } from "react";
import styles from "../styles/style.css";

export function Component({ props }) {
  let accessToken = props.accessToken.value;
  const [reels, setReels] = useState([]);

  // For Frontend Binding
  useEffect(() => {
    const fetchReels = async () => {
      try {
        const response = await fetch(
          `https://graph.instagram.com/me/media?fields=id,caption,media_type,permalink&access_token=${accessToken}`
        );
        const data = await response.json();
        const videoReels = data.data.filter(
          (item) => item.media_type === "VIDEO"
        );
        setReels(videoReels);
      } catch (error) {
        console.error("Error fetching Instagram reels:", error);
      }
    };

    fetchReels();
  }, [accessToken]);
  useEffect(() => {
    const footerElement = document.getElementById("instagram-footer");
    if (footerElement && reels.length > 0) {
      reels.forEach((reel) => {
        const iframe = document.createElement("iframe");
        iframe.src = `${reel.permalink}embed`;
        iframe.width = "400";
        iframe.height = "480";
        iframe.frameBorder = "0";
        iframe.allowFullscreen = true;
        iframe.style.marginRight = "10px";
        footerElement.appendChild(iframe);
      });
    }

    return () => {
      const footerElement = document.getElementById("instagram-footer");
      if (footerElement) {
        while (footerElement.firstChild) {
          footerElement.removeChild(footerElement.firstChild);
        }
      }
    };
  }, [reels]);

  const title = props?.title?.value ?? "Extension Title Default";

  return (
    <div>
      <div id="instagram-footer" style={{ display: "flex", overflowX: "auto" }}></div>
    </div>
  );
}
export const settings = {
  label: "Product List",
  name: "product-list",
  props: [
    {
      id: "title",
      label: "Page Title",
      type: "text",
      default: "Extension Title",
      info: "Page Title",
    },
    {
      id: "accessToken",
      label: "Access Token",
      type: "text",
      default: "",
      require: true,
      info: "Your Instagram Graph API access token.",
    },
  ],
  blocks: [],
};

A Deep Dive into the product-list.jsx File

The following code implements the integration of Instagram Reels into your theme. Below is a breakdown of how it works:

Imports and Dependencies

import React, { useEffect, useState } from "react";
import styles from "../styles/style.css";

• React: The code uses React, a popular JavaScript library for building UI.
• useEffect: React hook to handle side effects such as fetching data after the component has rendered or when certain dependencies (like accessToken) change.
• useState: React hook for managing component state. In this case, it tracks the reels (Instagram video data) and loading states.

Component Definition

export function Component({ props }) {
  const accessToken = props.accessToken.value || "<YOUR_ACCESS_TOKEN>";
  const title = props.title.value || "Instagram Reels";
  const [reels, setReels] = useState([]);

• Component: This is functional React component accepts props passed from the theme editor, such as accessToken and title.
• useState:
  • reels: A state variable that holds the list of Instagram Reels fetched from the API.
  • setReels: A function to update the Reels state.
• accessToken: This retrieves the Instagram Graph API access token from the props object. It uses a default value (<YOUR_ACCESS_TOKEN>) if no token is provided.
• title: The title of the component, which is customizable via the theme editor. If not set, it defaults to "Instagram Reels".
• Props Explanation:
  • props: The Component function takes props as input, which the theme editor passes.
  • props.accessToken.value: The access token used to authenticate API requests to Instagram.
  • props.title.value: A customizable title for the component, which defaults to "Instagram Reels" if not provided.

Fetching Instagram Reels

useEffect(() => {
   const fetchReels = async () => {
     try {
       const response = await fetch(
        `https://graph.instagram.com/me/media?fields=id,caption,media_type,permalink&access_token=${accessToken}`
       );
       const data = await response.json();
       const videoReels = data.data.filter((item) => item.media_type === "VIDEO");
       setReels(videoReels);
     } catch (error) {
       console.error("Error fetching Instagram reels:", error);
     }
   };

   fetchReels();
 }, [accessToken]);

• useEffect: This hook runs when the component is mounted or when the accessToken changes.
• fetchReels:
  • An asynchronous function fetches data from the Instagram Graph API using the provided accessToken.
  • The API endpoint (/me/media) retrieves media items like id, caption, media_type, and permalink.
  • Filtering: Only the items where media_type === "VIDEO" are included so that the component will display only video Reels.
• Error Handling: If the fetch operation fails, an error is logged to the console.

Rendering the Reels

useEffect(() => {
   const footerElement = document.getElementById("instagram-footer");
   if (footerElement && reels.length > 0) {
     reels.forEach((reel) => {
       const iframe = document.createElement("iframe");
       iframe.src = `${reel.permalink}embed`;  // Embed the Instagram Reel
       iframe.width = "400";                   // Set width for iframe
       iframe.height = "480";                  // Set height for iframe
       iframe.frameBorder = "0";               // Remove border around iframe
       iframe.allowFullscreen = true;          // Enable fullscreen functionality
       iframe.style.marginRight = "10px";      // Add space between each iframe
       footerElement.appendChild(iframe);      // Append iframe to the footer
     });
   }

   return () => {
     const footerElement = document.getElementById("instagram-footer");
     if (footerElement) {
       while (footerElement.firstChild) {
         footerElement.removeChild(footerElement.firstChild);
       }
     }
   };
 }, [reels]);

• The useEffect hook is triggered whenever the reels state changes. It checks for any Reels to display and then embeds each one in an iframe.
• iframe: An iframe element is created for each Instagram Reel, allowing you to embed the Reel directly into the page. It uses the reel.permalink to construct the embed URL.
• iframe Styling:
  • Width (400px) and height (480px) are set for each iframe.
  • frameBorder is set to 0 to remove borders.
  • allowFullscreen allows users to view the embedded video in fullscreen mode.
  • style.marginRight adds spacing between embedded iframes for better layout.
  • Cleanup: In the cleanup function return () => {}, all child elements of the footerElement are removed to avoid duplicate iframes - when the component is re-rendered or unmounted.

Return the Complete JSX

return (
   <div class={styles.container} >
     <div id="instagram-footer" style={{ display: "flex", overflowX: "auto" }}></div>
   </div>
 );

• The component returns a div containing another div with the ID instagram-footer, where the Instagram iframes will be appended.
• Styling:
  • display: "flex" ensures that the iframes are laid out in a row.
  • overflowX: "auto" allows horizontal scrolling if the number of iframes exceeds the available width.

Settings for the Component

export const settings = {
 label: "Product List",
 name: "product-list",
 props: [
   {
     id: "title",
     label: "Page Title",
     type: "text",
     default: "Extension Title",
     info: "Page Title",
   },
   {
     id: "accessToken",
     label: "Access Token",
     type: "text",
     default: "",
     require: true,
     info: "Your Instagram Graph API access token.",
   }
 ],
 blocks: [],
};

• settings Object: Metadata for the component, which is used in the theme editor.
  • props: Specifies editable fields in the editor:
    • title: A text input field for customizing the page title (default: "Instagram Reels").
    • accessToken: A required text field for entering the Instagram Graph API access token.
  • label: Displays the name of the section in the editor ("Instagram Reels").

Creation of Draft Binding

1. Run the following command to create a draft version of your binding:

fdk binding draft

2. Enter the same binding name, framework, and extension interface as before.
   (insta-reels-binding, React, and Web Theme)

Add Bindings to Your Theme

1. Once the draft is ready, go to Fynd Commerce → Sales Channel → Appearance → Themes → Edit to edit.
2. In the left pane, go to Settings tab and click Footer Bindings.
3. Click Add Section+.
4. Go to Extension Sections at the end of the list and click insta-reels-binding.
5. Configure the section by entering the Instagram API token.
6. Click Save and preview the storefront to verify the Instagram Reels display.

Publish the Bindings

Once satisfied with the functionality, you need to publish the bindings to make it available for all environments.

1. Run the following command:

fdk binding publish

2. Enter the same binding name, framework, and extension interface.
3. Follow the CLI prompts to confirm the details.

You have successfully embedded a list of Instagram Reels in the footer of your storefront website.

---

Connect with Us

For a customized solution that fits your needs, feel free to reach out to our Team.