Social Share Buttons für Websites

# ShareHub

Social Share Buttons für Websites – DSGVO-konform, Europa-fokussiert mit Share-Tracking.

## Features

**8 Plattformen:**
- 📘 Facebook
- 📷 Instagram
- 🐦 X (Twitter)
- 📌 Pinterest
- 🧵 Threads
- 🎵 TikTok
- 💬 WhatsApp
- 💼 LinkedIn
- 🔗 Link kopieren

**Design-Optionen:**
- Icons mit Text-Labels
- Nur Icons (rund)
- Nur Icons (eckig)

**Features:**
- 📊 Floating Sidebar (links oder rechts)
- 🔗 Copy-Link Button
- 📈 Share-Counter pro Plattform
- 🗄️ SQLite Datenbank für Share-Tracking
- 📱 Mobile-optimiert
- 🎨 Anpassbare Farben (Plattform-Standard)

## Installation

### 1. Dateien hochladen
Alle Dateien in ein Verzeichnis auf dem Webserver.

### 2. Permissions
```bash
chmod 755 .
chmod 666 shares.db # Wird automatisch erstellt
```

### 3. Generator öffnen
```
https://deine-domain.de/sharehub/
```

## Verwendung

### Widget einbinden

**Schritt 1:** Generator auf `index.php` öffnen

**Schritt 2:** Optionen wählen:
- Plattformen auswählen
- Design-Stil wählen (Icons+Labels, nur rund, nur eckig)
- Position wählen (links/rechts)

**Schritt 3:** Code generieren & kopieren

**Schritt 4:** Vor `</body>` einfügen:

```html
<script src="https://deine-domain.de/sharehub/sharehub.js"
data-style="icons-labels"
data-position="left"
data-platforms="facebook,twitter,whatsapp,linkedin,copy">
</script>
```

### Parameter

| Parameter | Werte | Beschreibung |
|---|---|---|
| `data-style` | `icons-labels`, `icons-round`, `icons-square` | Design-Stil |
| `data-position` | `left`, `right` | Position der Sidebar |
| `data-platforms` | Komma-getrennt | Plattformen (facebook,instagram,twitter,pinterest,threads,tiktok,whatsapp,linkedin,copy) |

### Beispiele

**Mit Labels links:**
```html
<script src=".../sharehub.js"
data-style="icons-labels"
data-position="left"
data-platforms="facebook,twitter,whatsapp,linkedin,copy">
</script>
```

**Nur Icons rund rechts:**
```html
<script src=".../sharehub.js"
data-style="icons-round"
data-position="right"
data-platforms="facebook,instagram,twitter,pinterest,whatsapp">
</script>
```

**Minimalst (nur Twitter & Copy):**
```html
<script src=".../sharehub.js"
data-style="icons-square"
data-position="left"
data-platforms="twitter,copy">
</script>
```

## Funktionen

### Share-Tracking

Jeder Share wird automatisch in der SQLite-Datenbank getrackt:
- URL die geteilt wurde
- Plattform
- Timestamp

**Keine personenbezogenen Daten** (keine IPs, keine Cookies)

### Share-Counter

Neben jedem Button wird die Anzahl der Shares angezeigt (nur wenn > 0).

### Copy-Link Button

Kopiert die aktuelle URL in die Zwischenablage und zeigt "✓ Kopiert!" Feedback.

### Floating Sidebar

- Fixiert links oder rechts
- Mittig vertikal positioniert
- Smooth Animationen
- Mobile-optimiert (Icons ohne Labels)

## Statistiken

Die Hauptseite (`index.php`) zeigt:
- **Gesamt Shares** über alle URLs
- **Pro Plattform** Statistiken
- **Top Shared URLs** (Top 10)

## Technische Details

**Stack:**
- PHP 8.0+
- SQLite3
- Vanilla JavaScript
- CSS3

**Datei-Struktur:**
```
sharehub/
├── index.php # Generator + Statistiken
├── sharehub.js # Widget JavaScript (176 Zeilen)
├── api.php # Share-Tracking API
├── init.php # SQLite Setup
├── shares.db # SQLite Datenbank (auto-erstellt)
└── README.md
```

**Browser-Support:**
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## API Endpoints

### Track Share
```
POST /api.php?action=track
Body: url=https://example.com&platform=facebook
Response: {"ok":true,"count":5}
```

### Get Count
```
GET /api.php?action=count&url=https://example.com&platform=facebook
Response: {"ok":true,"count":5}
```

### Top Shares
```
GET /api.php?action=top
Response: {"ok":true,"data":[{"url":"...","count":42}]}
```

## DSGVO-Konformität

✓ Keine Cookies
✓ Keine IP-Speicherung
✓ Keine Tracking-Pixel
✓ Keine externen Requests (außer Share-URLs)
✓ Lokale SQLite-Datenbank
✓ Opt-in durch Website-Betreiber

**Hinweis:** Die Share-Buttons öffnen die jeweiligen Plattformen in einem neuen Tab. Die Datenverarbeitung erfolgt dann bei der jeweiligen Plattform.

## Anpassungen

### Farben ändern

In `sharehub.js` die `platformConfig` bearbeiten:
```javascript
facebook: {
name: 'Facebook',
icon: '📘',
color: '#1877f2', // <- Hier Farbe ändern
url: url => `https://...`
}
```

### Icons ändern

Icons sind Emojis in der `platformConfig`. Einfach austauschen:
```javascript
icon: '🎯', // Beliebiges Emoji oder Unicode
```

### Weitere Plattformen

Neue Plattform in `platformConfig` hinzufügen und in `validPlatforms` (api.php) ergänzen.

## Performance

- JavaScript: ~8KB (unminified)
- CSS: Inline (~2KB)
- Keine externen Dependencies
- Lazy Loading möglich (defer/async)

## Lizenz

Privates Projekt – alle Rechte vorbehalten.