Unable to embed instagram posts and videos in the forum

[dotdotdot]

Hello everyone

In Instagram there's an 'embed' code to share instagram posts, but this doesn't work on the forum. Instead, all I get is a grey box and not the whole instagram post.

Yes, I have html enabled on both the forum and personally.

I have the same problem with embedding videos. I found the same question being asked in the forum, but not answered and it was placed in 'garbage'.

Please can anyone advise how to embed instagram posts and videos?

Many thanks

[skouliki]

hello

so you have HTML activated for the whole forum and in your profile
AP...General.. Messages & Emails.. Configuration...Allow HTML:

Profil..Preferences...Allow HTML:

try this
Copy the url of the Instagram, paste it in the link you i give you below
It will give you an embedded code. Post that code in your post after

Embed Instagram

am not quite sure but I think its not possible to embedded videos from Instagram

[dotdotdot]

Many thanks, Skouliki. This link embeds the picture of an instagram post at least, even if not the text. This is very helpful, and I hope the designers of the forum will eventually resolve the issue. I can't be the only person wanting to embed instagram posts in my forum!

Thanks once again.

[skouliki]

you very welcome

you can always just copy and paste the Instagram link (not the embed code)

[dotdotdot]

you very welcome

you can always just copy and paste the Instagram link (not the embed code)

Yes, but that just inserts the link and I want to be able to show the post itself, not just a link to it.

Really appreciate your help and hope forumotion can fix this issue so we don't have to use a workaround.

Thanks!

[skouliki]

you are using this  i guess  https://www.instagram.com/developer/embedding/ right?

[dotdotdot]

Yes, exactly. I'm using the 'embed' feature in Instagram.

[Wecoc]

I made a test, let's see if this works.
Insert this Javascript in your forum:

Code:

/*
* -- Forumotion Embed (Instagram) --
* Version: [ Prototype ] EN (2018-05-12)
* Author: Wecoc
* Description: BBCode to insert embed pages using their URL
* This prototype is based on Instagram post embeds only
* Example: https://www.instagram.com/p/gbGaIXBQbn/
*/

$(function() {
 
  /*--------------------- CONFIGURATION ---------------------*/
 
  var embed_codes = {
    instagram: {
      name: "Instagram",
      match: /instagram.com\/p\/(.+?)\//,
      code: '<iframe data-s9e-mediaembed="instagram" allowfullscreen="" onload="var a=Math.random();window.addEventListener(\'message\',function(b){if(b.data.id==a)style.height=b.data.height+\'px\'});contentWindow.postMessage(\'s9e:\'+a,\'https://s9e.github.io\')" scrolling="no" src="https://s9e.github.io/iframe/instagram.min.html#{MATCH1}" style="border: 0px; height: 1120px; max-width: 640px; width: 100%;"></iframe>'
    }
  };
 
  lang = {
    insert:  "Insert",
    tooltip: "Embed",
    url:    "URL"
  };
 
  /*------------------ END OF CONFIGURATION ------------------*/
 
  if (!$.sceditor) return;
  $('head').append($('<style>', {
    text: '.sceditor-button-embed div{background-image: url(https://i62.servimg.com/u/f62/14/49/87/10/embed_10.png) !important}'
  }));
 
  $.sceditor.command.set('embed', {
    dropDown : function(editor, caller, callback) {
      // Create shortcut select
      var a = document.createElement('DIV'), b = document.createElement('INPUT'), i;
      a.innerHTML = '<label unselectable="on">' + lang.url + '</label>';
      $(b).addClass("embed-url");
      b.placeholder = "http://";
      a.append(b);
      editor.createDropDown(caller, 'embed', a);
     
      // Create insert button
      var c = document.createElement('DIV');
      c.innerHTML = '<input type="button" class="button" value="' + lang.insert + '">';
      c.onclick = function() {
        callback(b.value);
        editor.closeDropDown(true);
        return false;
      };
      a.append(c);
    },
    // wysiwyg
    exec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code.replace('{MATCH1}', result_match[1]);
            editor.insert(result, '', true, true, true);
            return;
          }
        }
      });
    },
 
    // source
    txtExec : function(caller) {
      var editor = this; $.sceditor.command.get('embed').dropDown(editor, caller, function(text) {
        var result, result_match;
        for (i in embed_codes){
          result_match = text.match(embed_codes[i].match);
          if (result_match){
            result = embed_codes[i].code.replace('{MATCH1}', result_match[1]);
            editor.insert(result, '', true, true, true);
            return;
          }
        }
      });
    },
    tooltip : lang.tooltip;
  });
  toolbar = toolbar.replace(/youtube/,'youtube,embed'); // add the button to the toolbar
});

Title: Instagram Embed
Placement: In all the pages

A new button will appear in the SCEditor, which looks like this </>
Click it and in the URL section paste the link of the Instagram post. Example: https://www.instagram.com/p/gbGaIXBQbn/

This is just a prototype. If this works fine I'll try make a version allowing other pages to be embedded too, I don't know

[dotdotdot]

Many thanks! Specifically where do I paste this?

[skouliki]

Many thanks!  Specifically where do I paste this?

admin panel...modules...Html & Javascript...Javascript codes management...create a new java

Enable Javascript code management : Yes
Title: Instagram Embed
Placement: In all the pages

[Wecoc]

@dotdotdot I made a topic about this in more detail, please check this: SCEditor Auto-Embed Button
The code I posted there is more advanced and works better