Sharing

Overview

The Nadie Sabe Nada podcast app includes built-in sharing functionality that allows you to share episodes with friends, family, or on social media. The sharing feature uses the native Web Share API when available, providing a seamless sharing experience.

The share function uses your device’s native sharing capabilities, making it easy to send episodes via your preferred apps.

Where to Find It

The share button is located on the episode detail page in the action controls section.

<motion.button
    whileHover={{ scale: 1.05 }}
    whileTap={{ scale: 0.95 }}
    className={styles.actionButton}
    onClick={handleShareClick}
>
    <Share /> Compartir
</motion.button>

Open Episode

Navigate to the episode detail page by clicking any episode card

Click Share

Click the “Compartir” (Share) button in the action controls

Choose Method

Select your preferred sharing method from the native share sheet

Complete Share

Follow the prompts to complete sharing via your chosen method

Implementation

The share functionality is implemented using the Web Share API:

const handleShareClick = async () => {
    if (navigator.share) {
        try {
            await navigator.share({
                title: podcast.title,
                text: podcast.description,
                url: window.location.href
            });
        } catch (error) {
            console.error("Error sharing:", error);
        }
    }
};

Shared Content

When you share an episode, the following information is included:

Field	Content	Example
title	Episode title	”Programa 123”
text	Episode description	Full episode description
url	Episode detail URL	`https://yoursite.com/podcast/programa-123`

The URL shared is the direct link to the episode detail page, making it easy for recipients to listen immediately.

Browser Compatibility

The Web Share API is supported on:

Mobile Browsers: Safari (iOS), Chrome (Android), Edge (Android)
Desktop Browsers: Safari (macOS), Chrome (with certain conditions)
Requirements: HTTPS connection required

The share button only functions on browsers that support the Web Share API. On unsupported browsers, clicking the button will have no effect.

Feature Detection

The code checks for API availability:

if (navigator.share) {
    // Share API is available
    await navigator.share({...});
}

There’s currently no fallback for browsers without Web Share API support. The button appears but won’t function on unsupported browsers.

On Mobile Devices

When you click share on a mobile device:

Native share sheet appears
Shows available apps (WhatsApp, Telegram, Email, etc.)
Shows system actions (Copy, Add to Reading List, etc.)
User selects their preferred sharing method

On Desktop

On supported desktop browsers:

Share dialog appears
Shows available sharing options (Email, Copy Link, etc.)
May show installed PWA apps
User completes the share action

Error Handling

The share function includes basic error handling:

try {
    await navigator.share({
        title: podcast.title,
        text: podcast.description,
        url: window.location.href
    });
} catch (error) {
    console.error("Error sharing:", error);
}

Common Errors

AbortError: User cancelled the share action

This is normal behavior and not a problem
Occurs when user closes share sheet without sharing

NotAllowedError: Permission denied

User must initiate share with a click/tap
Cannot be triggered programmatically

TypeError: Invalid data

URL or text format issues
Very rare with properly formatted content

Errors are logged to the console but don’t show user-facing messages. Most errors are user-initiated cancellations.

URL Structure

The shared URL follows this pattern:

https://your-domain.com/podcast/{slugified-episode-title}

Example:

https://your-domain.com/podcast/programa-123-nadie-sabe-nada

The URL is generated using:

url: window.location.href

This ensures the exact current page URL is shared, including any query parameters if present.

For effective episode sharing:

Share directly from the episode detail page for the best URL
The episode description provides context for recipients
Shared links work for anyone, no login required
Recipients can immediately listen or add to their own library

Privacy Considerations

The Web Share API doesn’t collect or transmit data to the podcast app. All sharing is handled by the native OS/browser.

What’s Shared

Episode title (public information)
Episode description (public information)
Episode URL (public link)

What’s NOT Shared

Your listening progress
Your favorites or listen later lists
Your playback history
Any personal information

Future Enhancements

Potential improvements to the sharing feature:

Fallback for Unsupported Browsers

Implement a fallback copy-to-clipboard function:

const handleShareClick = async () => {
    if (navigator.share) {
        // Use Web Share API
        try {
            await navigator.share({...});
        } catch (error) {
            console.error("Error sharing:", error);
        }
    } else {
        // Fallback: Copy to clipboard
        try {
            await navigator.clipboard.writeText(window.location.href);
            toast.success("Link copied to clipboard!");
        } catch (error) {
            console.error("Error copying:", error);
        }
    }
};

Share episodes with current playback position:

const shareUrl = `${window.location.href}?t=${currentTime}`;

Add direct share buttons for specific platforms:

Twitter/X share button
Facebook share button
WhatsApp direct link
Email share button

Track which episodes are shared most frequently to understand popular content.

Button Styling

The share button includes Framer Motion animations:

<motion.button
    whileHover={{ scale: 1.05 }}
    whileTap={{ scale: 0.95 }}
    className={styles.actionButton}
    onClick={handleShareClick}
>
    <Share /> Compartir
</motion.button>

Animation Effects

Hover: Scales up to 105% (1.05)
Tap: Scales down to 95% (0.95)
Transition: Smooth spring animation

The button provides tactile feedback through animations, making the interface feel responsive and polished.

Use HTTPS

Web Share API requires secure context (HTTPS)

Test on Mobile

Best experience on mobile devices

Verify URL

Check shared URL opens correct episode

Test Cancellation

Ensure cancelling share doesn’t cause errors

Accessibility

The share button is accessible:

Keyboard navigable
Screen reader friendly with icon + text
Clear visual feedback on interaction
Works with assistive technologies

The button includes both an icon and text label (“Compartir”) for better accessibility and clarity.

Platform-Specific Behavior

iOS Safari

Shows native iOS share sheet
Includes AirDrop, Messages, Mail, etc.
Smooth integration with iOS features

Android Chrome

Shows Android share sheet
Includes installed apps (WhatsApp, Telegram, etc.)
Option to copy link directly

macOS Safari

Desktop share dialog
Email, Messages, Notes integration
Copy link option

Unsupported Browsers

Button appears but does nothing
No error shown to user
Consider implementing fallback (see Future Enhancements)

Consider adding a visual indicator or hiding the share button entirely on unsupported browsers for better UX.

Getting Started

Features

Components

State Management

Hooks & Utilities

Configuration

Overview

Where to Find It

Implementation

Shared Content

Browser Compatibility

Feature Detection

On Mobile Devices

On Desktop

Error Handling

Common Errors

URL Structure

Privacy Considerations

What’s Shared

What’s NOT Shared

Future Enhancements

Fallback for Unsupported Browsers

Button Styling

Animation Effects

Accessibility

Platform-Specific Behavior

iOS Safari

Android Chrome

macOS Safari

Unsupported Browsers

Build docs developers (and LLMs) love

Getting Started

Features

Components

State Management

Hooks & Utilities

Configuration

​Overview

​Share Functionality

​Where to Find It

​How to Share an Episode

​Implementation

​Share Handler

​Shared Content

​Web Share API Support

​Browser Compatibility

​Feature Detection

​Share Sheet Behavior

​On Mobile Devices

​On Desktop

​Error Handling

​Common Errors

​URL Structure

​Sharing Best Practices

​Privacy Considerations

​What’s Shared

​What’s NOT Shared

​Future Enhancements

​Fallback for Unsupported Browsers

​Share with Timestamp

​Social Media Direct Sharing

​Share Analytics

​Button Styling

​Animation Effects

​Testing Share Functionality

​Accessibility

​Platform-Specific Behavior

​iOS Safari

​Android Chrome

​macOS Safari

​Unsupported Browsers

Build docs developers (and LLMs) love

Overview

Share Functionality

Where to Find It

How to Share an Episode

Implementation

Share Handler

Shared Content

Web Share API Support

Browser Compatibility

Feature Detection

Share Sheet Behavior

On Mobile Devices

On Desktop

Error Handling

Common Errors

URL Structure

Sharing Best Practices

Privacy Considerations

What’s Shared

What’s NOT Shared

Future Enhancements

Fallback for Unsupported Browsers

Share with Timestamp

Social Media Direct Sharing

Share Analytics

Button Styling

Animation Effects

Testing Share Functionality

Accessibility

Platform-Specific Behavior

iOS Safari

Android Chrome

macOS Safari

Unsupported Browsers