AddThis Share Button - auto resizing capability

This archived community thread from the APG vNext support forum discusses: AddThis Share Button - auto resizing capability.

About This Topic

We use AddThis social media sharing script in the software to make sharing forum and blog posts on social media sites easy. All you have to do is get your sc...

Getting Help with APG vNext

APG vNext is a powerful ASP.NET forum and community platform. For questions related to this topic:

Browse the Knowledge Base for documented solutions
Search the community forum for similar threads
Check the FAQ for common questions and answers
Review the Installation and Upgrade guides

If you need direct assistance, the support team is active in the community forum.

AddThis Share Button Auto-Resizing in APG vNext — Preventing Layout Breaks

AddThis share buttons use a JavaScript-driven auto-sizing mechanism that recalculates button dimensions after the page loads. In APG vNext's fluid-width thread layout, this late resize can cause the thread content area to shift or the share button row to overflow its container on mobile viewports. This guide covers how to constrain AddThis within APG vNext's layout and prevent the auto-resize from breaking the page structure.

Why Auto-Resizing Causes Problems

AddThis loads its widget JavaScript asynchronously. Once loaded, it measures the available container width and renders the appropriate number of share buttons. On APG vNext pages where the thread content area width changes during load (due to sidebar rendering or font loading), AddThis may render at the wrong width and then attempt to resize — causing a visible layout shift (CLS) that affects both user experience and Core Web Vitals scores.

Constraining the AddThis Container

/* Prevent AddThis from overflowing APG vNext thread layout */
.addthis_toolbox {
  max-width:  100% !important;
  overflow:   hidden !important;
  box-sizing: border-box !important;
}
.addthis_toolbox a {
  display: inline-block !important;
  flex-shrink: 0;
}

Fixing Layout Shift (CLS) from AddThis

To eliminate the layout shift, reserve space for the AddThis widget before it loads using a fixed-height placeholder:

<!-- In APG vNext skin template, wrap AddThis in a fixed-height container -->
<div class="share-wrapper">
  <div class="addthis_toolbox addthis_default_style"
       data-url="{{THREAD_URL}}"
       data-title="{{THREAD_TITLE}}">
    <a class="addthis_button_facebook"></a>
    <a class="addthis_button_twitter"></a>
    <a class="addthis_button_linkedin"></a>
    <a class="addthis_button_compact"></a>
  </div>
</div>

Mobile-Only Compact Mode

On mobile viewports (under 640px), replace the full button row with the compact "share" button only — this prevents overflow on narrow screens:

@media (max-width: 640px) {
  .addthis_button_facebook,
  .addthis_button_twitter,
  .addthis_button_linkedin { display: none !important; }
  .addthis_button_compact  { display: inline-block !important; }
}

Performance Tip — Defer AddThis Loading

AddThis adds approximately 80KB to your page weight and blocks some parsing. Defer it to after the page is interactive:

<script>
window.addEventListener('load', function() {
  var s = document.createElement('script');
  s.async = true;
  s.src = '//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXX';
  document.head.appendChild(s);
});
</script>

Replacing AddThis with the Web Share API

Since AddThis was discontinued by Oracle in 2023, the recommended long-term approach is to replace it with a combination of the Web Share API (for supported browsers) and static social sharing links (as fallback). This eliminates the dependency on third-party CDN availability and avoids browser tracking protection conflicts entirely.

Web Share API Detection and Fallback

// Progressive enhancement: use Web Share API where available
document.querySelectorAll('.thread-share-btn').forEach(btn => {
  if (navigator.share) {
    btn.addEventListener('click', async () => {
      try {
        await navigator.share({
          title: document.title,
          url:   window.location.href
        });
      } catch (err) {
        if (err.name !== 'AbortError') console.error('Share failed', err);
      }
    });
  } else {
    // Fallback: show static share links panel
    btn.addEventListener('click', () => {
      document.querySelector('.static-share-links').classList.toggle('hidden');
    });
  }
});

Static Share Links Fallback Panel

<!-- Static share links shown when Web Share API is unavailable -->
<div class="static-share-links hidden" aria-label="Share options">
  <a href="https://twitter.com/intent/tweet?url={{URL}}&text={{TITLE}}"
     target="_blank" rel="noopener">X (Twitter)</a>
  <a href="https://www.facebook.com/sharer/sharer.php?u={{URL}}"
     target="_blank" rel="noopener">Facebook</a>
  <a href="https://www.linkedin.com/shareArticle?url={{URL}}"
     target="_blank" rel="noopener">LinkedIn</a>
  <a href="https://api.whatsapp.com/send?text={{TITLE}}%20{{URL}}"
     target="_blank" rel="noopener">WhatsApp</a>
  <button>Copy Link</button>
</div>

Core Web Vitals Impact of Share Buttons

Third-party share scripts (AddThis, ShareThis, etc.) frequently impact all three Core Web Vitals:

LCP: Third-party scripts loaded in the <head> block the LCP element from rendering. Move all share script loading to after the DOMContentLoaded event.
CLS: Late-loading widgets that cause layout shifts. Fix with the fixed-height placeholder technique described above.
INP: Heavy JavaScript evaluation of the AddThis bundle increases main-thread blocking time. Lazy-loading or removing AddThis can improve INP by 50–200ms.

Using the Web Share API + static links approach eliminates all three of these impacts — the static links are present in HTML with no JS, and the Web Share API call is triggered only on user interaction.

Summary: AddThis in APG vNext — What to Expect

AddThis integration in APG vNext works well in most desktop browser configurations but faces three consistent challenges: Firefox's Enhanced Tracking Protection blocking the script, the auto-resize causing CLS on fluid-width forum pages, and the AddThis CDN being deprecated with no new updates since 2023. The solutions in order of invasiveness:

Quick fix: Add the fixed-height placeholder and mobile CSS to prevent CLS without changing the script
Medium fix: Defer the AddThis script load to after page interaction to prevent ETP-related blocking on initial load
Long-term fix: Replace AddThis with native Web Share API + static links — no external dependencies, no tracking, no CLS, full Firefox compatibility

For new APG vNext deployments in 2024 and beyond, skip AddThis entirely and implement the native approach from the start. The user experience is equivalent, and the maintenance burden is zero.

Related Resources

Looking for more help? Browse the support forum or check the Knowledge Base.