X.com-Anbindung im Blogsystem

Wenn ein neuer Blog-Beitrag veroeffentlicht wird, soll er auch auf X.com (ehemals Twitter) geteilt werden. Aber nicht als langweiliger Auto-Post mit Titel und Link — sondern als durchdachter, KI-generierter Teaser im Thread-Format.

Die Idee: Ein Button im Blog-Editor generiert per OpenAI einen ansprechenden Teaser-Thread. Haupt-Tweet mit Hook, Antwort-Tweet mit Link und Kontext.

Architektur

Die X.com-Integration besteht aus drei Teilen:

1. OpenAI Teaser-Generator — Erstellt aus Blog-Inhalt einen Twitter-Thread
2. X API Client — Postet Tweets und Antworten via OAuth 1.0a
3. Blog-Editor Integration — Button + Vorschau im Dashboard

KI-Teaser-Generierung mit OpenAI

Der Teaser-Generator bekommt Titel, Excerpt und den vollstaendigen Blog-Content. Ein System-Prompt steuert das Format:

const systemPrompt = `Du bist ein Social-Media-Texter fuer einen
technischen Blog. Erstelle einen Twitter-Thread (2 Tweets):
 
1. Haupt-Tweet: Hook + Kernaussage (max 280 Zeichen)
   - Kein Link, keine Hashtags
   - Spannend, aber nicht clickbaity
 
2. Antwort-Tweet: Kontext + Einladung zum Lesen
   - Der Blog-Link wird automatisch angehaengt
   - Max 200 Zeichen fuer den Text`;

Das Response-Format wird als JSON-Schema definiert und mit Zod validiert — so ist garantiert, dass die Antwort mainTweet und replyTweet enthaelt.

const TeaserSchema = z.object({
  mainTweet: z.string().max(280),
  replyTweet: z.string().max(200),
});

OpenAI GPT-4o-mini liefert hier gute Ergebnisse bei geringen Kosten. Der vollstaendige Blog-Content wird mitgesendet, damit der Teaser nicht nur den Excerpt wiedergibt, sondern die spannendsten Aspekte herausgreift.

X API Client: OAuth 1.0a

Die X API v2 erfordert OAuth 1.0a fuer das Posten von Tweets. Der Client nutzt die twitter-api-v2 Bibliothek:

import { TwitterApi } from "twitter-api-v2";
 
const client = new TwitterApi({
  appKey: process.env.X_API_KEY!,
  appSecret: process.env.X_API_SECRET!,
  accessToken: process.env.X_ACCESS_TOKEN!,
  accessSecret: process.env.X_ACCESS_SECRET!,
});

Die Thread-Logik: Zuerst den Haupt-Tweet posten, dann mit der zurueckgegebenen Tweet-ID eine Antwort erstellen.

export async function postTweet(text: string): Promise<string> {
  const { data } = await client.v2.tweet(text);
  return data.id;
}
 
export async function postReply(
  text: string,
  replyToId: string
): Promise<string> {
  const { data } = await client.v2.reply(text, replyToId);
  return data.id;
}

UTM-Tracking fuer Umami

Der Blog-Link im Antwort-Tweet bekommt UTM-Parameter, damit der Traffic in Umami (Self-Hosted Analytics) gefiltert werden kann:

const blogUrl = `https://www.macip.de/blog/${post.slug}`;
const blogUrlWithUtm = `${blogUrl}?utm_source=x&utm_medium=social&utm_campaign=blog`;

Wichtig: Nur der Link im Tweet bekommt UTM-Parameter. Die saubere URL ohne Parameter geht an OpenAI zur Teaser-Generierung — damit der KI-Text keine haesslichen Query-Strings enthaelt.

Blog-Editor Integration

Im Dashboard-Blog-Editor gibt es einen Button, der den Teaser generiert. Nach der Generierung erscheint eine Vorschau mit:

• Haupt-Tweet — der Hook
• Antwort-Tweet — Kontext + Link
• Kopieren-Buttons — zum manuellen Posten

Der Button ist nur fuer veroeffentlichte Beitraege sichtbar und kann beliebig oft ausgefuehrt werden, um neue Teaser-Varianten zu generieren.

API-Route: /api/blog/[id]/share-x

Die Route verbindet alles:

1. Admin-Authentifizierung pruefen
2. Blog-Post aus Supabase laden
3. Nur veroeffentlichte Posts erlauben
4. OpenAI-Teaser generieren
5. Texte zurueckgeben

export async function POST(req, { params }) {
  const post = await loadPost(params.id);
  const teaser = await generateXTeaser(
    post.title, post.excerpt, post.content, blogUrl
  );
  return NextResponse.json({
    mainTweet: teaser.mainTweet,
    replyTweet: `${teaser.replyTweet}\n\n${blogUrlWithUtm}`,
  });
}

Warum es vorerst manuell bleibt

Die urspruengliche Idee war vollautomatisch: Button klicken, Thread wird gepostet. Die Infrastruktur dafuer steht — postTweet() und postReply() sind implementiert und getestet.

Aber: Die X API Kosten sind nicht trivial.

Seit dem Umbau des X API Preismodells berechnet X 5 Cent pro Schreibaktion — jeder Tweet, jeder Kommentar, jede Antwort kostet. Fuer einen Thread (Haupt-Tweet + Antwort) sind das 10 Cent pro Blog-Post. Klingt wenig, summiert sich aber: Bei 4 Posts pro Monat sind das 40 Cent nur fuers Teilen, dazu kommen Test-Tweets waehrend der Entwicklung. Und die OpenAI-Kosten fuer die Teaser-Generierung kommen noch obendrauf.

Fuer ein Solo-Projekt, das keinen Umsatz generiert, ist jede wiederkehrende API-Gebuehr eine bewusste Entscheidung. Die technische Anbindung steht — aber solange die Kosten-Nutzen-Rechnung nicht aufgeht, bleibt das letzte Stueck Automatisierung manuell.

Deshalb die pragmatische Loesung: Die KI-Teaser-Generierung bleibt aktiv (OpenAI-Kosten sind minimal), aber das eigentliche Posten erfolgt manuell. Der generierte Text kann per Kopieren-Button uebernommen und direkt in die X.com-App eingefuegt werden.

Der automatische Posting-Code ist nur auskommentiert — sobald sich die Kosten-Nutzen-Rechnung aendert, ist die Funktion mit einem Einzeiler reaktivierbar.

Fazit

Die X.com-Integration zeigt ein typisches Muster bei API-Anbindungen: Die technische Implementierung ist oft einfacher als die wirtschaftliche Rechtfertigung. Der KI-Teaser-Generator liefert echten Mehrwert — er spart Zeit und produziert bessere Texte als ein hastiger manueller Tweet. Dass das letzte Stueck Automatisierung (das eigentliche Posten) manuell bleibt, ist ein pragmatischer Kompromiss.

Fuer Solo-Entwickler und kleine Projekte gilt: Nicht jede API-Integration muss End-to-End automatisiert sein. Manchmal ist "generieren + manuell posten" die wirtschaftlich sinnvollere Variante.

Stack

• OpenAI GPT-4o-mini — Teaser-Generierung mit JSON-Schema-Validierung
• twitter-api-v2 — OAuth 1.0a Client fuer X API v2
• Zod — Response-Validierung der KI-Ausgabe
• Next.js API Routes — Server-seitige Orchestrierung
• Umami — Self-Hosted Analytics mit UTM-Tracking