Social Share Generator
Create social sharing buttons for your website
Presets
Layout
Button Style
Platforms
Container
Share Content
Preview
Export
HTML
<div class="share-buttons horizontal">
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com" class="share-btn facebook" target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com&text=Check%20out%20this%20awesome%20content!" class="share-btn twitter" target="_blank" rel="noopener noreferrer" aria-label="Share on Twitter/X">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fexample.com&title=Check%20out%20this%20awesome%20content!&summary=" class="share-btn linkedin" target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
<a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fexample.com&description=Check%20out%20this%20awesome%20content!" class="share-btn pinterest" target="_blank" rel="noopener noreferrer" aria-label="Share on Pinterest">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/></svg>
</a>
<a href="https://api.whatsapp.com/send?text=Check%20out%20this%20awesome%20content!%20https%3A%2F%2Fexample.com" class="share-btn whatsapp" target="_blank" rel="noopener noreferrer" aria-label="Share on WhatsApp">
<svg class="share-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
</a>
<a href="mailto:?subject=Check%20out%20this%20awesome%20content!&body=%20https%3A%2F%2Fexample.com" class="share-btn email" aria-label="Share on Email">
<svg class="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M22 7l-10 7L2 7"/></svg>
</a>
<a href="#" class="share-btn copy" onclick="copyToClipboard('https://example.com')" aria-label="Share on Copy Link">
<svg class="share-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>
</a>
</div>
<script></script>CSS
.share-buttons {
display: flex;
flex-direction: row;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
.share-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 44px;
height: 44px;
padding: 0;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
background: #6b7280; color: white; border: none;
}
.share-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.share-label {
font-size: 14px;
font-weight: 500;
}
.share-btn:hover {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.share-btn.copy.copied {
background: #10b981;
}
.share-btn.facebook { background: #1877f2; color: white; }
.share-btn.twitter { background: #000000; color: white; }
.share-btn.linkedin { background: #0a66c2; color: white; }
.share-btn.pinterest { background: #e60023; color: white; }
.share-btn.whatsapp { background: #25d366; color: white; }
.share-btn.email { background: #6b7280; color: white; }
.share-btn.copy { background: #374151; color: white; }React Component
import React, { useState } from 'react';
const SocialShareButtons = ({ url = 'https://example.com', title = 'Check out this awesome content!' }) => {
const [copied, setCopied] = useState(false);
const platforms = [
{
"id": "facebook",
"name": "Facebook",
"color": "#1877f2"
},
{
"id": "twitter",
"name": "Twitter/X",
"color": "#000000"
},
{
"id": "linkedin",
"name": "LinkedIn",
"color": "#0a66c2"
},
{
"id": "pinterest",
"name": "Pinterest",
"color": "#e60023"
},
{
"id": "whatsapp",
"name": "WhatsApp",
"color": "#25d366"
},
{
"id": "email",
"name": "Email",
"color": "#6b7280"
},
{
"id": "copy",
"name": "Copy Link",
"color": "#374151"
}
];
const getShareUrl = (platform) => {
const encodedUrl = encodeURIComponent(url);
const encodedTitle = encodeURIComponent(title);
const urls = {
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
twitter: `https://twitter.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`,
linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}`,
pinterest: `https://pinterest.com/pin/create/button/?url=${encodedUrl}&description=${encodedTitle}`,
whatsapp: `https://api.whatsapp.com/send?text=${encodedTitle}%20${encodedUrl}`,
telegram: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
reddit: `https://www.reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
email: `mailto:?subject=${encodedTitle}&body=${encodedUrl}`,
};
return urls[platform] || '#';
};
const buttonStyle = {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
gap: '8px',
width: 44,
height: '44px',
padding: '0',
borderRadius: '8px',
textDecoration: 'none',
transition: 'all 0.2s ease',
cursor: 'pointer',
border: 'none',
};
return (
<div style={{
display: 'flex',
flexDirection: 'row',
gap: '12px',
justifyContent: 'center',
flexWrap: 'wrap'
}}>
{platforms.map((platform) => (
platform.id === 'copy' ? (
<button
key={platform.id}
onClick={copyToClipboard}
style={{
...buttonStyle,
background: copied ? '#10b981' : platform.color,
color: 'white',
}}
aria-label="Copy link"
>
{/* Copy icon */}
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<rect x="9" y="9" width="13" height="13" rx="2"/>
<path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
</svg>
</button>
) : (
<a
key={platform.id}
href={getShareUrl(platform.id)}
target="_blank"
rel="noopener noreferrer"
style={{
...buttonStyle,
background: platform.color,
color: 'white',
}}
aria-label={`Share on ${platform.name}`}
>
{/* Platform icon - add SVG icons here */}
</a>
)
))}
</div>
);
};
export default SocialShareButtons;