Embed Instagram Code

Hello 

I have asked in the past bout embedding Instagrams onto our fourm. If the code is copies from Embed on the Instagram it doesn't post the picture, it just posts the comments. I was given an alternative method to embed Instagram Codes onto our forum. Allow HTML is activated on the whole forum.

https://ctrlq.org/instagram/

This has not been functioning for weeks, and trying to contact someone on their site, no response. 

Is it possible for someone to create this for me, and have an Icon Button near the quote buttons where we can easily use it?

Code:

<iframe src="insert link here embed/captioned" width="500" height="905" frameborder="0" scrolling="no" allowtransparency="true"></iframe> 

Thank you.

Hello @Guardian-Angel,

Are you talk about: CodePen?! If yes, create a new JavaScript page with investment in all pages with the following code:

Code:

(function($) {
    'use strict';
 
 
    $(window).on('load', function() {
        var $sceditor = $("#text_editor_textarea");
 
        if (!$sceditor.length) {
            return;
        }
 
        $([
                '<div class="sceditor-group fa-ig-group">',
                '<a class="sceditor-button sceditor-button-ig" data-sceditor-command="ig" unselectable="on" title="Insert an Instagram post">',
                '  <div unselectable="on" style="background-image: url(\'https://image.flaticon.com/icons/png/512/174/174855.png\');background-position: center center; background-size: contain;">Insert an Instagram postdl</div>',
                '</a>',
                '</div>'
            ].join('\n'))
            .on('click', function() {
                $('.sceditor-insertig').toggle();
            })
            .insertAfter('.sceditor-group:last');
 
        $([
                '<div class="sceditor-dropdown sceditor-insertig">',
                '  <div>',
                '    <label for="fa-ig-input">URL</label>',
                '    <input id="fa-ig-input" placeholder="Ex: https://www.instagram.com/p/CAdLgTJHHCL/?hl=pt" value="">',
                '  </div>',
                '  <div>',
                '    <input type="button" class="button" ' +
                '    id="fa-ig-button" value="Insert">',
                '  </div>',
                '</div>',
            ].join('\n'))
            .css({
                left: $('.fa-ig-group').offset().left + 'px',
                top: $('.fa-ig-group').offset().top + 'px',
                marginTop: '28px',
                display: 'none'
            })
            .appendTo('body');
 
        $('#fa-ig-button')
            .on('click', function() {
 
                if (!$('#fa-ig-input').val()) return false;
 
                $sceditor.sceditor('instance').insertText('<blockquote class="instagram-media" data-instgrm-version="2" style=" background:#000000; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"><div style=" background:#000000; line-height:0; margin-top:40px; padding-bottom:55%; padding-top:45%; text-align:center; width:100%;"><div style="position:relative;"><div style=" -webkit-animation:dkaXkpbBxI 1s ease-out infinite; animation:dkaXkpbBxI 1s ease-out infinite; background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAAGFBMVEUiIiI9PT0eHh4gIB4hIBkcHBwcHBwcHBydr+JQAAAACHRSTlMABA4YHyQsM5jtaMwAAADfSURBVDjL7ZVBEgMhCAQBAf//42xcNbpAqakcM0ftUmFAAIBE81IqBJdS3lS6zs3bIpB9WED3YYXFPmHRfT8sgyrCP1x8uEUxLMzNWElFOYCV6mHWWwMzdPEKHlhLw7NWJqkHc4uIZphavDzA2JPzUDsBZziNae2S6owH8xPmX8G7zzgKEOPUoYHvGz1TBCxMkd3kwNVbU0gKHkx+iZILf77IofhrY1nYFnB/lQPb79drWOyJVa/DAvg9B/rLB4cC+Nqgdz/TvBbBnr6GBReqn/nRmDgaQEej7WhonozjF+Y2I/fZou/qAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-44px; width:44px;"></div><span style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:12px; font-style:normal; font-weight:bold; position:relative; top:15px;">Loading</span></div></div><p style=" line-height:32px; margin-bottom:0; margin-top:8px; padding:0; text-align:center;"> <a href="' + $('#fa-ig-input').val() + '" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; text-decoration:none;" target="_top"> View on Instagram</a></p></div><style>@-webkit-keyframes"dkaXkpbBxI"{ 0%{opacity:0.5;} 50%{opacity:1;} 100%{opacity:0.5;} } @keyframes"dkaXkpbBxI"{ 0%{opacity:0.5;} 50%{opacity:1;} 100%{opacity:0.5;} }</style></blockquote>');
 
                $('.sceditor-insertig').toggle();
                $('#fa-ig-input').val('');
 
 
            });
    });
}(jQuery));

And go to the overall_footer_end (template) add below:

Code:

{PROTECT_FOOTER}

this

Code:

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

How it works? Very simple you just need to copy the url of the Instagram post for example: https://www.instagram.com/p/CAdLgTJHHCL/?hl=pt and use the new Instagram editor button to paste the URL

Thank you @pedxz! Can you tell me how to get to:

And go to the overall_footer_end (template) add below:

In fact you do not need to follow this step I see that you have already installed it via JavaScript

This is what I get.

sadly

Can you tell me how to get to:

Go to Adminstration Panel > Display > Templates > General edit the overall_footer_end find:

Code:

{PROTECT_FOOTER}

below add

Code:

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

No, same thing. This is so perfect, is there any reason you can think of why it's not working?

I tried on Google Chrome and Edge.

Could you post a link to a topic that guests can see that contains them?

Guests can see all topics but they can't reply. Here's the link in my testing topic.

https://www.bachandbachettefans.net/t2448p288-testing

How do you have unprotected HTML set in the AP?

How do I get to where you want me to check?

AP > General > Message & emails > Configuration
It is in the top section.
It is right below the allow HTML option.

Try all members.

I changed it to All Members and when I went back to the topic to try it, the first two posts that were orginally black, the picture appeared. Those were the ones I posted after adding the code below. Now it won't work after changing to All Members. I think I'll play with each option, clear cookies and history restart etc. I'll come back here to report one way or another but it will probably be tomorrow. Thanks so much for your help.

Code:

<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

I put it back to Admin, removed the footer code, deleted cookies history etc restarted, then added the footerscript first, and it worked! I guess it didn't take right away or it was delayed before it worked.

Thank you both so much for taking the time to help me! @pedxz @SLGray

Oops, I marked it solved, maybe too soon. I found a random topic where when I choose the icon, nothing happens.

I will play with it some more tomorrow. Sorry for the double post, but I didn't want the topic to be locked in case I need help tomorrow. Thank you.

I'm not sure why it's not working on some random topics but I notice the post associated with the IG is not showing, just the picture. Is there anyway to solve that?