QA - Facebook Share Methods

1. Facebook Share Dialog

Simple share dialog without SDK. Opens Facebook share in a popup window.

const url = encodeURIComponent(window.location.href);
window.open(
    `https://www.facebook.com/sharer/sharer.php?u=${url}`,
    'facebook-share-dialog',
    'width=800,height=600'
);

 No SDK required - Works everywhere

2. Facebook Share Button SDK

Official Facebook share button using the SDK. Automatically rendered by Facebook.

<div class="fb-share-button"
     data-href="YOUR_URL"
     data-layout="button_count"
     data-size="large">
</div>

Note: Requires Facebook SDK loaded on page.

3. Custom Button with Share Dialog

Custom styled button using Facebook SDK's share dialog with callbacks.

FB.ui({
    method: 'share',
    href: window.location.href,
}, function(response){
    if (response && !response.error_message) {
        console.log('Shared successfully!');
    } else {
        console.log('Share cancelled or error');
    }
});

Note: Requires Facebook App ID and SDK initialization.

4. Web Share API

Native browser sharing (works on mobile). User can choose to share to Facebook or other apps.

if (navigator.share) {
    navigator.share({
        title: 'Share Title',
        text: 'Check this out!',
        url: window.location.href
    }).then(() => {
        console.log('Thanks for sharing!');
    }).catch((error) => {
        console.log('Error sharing:', error);
    });
} else {
    alert('Web Share API not supported');
}

Best for: Mobile devices with native share sheet

5. FB:// URL Scheme

Deep link to Facebook mobile app. Opens native app if installed, otherwise falls back.

// Direct link to Facebook app
const fbUrl = `fb://facewebmodal/f?href=${encodeURIComponent(url)}`;
window.location.href = fbUrl;

// With fallback to web
setTimeout(() => {
    window.location.href =
        `https://www.facebook.com/sharer/sharer.php?u=${url}`;
}, 500);