HTML Embeds

🙋Get Help
1

Hey there!

I’ve just started playing around with Frontity and it looks great! We have an editorial team that will be creating content and they use Instagram/Facebook/JW Player embeds quite a lot.

These embeds don’t load when the site is client-side, where would I start looking to get these working?

1 Like
2

Hi @rob!

If the embedded content is an <iframe>, it should work out of the box. However, if the embedded content consists of an HTML element and a <script> trying to render something into it, it won’t work (I think that’s how Instagram and Facebook embeds work, not sure for JW Player). The reason is that React doesn’t execute <script>s on load when they are rendered with dangerouslySetInnerHTML.

The solution is to manually insert those scripts so they execute on load (as described here). In order to do this, our solution for the first version of the framework was an HTML to React converter, where every <script> would be rendered manually by a React component on mount.

We are planning on implementing a similar component for Frontity again, but in the meanwhile, a solution could be to find the scripts inside the content, once the component is mounted, and manually remove and add the <script>s to the DOM again, so they execute on load.

I hope this explanation helped you. If you have any doubt, don’t hesitate to ask :slight_smile:

3

Hey @rob, welcome to the community :relaxed:

I’ve just opened a new topic with the 1.0 Roadmap. It includes our html2react package in case you want to follow the progress!

@David, after we release the html2react package, will we be able to create a <Script /> React component that executes any <script> tag found in the post content HTML?

4

If I remember correctly, that’s something we’ve already resolved previously for rendering things like ads.

So, yes :blush:

5

Hello dear Comunitty, seems like this topic was solved but it’s not completely clear for me.

I’m not sure if I have to use component for this.

I want to embed widget provided by TripAdvisor and also by facebook. For example TripAdvisor provide the folowing code for these.

   <script async src="https://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=716&amp;locationId=12493345&amp;lang=en_US&amp;rating=true&amp;nreviews=5&amp;writereviewlink=true&amp;popIdx=true&amp;iswide=false&amp;border=true&amp;display_version=2" data-loadtrk
        onload="this.loadtrk=true"></script>
    <script async src="https://www.jscache.com/wejs?wtype=excellent&amp;uniq=638&amp;locationId=12493345&amp;lang=es_PE&amp;display_version=2" data-loadtrk onload="this.loadtrk=true"> </script>
    <script async src="https://www.jscache.com/wejs?wtype=rated&amp;uniq=841&amp;locationId=12493345&amp;lang=es_PE&amp;display_version=2" data-loadtrk onload="this.loadtrk=true"></script>

And the HTML code: 


                     <div id="TA_selfserveprop716" class="TA_selfserveprop">
                            <ul id="vdRiob4DYBN3" class="TA_links vlKuxia9mn">
                                <li id="LvR0RYN1bU" class="N1CBghGDuIq9">
                                    <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" /></a>
                                </li>
                            </ul>
                      </div>

 I have this code working on a website base on just bootstrap. but How can I make it work in a current website base on frontity.js. Would be great if some of you can help me with this. Where should I put each code to make it work. Thanks in advance to everyone.