# Share or Copy a Highlighted Quote

> Shows a small toolbar when readers highlight text in a post, with buttons to copy the quote with a link back or share it on X, Bluesky or LinkedIn.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: sharing, quotes, social
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-share-selected-text/

## Code

```html
<div class="wpide-quote-share" hidden role="toolbar" aria-label="Share selection"></div>
<style>
.wpide-quote-share{position:absolute;z-index:9999;display:flex;gap:2px;padding:4px;border-radius:8px;background:#1d2327;box-shadow:0 6px 18px rgba(0,0,0,.25);transform:translate(-50%,-100%);}
.wpide-quote-share[hidden]{display:none;}
.wpide-quote-share button{border:0;background:none;color:#fff;font:600 13px/1 sans-serif;padding:8px 10px;border-radius:5px;cursor:pointer;}
.wpide-quote-share button:hover,.wpide-quote-share button:focus-visible{background:rgba(255,255,255,.15);}
</style>
<script>
(function () {
    var bar = document.querySelector('.wpide-quote-share');
    var area = document.querySelector('.entry-content, .wp-block-post-content');
    if (!bar || !area || !window.getSelection) { return; }
    var targets = [
        ['X', 'https://x.com/intent/post?text='],
        ['Bluesky', 'https://bsky.app/intent/compose?text='],
        ['LinkedIn', 'https://www.linkedin.com/feed/?shareActive=true&text=']
    ];
    var text = '';
    function quote() { return '\u201C' + text.slice(0, 220) + (text.length > 220 ? '\u2026' : '') + '\u201D ' + window.location.href.split('#')[0]; }
    var copy = document.createElement('button');
    copy.type = 'button';
    copy.textContent = 'Copy';
    copy.addEventListener('click', function () {
        if (navigator.clipboard) { navigator.clipboard.writeText(quote()); copy.textContent = 'Copied'; setTimeout(function () { copy.textContent = 'Copy'; }, 1500); }
    });
    bar.appendChild(copy);
    targets.forEach(function (t) {
        var b = document.createElement('button');
        b.type = 'button';
        b.textContent = t[0];
        b.addEventListener('click', function () { window.open(t[1] + encodeURIComponent(quote()), '_blank', 'noopener,width=600,height=520'); });
        bar.appendChild(b);
    });
    document.addEventListener('mouseup', function (e) {
        if (bar.contains(e.target)) { return; }
        setTimeout(function () {
            var sel = window.getSelection();
            text = sel ? sel.toString().trim() : '';
            if (text.length < 12 || !sel.rangeCount || !area.contains(sel.anchorNode)) { bar.hidden = true; return; }
            var rect = sel.getRangeAt(0).getBoundingClientRect();
            bar.style.left = (rect.left + rect.width / 2 + window.pageXOffset) + 'px';
            bar.style.top = (rect.top + window.pageYOffset - 8) + 'px';
            bar.hidden = false;
        }, 10);
    });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { bar.hidden = true; } });
})();
</script>
```

## Notes

Nothing is loaded from social networks until a reader clicks a share button. Remove a network by deleting its line in the targets list.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Share or Copy a Highlighted Quote" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/