Facebook share links open the Share Dialog, allowing users to share your content to their timeline. Unlike other platforms, Facebook limits what you can pre-fill—focus on your Open Graph tags.
Key Takeaways
- 1Use facebook.com/sharer/sharer.php with the u parameter
- 2The URL is the only customizable parameter
- 3Title, description, and image come from Open Graph meta tags
- 4Quote parameter is deprecated and no longer works
- 5Facebook validates the shared URL before allowing posting
Basic Share Link
Facebook share links work differently from other social platforms. While Twitter lets you pre-fill tweet text, Facebook removed that capability to prevent spam. Instead, the share preview (title, description, image) is entirely controlled by your page's Open Graph meta tags.
https://www.facebook.com/sharer/sharer.php?u=https://example.com/article<a href="https://www.facebook.com/sharer/sharer.php?u=https://example.com/article"
target="_blank"
rel="noopener noreferrer">
Share on Facebook
</a>This HTML creates a basic share button. The u parameter contains the URL you want users to share. Facebook will fetch your page to generate the share preview.
URL Parameters
Facebook's share URL accepts minimal parameters compared to other platforms. Most customization happens through Open Graph tags on your page.
| Parameter | Description | Status |
|---|---|---|
u | The URL to share (URL-encoded) | Required |
quote | Pre-filled text (deprecated) | No longer works |
hashtag | Hashtag to include (deprecated) | No longer works |
Important: Open Graph Tags
Facebook pulls the title, description, and image from your page's Open Graph meta tags. You cannot override these via URL parameters.
Since you can't customize the share content via URL parameters, getting your Open Graph tags right is essential.
Setting Up Open Graph Tags
Open Graph meta tags tell Facebook (and other platforms) what to display when someone shares your page. These tags go in your HTML <head> section and determine the title, description, and image for your share preview.
Add these meta tags to your page's <head> to control how it appears when shared:
<head>
<!-- Required Open Graph tags -->
<meta property="og:url" content="https://example.com/article" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Your Article Title" />
<meta property="og:description" content="A brief description of your content." />
<meta property="og:image" content="https://example.com/image.jpg" />
<!-- Recommended: Image dimensions -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Optional: Site name and locale -->
<meta property="og:site_name" content="Your Site Name" />
<meta property="og:locale" content="en_US" />
</head>The og:url should be the canonical URL of your page. The og:type helps Facebook understand your content category. For blog posts, use "article"; for products, use "product".
Image Requirements
Your share image has the biggest impact on engagement. Facebook has specific size requirements to ensure your image displays correctly in the feed.
| Requirement | Specification |
|---|---|
| Recommended size | 1200 x 630 pixels |
| Minimum size | 600 x 315 pixels |
| Aspect ratio | 1.91:1 |
| Format | JPEG or PNG |
| Max file size | 8 MB |
Images smaller than the minimum will be cropped or may not display at all. Always use the recommended 1200x630 size for the best results across all devices.
Opening in a Popup
Opening the share dialog in a popup window keeps users on your site while they share. This creates a smoother experience than navigating away entirely.
function shareOnFacebook(url) {
const shareUrl = 'https://www.facebook.com/sharer/sharer.php?u=' +
encodeURIComponent(url);
window.open(
shareUrl,
'facebook-share',
'width=580,height=400,scrollbars=yes'
);
}
// Usage
shareOnFacebook('https://example.com/my-article');The popup dimensions (580x400) are optimized for Facebook's share dialog. The scrollbars=yes option ensures users can scroll if needed on smaller screens.
React Component
For React applications, encapsulating the share logic in a component keeps your code clean and reusable across different pages.
interface FacebookShareButtonProps {
url: string;
children: React.ReactNode;
className?: string;
}
function FacebookShareButton({ url, children, className }: FacebookShareButtonProps) {
const handleClick = () => {
const shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`;
window.open(
shareUrl,
'facebook-share',
'width=580,height=400,scrollbars=yes'
);
};
return (
<button onClick={handleClick} className={className}>
{children}
</button>
);
}
// Usage
<FacebookShareButton url="https://example.com/article">
Share on Facebook
</FacebookShareButton>This TypeScript component accepts a URL and optional className for styling. The button element provides better accessibility than a div, and the popup behavior is handled in the click handler.
Facebook Share Dialog (SDK)
For more advanced integrations with analytics and callbacks, you can use the Facebook JavaScript SDK. This requires a Facebook App ID but provides features like tracking successful shares.
For more control, use the Facebook JavaScript SDK:
<!-- Load the Facebook SDK -->
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"
nonce="your-nonce">
</script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'your-app-id',
autoLogAppEvents: true,
xfbml: true,
version: 'v18.0'
});
};
function shareWithSDK() {
FB.ui({
method: 'share',
href: 'https://example.com/article',
}, function(response) {
if (response && !response.error_message) {
console.log('Shared successfully');
}
});
}
</script>The SDK approach requires more setup but gives you a callback function that fires when sharing completes. This lets you track shares in your analytics or show a confirmation message to users.
Debugging Share Previews
When your share preview doesn't look right, Facebook's Sharing Debugger tool shows exactly what Facebook sees when it scrapes your page. This is essential for troubleshooting.
Use the Facebook Sharing Debugger to see how your page will appear when shared:
Visit the Sharing Debugger
Go to developers.facebook.com/tools/debug/
Enter your URL
Paste the URL you want to share and click Debug
Scrape Again to refresh
If you updated your Open Graph tags, click "Scrape Again" to refresh the cache
The debugger shows any errors in your Open Graph tags and previews exactly how your content will appear when shared. Always test after making changes to your meta tags.
Try the URL Builder
Use our Facebook Share template to build share links interactively.