# Load Social Media Post Embeds Only on Click

> Holds back embedded posts from X (Twitter), Instagram, Facebook, TikTok and Threads behind a short notice, so their scripts and trackers only load when the visitor asks for them.

- Type: PHP
- Runs: Frontend only
- Category: [Privacy & Cookies](https://wpide.com/library/category/privacy/)
- Tags: embeds, social-media, gdpr
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/privacy-social-embeds-click/

## Code

```php
// Provider URL fragment => name shown to visitors.
$wpide_social_embeds = array(
    'twitter.com'   => 'X (Twitter)',
    'x.com'         => 'X (Twitter)',
    'instagram.com' => 'Instagram',
    'facebook.com'  => 'Facebook',
    'tiktok.com'    => 'TikTok',
    'threads.net'   => 'Threads',
);

add_filter( 'embed_oembed_html', function ( $html, $url ) use ( $wpide_social_embeds ) {
    $host = (string) wp_parse_url( $url, PHP_URL_HOST );
    $name = '';

    foreach ( $wpide_social_embeds as $domain => $label ) {
        if ( $host === $domain || substr( $host, -strlen( '.' . $domain ) ) === '.' . $domain ) {
            $name = $label;
            break;
        }
    }

    if ( ! $name || false === stripos( $html, '<script' ) ) {
        return $html;
    }

    $preview = wp_trim_words( wp_strip_all_tags( preg_replace( '#<script\b.*?</script>#is', '', $html ) ), 40 );

    return sprintf(
        '<div class="wpide-social-embed"><template>%1$s</template><div style="padding:16px;border:1px solid #c3c4c7;border-radius:8px;"><p style="margin:0 0 8px">%2$s</p><p style="margin:0 0 8px;font-size:.9em">%3$s <a href="%4$s" target="_blank" rel="noopener">View on %5$s</a></p><button type="button" class="wpide-social-load">%6$s</button></div></div>',
        $html,
        esc_html( $preview ),
        esc_html( sprintf( 'Loading this post sends data to %s.', $name ) ),
        esc_url( $url ),
        esc_html( $name ),
        esc_html( 'Show post from ' . $name )
    );
}, 20, 2 );

add_action( 'wp_footer', function () {
    ?>
<script>
document.addEventListener('click', function (e) {
    var btn = e.target.closest ? e.target.closest('.wpide-social-load') : null;
    if (!btn) { return; }
    var box = btn.closest('.wpide-social-embed');
    var tpl = box.querySelector('template');
    var frag = tpl.content.cloneNode(true);
    frag.querySelectorAll('script').forEach(function (old) {
        var s = document.createElement('script');
        Array.prototype.forEach.call(old.attributes, function (a) { s.setAttribute(a.name, a.value); });
        s.text = old.text;
        old.replaceWith(s);
    });
    box.replaceChildren(frag);
});
</script>
    <?php
} );
```

## Notes

The text of the post is still shown inside the notice when the provider includes it in the embed code.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Load Social Media Post Embeds Only on Click" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/