0

Our website has been serverd via Cloudflare proxy for a long time and everything goes well. Recently we wanted to place social media buttons on the webpages, we have buttons for LINE and for Facebook. Buttons of both social media work normally when tested in localhost. However, when the page is updated to the production environment, we find that LINE's buttons do no show and only Facebook's is viewable. Later we found that by turnning off Cloudflare's proxy LINE's buttons appear! This issue is illustrated in the figure. It is also confirmed that if we put the page in another server where pages do NOT go through Cloudflare proxy, LINE's buttons can be seen normally. The buttons are embedded to the webpage using simple html and javascript.

enter image description here

We do not want to turn off Cloudflare proxy for good just in order to show the the social media buttons, but we have no idea about how to prevent LINE's buttons from invisible. Could you please help pointing out what is the key we missed? Thank you very much!

Ray Yen
  • 55
  • 9

1 Answers1

1

It would be worth checking if you have specific Cloudflare features enabled which may affect the execution of 3rd party Javascript code:

  1. Check "JS" Auto Minification in the Speed options (documentation)
  2. Check Rocket Loader and if enabled, try disabling it (documentation)

Typically (1) is very unlikely to cause any issues. You should also check and share if there are any errors in the browser developer console, or with loading resources in the two scenarios - this would help finding a root cause.

Paolo Tagliaferri
  • 981
  • 7
  • 11
  • You are amazing! The Rocket Loader was originally turned on. I followed your suggestion (2) disabling the Rocket Loader and turned ON the proxy, the LINE buttons showed up! By toggling the rocket loader I can clearly observe the effect it does on the buttons to show and hide. I cannot find any error message in developer console by the way. Turning on Rocket Loader there is a script "rocket-loader.min.js" being loaded, but what makes it conflict with LINE's script is a mystery to me. Will I compromise too much if turning off the Rocket Loader? Thank you very much, Paolo! – Ray Yen Jan 25 '22 at 03:45
  • Quote from the documentation for the Rocket Loader you provided: "If you observe JavaScript or jQuery issues for your website, determine if disabling Rocket Loader via the Cloudflare Speed app resolves the issue." Looks like the unexpected issues are not rare. – Ray Yen Jan 25 '22 at 03:49
  • 1
    You are welcome. Rocket Loader is an optimization tool and it re-arranges the resources on the page and attempt to speed it up. In some cases, certain third party libraries are not compatible with it - it is recommended to test it well to ensure compatibility before enabling it on a production site. – Paolo Tagliaferri Jan 25 '22 at 08:16