1

I want to embed Instagram posts in an RTE field and am having trouble with captions. The Instagram Embed code is a block quote and script. This gets converted to an iFrame on rendering. The instagram post appears on the page, but not the caption. I can see the caption in the RTE, and when I view source on the page, I can see the caption, but it does not appear on the page.

I'm not even sure how to approach this. Reach out to Instagram? Is this a problem with instagram conflicting with the RTE?

1

By default, the RTE in Sitecore will strip out all <script> tags. This is for safety, it is unlikely that most content editors really know enough about JavaScript to safely add scripts to pages.

You can change the default behavior by changing this setting in the config:

<setting name="HtmlEditor.RemoveScripts" value="false"/>

BUT - this comes with a warning. Doing that could open up your site to any script a content editor copies/pastes into the control. If you trust your content editors, then this may be OK. But you do not have any control over what script an editor is able to add.

It would be much better to create a rendering that allows a user to paste in the relevant Instagram tags/ids and then the rendering can control adding the script tags around that.

This is an example embed code from Instagram:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/tsxp1hhQTG/?utm_source=ig_embed" data-instgrm-version="9" 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:540px; min-width:326px; 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,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); 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://www.instagram.com/p/tsxp1hhQTG/?utm_source=ig_embed" 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="_blank">We’re putting the Weekend Hashtag Project on hold this weekend. Instead, we’re challenging people around the world to participate in the 10th Worldwide InstaMeet! Grab a few good friends or meet up with a larger group in your area and share your best photos and videos from the InstaMeet with the #WWIM10 hashtag for a chance to be featured on our blog Monday morning. Be sure to include the name of the location where your event took place along with the unique hashtag you&#39;ve chosen for your InstaMeet in your caption. Photo by @sun_shinealight</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;">A post shared by <a href="https://www.instagram.com/instagram/?utm_source=ig_embed" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Instagram</a> (@instagram) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2014-10-03T18:00:13+00:00">Oct 3, 2014 at 11:00am PDT</time>
        </p>
    </div>
</blockquote>
<script async defer src="//www.instagram.com/embed.js"></script>

The image is being set in the base64 encoding. and the caption is set below in the markup. One other reason your caption might not be showing is the inline styles when you copy the embed code. This could be conflicting with your site's styles and hiding the content.

0

Even with RemoveScripts set to false, the RTE still strips data attributes that do not have an associated value. In the embed code there is a data attribute that sets the caption display:

data-instgrm-captioned

This gets stripped out by the RTE no matter what I do. I can fix this by giving it a value.

data-instgrm-captioned="true"

Once I do this, the Instagram embed appears as expected.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.