Page Content and Widget Loading Issues

Developer help
1

If path is non-direct like from a different page on the Website then the AddThis is not loaded correctly and issues with Instagram Embedded Content when revisited from a different path.

  1. If I refresh the page, the AddThis Widget is loaded properly, why not on the initial load. How do I fix this? This doesn’t happen if I directly open vamsithota.me/photography
    Screenshot 2019-12-29 at 12.12.14 PM
  2. If I next Click on Blog or Home > now Click on Photography > Images are not loading and missing. How do I fix this?
  3. If I’m using Instagram Card, it will not display the image with the above steps (Home/Blog > Photography > Home/Blog > Photography.)
    Screenshot 2019-12-29 at 8.47.38 PM
    Screenshot 2019-12-29 at 8.47.38 PM3104×1832 335 KB
2

@DavidDarnes Any help here with Social Sharing Plugins and Instagram Card / Instagram Embedded Content?

3

Just looked at the photography page and there appears to be a lot of embeds, and some of them are causing errors. If you check your console while browsing the page you’ll see errors coming from embeds like Typeform, which I can’t see on the page. Please ensure you’re using embeds appropriately

4

Typeform is working correctly, which you can see as a small button on bottom right. If you see the Social Sharing Plugins like (AddThis, ShareThis, Sumo) are all having loading issues when switching between pages but they load correctly with a hard refresh.

Instagram Embedded Code or Native Instagram Card also loads correctly on initial load but when switching between pages, the Instagram Embedded Code doesn’t load at all and the Native Instagram Card shows the layout but not the image itself like in the screenshot.

If you haven’t got an idea about the issues after following the sites to reproduce the issues, I’ll share screen recording.

5

The embeds may be working on initial load, but if you check your browser console logs you’ll see several errors. You’ll need to ensure there are no errors on the page so other embeds won’t be affected by them

6

All the errors are CSP Policy related and they are set to Report Only. So there won’t be any functionality issues because of that.

As you said, “No errors on the page so other embeds won’t be affected by them”. I have commented out of the code that’s causing that CSP related errors and any other errors.

Still, Social Sharing Plugins, Instagram Embeds using Embed Code from their Site, Instagram Native Embed Card still have the same issues which I have mentioned.

7

Thanks for cleaning up the errors in the console, it’s now clearer to see what the problem is. London theme uses JavaScript to load in new content when navigating between pages, it’s the reason why the pages transition so smoothly. This means that you’ll need to reload the ‘addThis’ sharing buttons after the content has been loaded.

The official AddThis website has some documentation on this:

There’s also a couple of solutions on this Stack Overflow page:

This is what’s most likely breaking the addThis buttons as well as all the other embeded items you have on the page

8

@DavidDarnes Thanks for the solution, even reloading the AddThis using

<script>window.addthis.initialize();</script>

The AddThis is loading when shifting between pages but they are skewed. Even the code blocks from the other articles didn’t help, either they are loading skewed or just showing AddThis Close as you can see in the initial screenshot.

For Instagram, this helped me to get it working

<script>window.instgrm.Embeds.process(); </script>

Can you help me with a working solution for AddThis?

image
image1440×10674 472 KB

9

Did you look at the stack overflow page I linked to? It didn’t say to use window. I just looked at London theme and it already has an event to hook into for reloading content. Try something like this:

<script>
  document.addEventListener('swup:contentReplaced', event => {
    addthis.initialize();
    instgrm.Embeds.process();
  });
</script>
10

I tried this but it didn’t help with addThis as it’s showing either AddThis and Close Text on bottom left or scaled social media icons when switching between pages.

I raised an issue swup to see if they can help to fix this issue

11

From what I’m seeing your site is now loading Instagram fine, it’s just the AddThis code that isn’t working correctly. You need to work through the code you’ve added and refer to the AddThis documentation