Components

Social Share

Share buttons for the current page.

Live demo

See it in action

The markup

Clean, lean code

This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.

<section class="fw-flexbox upw-section sc-render fw-flex fw-flex-column fw-items-center fw-full-bleed fw-collapse">
	<div class="social-share ss-ac44ce3b fw-ss fw-ss--design-brand design-brand fw-ss--shape-circle fw-ss--size-md fw-ss--layout-inline fw-ss--text-start">
		<div class="fw-ss__list">
			<a class="fw-ss__btn fw-ss__btn--facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%2Fdemos%2Fdemos%2F" style="--ss-color:#1877f2" aria-label="Share on Facebook" data-ss-window="1" rel="noopener noreferrer"><span class="fw-ss__icon"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5 3.66 9.15 8.44 9.94v-7.03H7.9v-2.9h2.54V9.85c0-2.51 1.49-3.9 3.78-3.9 1.1 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.88h2.78l-.44 2.9h-2.34V22c4.78-.79 8.44-4.94 8.44-9.94Z"/></svg></span><span class="fw-ss__copied" aria-hidden="true">Copied!</span></a>
			<a class="fw-ss__btn fw-ss__btn--twitter" href="https://twitter.com/intent/tweet?url=http%3A%2F%2Flocalhost%2Fdemos%2Fdemos%2F&#038;text=UnysonPlus%20Demos" style="--ss-color:#000000" aria-label="Share on X / Twitter" data-ss-window="1" rel="noopener noreferrer"><span class="fw-ss__icon"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.96 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23 5.45-6.23Zm-1.16 17.52h1.83L7.01 4.13H5.04l12.04 15.64Z"/></svg></span><span class="fw-ss__copied" aria-hidden="true">Copied!</span></a>
			<a class="fw-ss__btn fw-ss__btn--linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url=http%3A%2F%2Flocalhost%2Fdemos%2Fdemos%2F" style="--ss-color:#0a66c2" aria-label="Share on LinkedIn" data-ss-window="1" rel="noopener noreferrer"><span class="fw-ss__icon"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29ZM5.34 7.43a2.07 2.07 0 1 1 0-4.13 2.07 2.07 0 0 1 0 4.13ZM7.12 20.45H3.56V9h3.56v11.45ZM22.22 0H1.77C.8 0 0 .78 0 1.74v20.51C0 23.22.8 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.75V1.74C24 .78 23.2 0 22.22 0Z"/></svg></span><span class="fw-ss__copied" aria-hidden="true">Copied!</span></a>
			<a class="fw-ss__btn fw-ss__btn--pinterest" href="https://pinterest.com/pin/create/button/?url=http%3A%2F%2Flocalhost%2Fdemos%2Fdemos%2F&#038;description=UnysonPlus%20Demos" style="--ss-color:#e60023" aria-label="Share on Pinterest" data-ss-window="1" rel="noopener noreferrer"><span class="fw-ss__icon"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12c0 4.24 2.64 7.86 6.36 9.32-.09-.79-.17-2 .03-2.86.18-.78 1.18-4.99 1.18-4.99s-.3-.6-.3-1.49c0-1.4.81-2.44 1.82-2.44.86 0 1.27.64 1.27 1.41 0 .86-.55 2.15-.83 3.34-.24 1 .5 1.81 1.48 1.81 1.78 0 3.14-1.87 3.14-4.58 0-2.39-1.72-4.07-4.18-4.07-2.85 0-4.52 2.13-4.52 4.34 0 .86.33 1.78.74 2.28.08.1.09.19.07.29-.08.33-.25 1-.28 1.14-.05.18-.15.22-.34.13-1.26-.59-2.05-2.43-2.05-3.91 0-3.18 2.31-6.1 6.66-6.1 3.5 0 6.22 2.49 6.22 5.82 0 3.47-2.19 6.27-5.23 6.27-1.02 0-1.98-.53-2.31-1.16l-.63 2.4c-.23.87-.84 1.96-1.25 2.62.94.29 1.93.45 2.97.45 5.52 0 10-4.48 10-10S17.52 2 12 2Z"/></svg></span><span class="fw-ss__copied" aria-hidden="true">Copied!</span></a>
			<a class="fw-ss__btn fw-ss__btn--email" href="mailto:?subject=UnysonPlus%20Demos&#038;body=http%3A%2F%2Flocalhost%2Fdemos%2Fdemos%2F" style="--ss-color:#6b7280" aria-label="Share on Email"><span class="fw-ss__icon"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm9 7.42 8-5.42H4l8 5.42ZM4 8.2V17h16V8.2l-7.44 5.05a1 1 0 0 1-1.12 0L4 8.2Z"/></svg></span><span class="fw-ss__copied" aria-hidden="true">Copied!</span></a>
			<a class="fw-ss__btn fw-ss__btn--copy" href="#" style="--ss-color:#475569" aria-label="Copy link" data-ss-copy="1" data-ss-url="https://demos.unysonplus.com/demos/"><span class="fw-ss__icon"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M9 7h9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm0 2v10h9V9H9ZM5 3h9a2 2 0 0 1 2 2v1h-2V5H5v10h1v2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"/></svg></span><span class="fw-ss__copied" aria-hidden="true">Copied!</span></a>
		</div>
	</div>
</section>

To learn more about the Social Share shortcode, please check out the online manual here.