ShareThis Button Display Problem and URL Update

[leimao]

Describe the bug Occationally, the ShareThis buttons on my website do not display well. It might look like this.

However, after refreshing the web page, the buttons become normal.

I don't know what happened. So I looked into the source code a little bit.

It seems that hexo-inferno ShareThis requires this script.

      <>
        <div class="sharethis-inline-share-buttons"></div>
        <script src={installUrl} defer={true}></script>
      </>

However, from the ShareThis website, it seems that I no longer need this script.

Do you think hexo-inferno requires an update for ShareThis? (Although I am not sure if it can fix my button display problem)

System and Environment The version and configuration of Hexo and Icarus.

• Hexo, OS, and node version (use hexo version command to view these information)

  $ hexo version
  INFO  Validating config
  Inferno is in development mode.
  INFO  =======================================
  ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
  ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
  ██║██║     ███████║██████╔╝██║   ██║███████╗
  ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
  ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
  =============================================
  INFO  === Checking package dependencies ===
  INFO  === Checking theme configurations ===
  INFO  === Registering Hexo extensions ===
  hexo: 5.4.0
  hexo-cli: 4.3.2
  os: linux 6.8.0-39-generic Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat)
  node: 20.13.1
  acorn: 8.11.3
  ada: 2.7.8
  ares: 1.28.1
  base64: 0.5.2
  brotli: 1.1.0
  cjs_module_lexer: 1.2.2
  cldr: 45.0
  icu: 75.1
  llhttp: 8.1.2
  modules: 115
  napi: 9
  nghttp2: 1.61.0
  nghttp3: 0.7.0
  ngtcp2: 1.1.0
  openssl: 3.0.13+quic
  simdutf: 5.2.4
  tz: 2024a
  undici: 6.13.0
  unicode: 15.1
  uv: 1.46.0
  uvwasi: 0.0.20
  v8: 11.3.244.8-node.20
  zlib: 1.3.0.1-motley-7d77fb7

• Theme configuration file _config.icarus.yml or themes/icarus/_config.yml

  share:
  type: sharethis
  # URL to the ShareThis share plugin script
  install_url: "https://platform-api.sharethis.com/js/sharethis.js#property=xxxxxxxxxxxxxxxxxxx&product=inline-share-buttons"

• Browser and version (e.g., Firefox 70.0, Chrome Android 80.0)

  Version 127.0.6533.88 (Official Build) (64-bit)

[leimao]

After looking at the ShareThis instruction again, I think this <script src={installUrl} defer={true}></script> is required. However, the ShareThis website recommended using <script src={installUrl} async></script>. Will this make a difference?

[leimao]

Also according to the ShareThis instruction, this script should go to the head before <div class="sharethis-inline-share-buttons"></div>.

[ppoffice]

When the widget didn't render correctly, does it stuck in that state or it eventually rendered correctly after waiting? The widget should display without issues no matter the <script> is marked async or defer.

[leimao]

@ppoffice It will not render correctly unless I refresh the web page in the browser. This happens from time to time on my Linux and MacOS OS (I mostly use Chrome), but not very often. I don't know if it's the service provider's issue or our implementation issue.

[ppoffice]

I cannot reproduce the issue with my ISP. Could you please change to another CDN provider and see if the issue resolve for you?

[leimao]

I just encountered this again. It happens once every few days. Because it's not always reproducible, switching CDN providers is not a good solution.