Jump to content

Instagram reel link does not embed as per docs/ACP


WebCMS

Recommended Posts

Prolly, you made a typo and I could not understand what you said.

"if facebooks embed service is set up, it will not embed reels unfortunately."

Please clarify...

I see that Facebook links have the same issue -

https://www.facebook.com/colm.cahill.77/videos/1017591468687131

Instagram links are shared more than Facebook links and is very important. It would be great if you can get these embedding woking so they can be played right in the post/comment.

YouTube and Twitter embed fine.

Edited by WebCMS
Link to comment
Share on other sites

I'm not sure but asked ChatGPT for JavaScript embed code IG reels like this - will I be able to use this code in any way?

Does Facebook embed videos have the same issue?

It would be great if these work as many users ask for embedded content to play on-page for better UX.

To embed an Instagram reel using JavaScript, you can dynamically generate the necessary HTML code and insert it into your webpage's DOM (Document Object Model). Here's a step-by-step guide on how to do this:

  1. Create an HTML Container: Start by adding an empty HTML container element (e.g., a <div>) to your webpage where you want the Instagram reel to appear. Give this container an id attribute so you can target it with JavaScript.

    <div id="instagramReelContainer"></div>
  2. Write JavaScript Code: Now, you'll need to write JavaScript code to fetch the Instagram embed code and insert it into the container. You can use the Instagram API or the oEmbed API for this purpose. In this example, we'll use the oEmbed API, which doesn't require authentication.

    <script>
    // Replace 'YOUR_INSTAGRAM_REEL_URL' with the URL of the Instagram reel you want to embed.
    const instagramReelURL = 'https://www.instagram.com/p/your_instagram_reel_url/';
    // Make a request to the Instagram oEmbed API. fetch(`https://api.instagram.com/oembed/?url=${encodeURIComponent(instagramReelURL)}`) .then((response) => response.json())
    .then((data) => {
    // Extract the HTML code from the response.
    const instagramEmbedCode = data.html;
    // Get the container element by its ID. const container = document.getElementById('instagramReelContainer');
    // Insert the Instagram embed code into the container.
    container.innerHTML = instagramEmbedCode;
    })
    .catch((error) => {
       console.error('Error fetching Instagram data:', error);
    });
    </script>
  3. Replace 'YOUR_INSTAGRAM_REEL_URL': In the JavaScript code above, replace 'YOUR_INSTAGRAM_REEL_URL' with the actual URL of the Instagram reel you want to embed.

  4. Include the JavaScript: Make sure to include this JavaScript code in the <script> tags within the <head> or before the closing </body> tag of your HTML document.

  5. Test Your Page: Load your HTML page in a web browser, and the Instagram reel should be embedded within the designated container.

Link to comment
Share on other sites

Videos I believe will. Its just reels that dont at present. Whether or not you can integrate something like the above would depend on your own development knowledge. We can only advise on what the current suite is capable of.

The reality is, that integrating with Facebook is getting harder and harder, unfortunately. In order to integrate successfully, you will need to ensure you get business verification, as previously mentioned

Link to comment
Share on other sites

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...