RadEditor and Instagram Embed Not Working

3 posts, 0 answers
  1. Mark
    Mark avatar
    2 posts
    Member since:
    Mar 2014

    Posted 11 Nov 2014 Link to this post

    I used to have no problem embedding an instagram post using the RadEditor. But seems like instagram changed their embed code and now it is no longer working. RadEditor seems to do something to the instagram code. I have AllowScripts="true" ContentFilters="None" RenderMode="Lightweight". Not sure what else I can do.

    <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style=" background:#FFF; 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:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" 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:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://instagram.com/p/vQ-OYvoh4Q/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_top">For 14yrs, my cousin Ben proudly served as a Navy SEAL. Receiving two Bronze Star Medals and The Purple Heart. Willing to risk his life, so we can live ours - in freedom. Think about that for a moment... the life our families get to enjoy daily... are a direct result of very special men and women who are willing to sacrifice their own. War and combat is polarizing and I understand that. Everyone has a view. Rising above the politics of it all... I humbly say THANK YOU to our US veterans and current men and women in uniform. Love you Ben. Thank you brother - for everything. #VeteransDay #Gold #LongLiveTheBrotherhood #HolyShitYourHeadLooksBigInThisPicture</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein von therock (@therock) gepostetes Foto on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2014-11-11T15:54:07+00:00">Nov 11, 2014 at 7:54 PST</time></p></div></blockquote><script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 12 Nov 2014 Link to this post

    Hi Mark,

    On my end, I am able to successfully insert the provided instagram by just disabling the RemoveScripts and EncodeScripts filters:

    ASP.NET
    <textarea id="instagramCode">
        <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="4" style="background: #FFF; 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: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50% 0; text-align: center; width: 100%;">
                    <div style="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: -22px; width: 44px;"></div>
                </div>
                <p style="margin: 8px 0 0 0; padding: 0 4px;"><a href="https://instagram.com/p/vQ-OYvoh4Q/" style="color: #000; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" target="_top">For 14yrs, my cousin Ben proudly served as a Navy SEAL. Receiving two Bronze Star Medals and The Purple Heart. Willing to risk his life, so we can live ours - in freedom. Think about that for a moment... the life our families get to enjoy daily... are a direct result of very special men and women who are willing to sacrifice their own. War and combat is polarizing and I understand that. Everyone has a view. Rising above the politics of it all... I humbly say THANK YOU to our US veterans and current men and women in uniform. Love you Ben. Thank you brother - for everything. #VeteransDay #Gold #LongLiveTheBrotherhood #HolyShitYourHeadLooksBigInThisPicture</a></p>
                <p style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">Ein von therock (@therock) gepostetes Foto on <time style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;" datetime="2014-11-11T15:54:07+00:00">Nov 11, 2014 at 7:54 PST</time></p>
            </div>
        </blockquote>
        <script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
    </textarea>
     
     
     
    <telerik:RadEditor runat="server" ID="RadEditor1" RenderMode="Lightweight">
    </telerik:RadEditor>
     
     
    <telerik:RadButton Text="Add Hardcoded Instagram" runat="server" OnClientClicked="OnClientClicked" />
     
    <script type="text/javascript">
        function OnClientClicked(sender, args) {
            var editor = $find("<%= RadEditor1.ClientID %>");
            var instagram = document.getElementById("instagramCode").value;
            editor.pasteHtml(instagram);
        }
    </script>


    C#
    protected void Page_Load(object sender, EventArgs args)
    {
        RadEditor1.DisableFilter(EditorFilters.RemoveScripts);
        RadEditor1.DisableFilter(EditorFilters.EncodeScripts);
    }

    You can try adding the above code in a page and run it to see the results.

    There might be a problem to render the instagram if the iframe is not initialized. Although, this depends on the approach used to insert programmatically the HTML code. If this is the case, you can try resolving this behavior by calling  the client-side onParentNodeChanged() right after inserting the instagram code.

    Regards,
    Ianko
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    2 posts
    Member since:
    Mar 2014

    Posted 13 Nov 2014 in reply to Ianko Link to this post

    The Page_Load RadEditor1.DisableFilter(EditorFilters.RemoveScripts);    RadEditor1.DisableFilter(EditorFilters.EncodeScripts); did the trick. Thanks!
Back to Top