Skip to content

FACEBOOK_SHARING_VISUAL_GUIDE.md

Latest commit

 

History

History
320 lines (263 loc) · 11.6 KB

FACEBOOK_SHARING_VISUAL_GUIDE.md

File metadata and controls

320 lines (263 loc) · 11.6 KB

Facebook Sharing Feature - Visual Implementation Summary

Share Button Locations

1. Music Library Page (/music-library)

Album Cards

┌─────────────────────────────────────┐
│  [Album Art]                        │
│  🏷️ Album Badge                     │
│                                     │
│  Album Title                        │
│  X tracks                           │
│                                     │
│  ▶️ Play  👍👎  🔗 Share  👁️ View  │
│                                     │
│  [Add to Cart $9.99]               │
└─────────────────────────────────────┘

Song Cards

┌─────────────────────────────────────┐
│  [Album Art]                        │
│                                     │
│  Song Title                         │
│                                     │
│  ▶️ Play  👍👎  🔗 Share  👁️ View  │
│                                     │
│  [Add to Cart $0.99]               │
└─────────────────────────────────────┘

Share Button Details:

  • Layout: icon_link (compact icon)
  • Size: small
  • Position: Between Like/Dislike buttons and View button

2. Song Player Page (/song/{song-title})

┌──────────────────────────────────────────────────┐
│                                                  │
│    [Large Album Art]                             │
│                                                  │
│    Song Title                                    │
│                                                  │
│    ⏯️ Play    📤 Share (123)    🛒 Add to Cart  │
│                                                  │
│    Duration: 4:05                                │
│    Preview Only (60 seconds)                     │
│                                                  │
│    👍 12  👎 3                                   │
│                                                  │
│    ─────────────────────────────────────        │
│    [Progress Bar]                                │
│    0:00 ────────────────────────────── 4:05     │
│                                                  │
└──────────────────────────────────────────────────┘

Share Button Details:

  • Layout: button_count (shows share count)
  • Size: large
  • Position: Between Play button and Cart button
  • Shows: "Share" text with count (e.g., "Share (123)")

3. Album Player Page (/album/{album-name})

┌──────────────────────────────────────────────────┐
│                                                  │
│    [Large Album Art]                             │
│                                                  │
│    Album Title                                   │
│                                                  │
│    ⏯️ Play  📤 Share (456)  🛒 Add to Cart      │
│                                                  │
│    12 tracks                                     │
│    Preview Only (60 seconds per track)           │
│                                                  │
│    👍 45  👎 8  [Now Playing: Track 3]          │
│                                                  │
│    Track List:                                   │
│    # | Title            | Duration | Actions    │
│    ──────────────────────────────────────────   │
│    1 | Track 1          | 3:45     | ▶️         │
│    2 | Track 2          | 4:12     | ▶️         │
│    3 | Track 3 ⏵        | 3:58     | ▶️         │
│    4 | Track 4          | 4:32     | ▶️         │
│                                                  │
│    ─────────────────────────────────────        │
│    [Progress Bar]                                │
│                                                  │
└──────────────────────────────────────────────────┘

Share Button Details:

  • Layout: button_count (shows share count)
  • Size: large
  • Position: Between Play button and Cart button
  • Shows: "Share" text with count
  • Note: Only shown for albums, NOT for playlists

Share URL Format

Songs

https://streamtunes.net/song/Song%20Title%20with%20Spaces

Albums

https://streamtunes.net/album/Album%20Name%20with%20Spaces

Playlists (No share button - for reference only)

https://streamtunes.net/playlist/123

Open Graph Meta Tags Example

When a user shares a song, Facebook will scrape these meta tags:

<head>
  <!-- Facebook App ID -->
  <meta property="fb:app_id" content="YOUR_APP_ID">
  
  <!-- URL being shared -->
  <meta property="og:url" content="https://streamtunes.net/song/Amazing%20Song">
  
  <!-- Content type -->
  <meta property="og:type" content="music.song">
  
  <!-- Title -->
  <meta property="og:title" content="Amazing Song">
  
  <!-- Album art image -->
  <meta property="og:image" content="https://streamtunes.net/api/music/stream?path=Amazing%20Song.jpg">
  
  <!-- Description -->
  <meta property="og:description" content="Listen to Amazing Song on StreamTunes">
  
  <!-- Music metadata -->
  <meta property="music:genre" content="Rock">
  <meta property="music:duration" content="245">
</head>

Facebook Share Dialog Preview

When clicking a share button, users will see:

┌─────────────────────────────────────────────────┐
│  Share to Facebook                        [X]   │
├─────────────────────────────────────────────────┤
│                                                 │
│  [Your profile pic] John Doe                    │
│                                                 │
│  Say something about this...                    │
│  ┌─────────────────────────────────────────┐   │
│  │                                         │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  ┌─────────────────────────────────────────┐   │
│  │  [Album Art Preview]                    │   │
│  │  streamtunes.net                        │   │
│  │  Amazing Song                           │   │
│  │  Listen to Amazing Song on StreamTunes  │   │
│  └─────────────────────────────────────────┘   │
│                                                 │
│  👥 Friends        ▼                            │
│                                                 │
│              [Cancel]  [Post to Facebook]       │
└─────────────────────────────────────────────────┘

Component Hierarchy

App.razor (loads Facebook SDK)
├── Facebook SDK Script
└── Dynamic Meta Tags (for song/album pages)

MusicLibrary.razor
├── Album Cards
│   └── FacebookShareButton (icon_link, small)
└── Song Cards
    └── FacebookShareButton (icon_link, small)

SongPlayer.razor
└── Action Controls
    └── FacebookShareButton (button_count, large)

AlbumPlayer.razor
└── Action Controls
    └── FacebookShareButton (button_count, large)
        (Only for albums, not playlists)

FacebookShareButton.razor (Shared Component)
├── fb-share-button-wrapper div
│   └── Share link
│       ├── Facebook SDK rendering
│       └── Fallback direct link

CSS Classes Applied

Global Styles (app.css)

/* Facebook Share Button Wrapper */
.fb-share-button-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Share button in action controls */
.share-button-action {
    display: inline-flex;
    align-items: center;
}

Syncfusion Integration

  • Share buttons integrate seamlessly with existing Syncfusion UI
  • Positioned using existing card action layouts
  • Consistent styling with other action buttons

Responsive Behavior

Desktop (≥992px)

  • All share buttons fully visible
  • button_count layout shows share count inline
  • icon_link layout shows compact icon

Tablet (768px - 991px)

  • Share buttons maintain visibility
  • Count numbers may wrap on smaller tablets

Mobile (<768px)

  • Share buttons remain functional
  • icon_link layout preferred for space efficiency
  • Facebook SDK optimizes share dialog for mobile

Browser Compatibility

Supported Browsers

  • ✅ Chrome/Edge (Latest)
  • ✅ Firefox (Latest)
  • ✅ Safari (Latest)
  • ✅ Mobile Safari (iOS)
  • ✅ Chrome Mobile (Android)

Facebook SDK Requirements

  • JavaScript must be enabled
  • Cookies must be enabled
  • Third-party scripts allowed

Fallback Behavior

  • If Facebook SDK fails to load, direct share links still work
  • No JavaScript required for basic share functionality
  • Opens Facebook in new window/tab

Implementation Details

Share Button Parameters

ShareUrl (Required)

  • Full URL to be shared
  • Properly URL-encoded
  • Example: https://streamtunes.net/song/My%20Song

Layout (Optional, default: "button_count")

  • button: Simple share button
  • button_count: Share button with count
  • box_count: Vertical count above button
  • icon_link: Icon only (used in Music Library)

Size (Optional, default: "small")

  • small: Compact size
  • medium: Default size
  • large: Larger size (used in players)

CssClass (Optional)

  • Additional CSS classes
  • Example: share-button-action

ButtonText (Optional)

  • Custom button text
  • If not provided, Facebook SDK uses default

Share Count Display

  • Share counts are provided by Facebook
  • Counts update in real-time from Facebook's servers
  • No database storage required in application
  • Count includes:
    • Public shares
    • Private shares (if user allows)
    • Comments containing the link
    • Reactions to shared posts

Security Considerations

✅ Implemented:

  • HTML entity encoding for meta tag content
  • URL encoding for special characters in URLs
  • HTTPS required for Facebook integration
  • CSRF protection via Facebook App ID
  • No sensitive data in Open Graph tags

⚠️ Important:

  • Keep Facebook App ID in configuration (not hardcoded)
  • Restrict Facebook App domains in developer console
  • Monitor Facebook App analytics for unusual activity