So erstellst du eine Social Wall mit Claude Code und der Walls.io API

Lass einen KI-Coding-Agenten die Schwerarbeit übernehmen – um die sozialen Netzwerke kümmert sich die Walls.io API

Eine Social Wall von Grund auf zu bauen, bedeutete früher wochenlange Arbeit: für jedes soziale Netzwerk eine andere API lernen, sich mit OAuth-Flows herumschlagen, Breaking Changes hinterherlaufen und Anzeige-Code schreiben, bevor überhaupt ein einziger Post zu sehen ist. In dieser Anleitung überspringen wir das alles. Du nutzt die Walls.io API, um Content aus allen Netzwerken auf einmal abzuholen – und Claude Code, den terminalbasierten KI-Coding-Agenten von Anthropic, um den Großteil des Codes für dich schreiben zu lassen. Am Ende hast du einen schlanken, sich selbst aktualisierenden Social Feed, den du auf einen Event-Screen, eine Website oder ein Digital-Signage-Display bringen kannst.

Was ist eine Social Wall API – und was kannst du damit machen?

Eine Social Wall ist ein einziger Feed, der Posts aus vielen Social-Media-Quellen bündelt und an einem Ort anzeigt. Sobald du diesen Content programmatisch abrufen kannst, tun sich schnell viele Einsatzmöglichkeiten auf. Das sind die drei häufigsten:

• Ein Live-Feed für ein Event. Zeig einen Echtzeit-Stream mit Posts zu deinem Hashtag auf einem großen Screen bei einer Konferenz, Messe oder einem Festival. Die Gäste posten, ihr Content erscheint innerhalb von Minuten auf der Wall – das treibt das Engagement und hält die Stimmung im Raum lebendig.
• Ein Social-Media-Widget für deine Website. Bette einen kuratierten Feed mit dem Social Content deiner Marke direkt auf deiner Startseite oder Kampagnenseite ein. Das liefert frischen Social Proof, hält die Seite lebendig und zeigt Besucher:innen, dass echte Menschen über euch sprechen.
• Content für Digital Signage und Screens. Spiel User-generated Content und Brand-Posts auf Screens im Store, im Foyer oder auf Stadion-Boards aus. Weil sich der Feed von selbst aktualisiert, bleibt der Screen aktuell, ohne dass jemand eingreifen muss.

Warum Walls.io als „Meta-API“?

Und hier kommt der Teil, der dir am meisten Zeit spart. Statt Facebook, Instagram, TikTok, YouTube, LinkedIn und den Rest einzeln anzubinden, verbindest du dich mit einer einzigen Walls.io API, die bereits mit allen spricht. Walls.io nennt das eine Meta-API, und die Vorteile sind handfest:

• Eine Integration statt einem Dutzend. Du sprichst einen HTTP/REST-Endpunkt an und bekommst normalisierten Content aus jedem unterstützten Netzwerk. Keine separaten SDKs, keine Auth pro Netzwerk.
• Um die Plattform-Anbindungen kümmert sich jemand anderes. Soziale Netzwerke ändern ihre APIs ständig. Wenn sie das tun, kümmert sich Walls.io darum. Dein Code läuft weiter.
• Eine einheitliche Datenstruktur. Jeder Post kommt in derselben JSON-Struktur zurück – egal ob er auf Instagram oder LinkedIn entstanden ist. Du schreibst deine Anzeige-Logik nur einmal.
• Moderation und Kuratierung sind eingebaut. Die Posts, die du abrufst, haben bereits die Moderationsregeln deiner Wall im Walls.io Dashboard durchlaufen. Du leitest also keinen rohen, ungefilterten Content auf einen öffentlichen Screen.

Kurz gesagt: Du verbringst deine Zeit mit dem spannenden Teil – wie die Wall aussieht und sich verhält – statt mit der Infrastruktur darunter.

So nutzt du die Walls.io API

Schritt 1: API-Access-Token holen

Jeder API-Request identifiziert über einen Access-Token eine bestimmte Wall. Um einen zu erstellen, öffnest du die Einstellungen deiner Wall im Walls.io Dashboard, suchst den Bereich API und klickst auf Activate API access. Du bekommst dann einen Token, der ungefähr so aussieht:

8ad07e8ba0958191fa7b5842e4d270239f8b7cd

Der API-Zugriff ist in allen kostenpflichtigen Walls.io Plänen enthalten. Die aktuellen Tarife findest du auf der Walls.io Preisseite. Behandle diesen Token wie ein Passwort. Wie du gleich siehst, behalten wir ihn auf dem Server und geben ihn nie an den Browser weiter.

Schritt 2: Der eine Endpunkt, den du brauchst

Alle Endpunkte beginnen mit https://api.walls.io/v1. Für einen Feed brauchst du nur einen einzigen: GET /posts. Ein minimaler Request sieht so aus:

GET https://api.walls.io/v1/posts?access_token=DEIN_TOKEN&fields=id,type,comment,external_fullname,post_image,post_link,created&limit=24&sort=-created

Ein paar Dinge, die du wissen solltest:

• Wähl deine Felder. Der Parameter fields hält die Responses klein, weil nur zurückkommt, was du anforderst. Nützliche Felder für einen Feed sind comment (der Post-Text), external_fullname (Autor:in), type (das Netzwerk), post_image (das angehängte Bild), post_link (die URL des Original-Posts) und created (der Zeitstempel).
• Steuere die Reihenfolge. Standardmäßig liefert die API die Posts in der Reihenfolge, in der sie am Walls.io Server eingetroffen sind – nicht in der Reihenfolge, in der sie gepostet wurden. Für einen Feed willst du fast immer sort=-created, damit die neuesten Posts zuerst erscheinen.
• Beachte das Rate-Limit. Die Limits sind großzügig. Die API ein- bis zweimal pro Sekunde aufzurufen, ist völlig in Ordnung – und mit Caching (siehe unten) rufst du sie viel seltener auf.
• Ruf sie serverseitig auf. Die Walls.io API unterstützt kein CORS, und dein Token sollte nie in Code landen, der im Browser läuft. Beide Beispiele unten laufen deshalb auf einem Server, holen die Daten und liefern fertiges HTML an den Browser aus.

Schritt 3: Abrufen, cachen, anzeigen

Das Muster ist in jeder Sprache dasselbe. Zuerst prüfen wir, ob wir eine lokale Kopie der Daten haben, die jünger als fünf Minuten ist. Wenn ja, nutzen wir sie. Wenn nicht, rufen wir die API auf, speichern die frische Response in einer lokalen Cache-Datei und rendern sie. Das hält deine Wall schnell, dich weit unter dem Rate-Limit und die Wall auch dann online, wenn die API einmal hustet.

PHP-Beispiel

Speichere das als wall.php, trag deinen Token ein und richte deinen Webserver darauf aus. Das Skript legt eine Cache-Datei daneben an und rendert einen einfachen Feed.

<?php
// ---- Konfiguration ----
$ACCESS_TOKEN = 'DEIN_WALLS_IO_ACCESS_TOKEN';
$CACHE_FILE   = __DIR__ . '/wallsio-cache.json';
$CACHE_TTL    = 300; // 5 Minuten, in Sekunden

function get_wallsio_posts($token, $cacheFile, $ttl) {
    // 1. Aus dem Cache ausliefern, solange er frisch ist
    if (file_exists($cacheFile) && (time() - filemtime($cacheFile) < $ttl)) {
        return json_decode(file_get_contents($cacheFile), true);
    }

    // 2. Andernfalls frische Daten von der API holen
    $fields = 'id,type,comment,external_fullname,post_image,post_link,created';
    $url = 'https://api.walls.io/v1/posts'
         . '?access_token=' . urlencode($token)
         . '&fields='   . urlencode($fields)
         . '&limit=24'
         . '&sort=-created';

    $response = @file_get_contents($url);

    // 3. Ist die API nicht erreichbar, notfalls auf einen veralteten Cache zurückfallen
    if ($response === false) {
        if (file_exists($cacheFile)) {
            return json_decode(file_get_contents($cacheFile), true);
        }
        return ['data' => []];
    }

    // 4. Frische Response speichern und zurückgeben
    file_put_contents($cacheFile, $response);
    return json_decode($response, true);
}

$result = get_wallsio_posts($ACCESS_TOKEN, $CACHE_FILE, $CACHE_TTL);
$posts  = $result['data'] ?? [];
?>
<!doctype html>
<html lang="de">
<head><meta charset="utf-8"><title>Unsere Social Wall</title></head>
<body>
  <h1>Das sagen die Leute</h1>
  <?php foreach ($posts as $post): ?>
    <article>
      <strong><?= htmlspecialchars($post['external_fullname'] ?? 'Jemand') ?></strong>
      <em>(<?= htmlspecialchars($post['type'] ?? '') ?>)</em>
      <p><?= nl2br(htmlspecialchars($post['comment'] ?? '')) ?></p>
      <?php if (!empty($post['post_image'])): ?>
        <img src="<?= htmlspecialchars($post['post_image']) ?>" alt="" width="320">
      <?php endif; ?>
      <?php if (!empty($post['post_link'])): ?>
        <p><a href="<?= htmlspecialchars($post['post_link']) ?>">Original-Post ansehen</a></p>
      <?php endif; ?>
    </article>
    <hr>
  <?php endforeach; ?>
</body>
</html>

JavaScript-Beispiel (Node.js)

Diese Version nutzt Node.js mit dem eingebauten fetch (Node 18 oder neuer) und ein bisschen Express, um die Seite auszuliefern. Gleiche Logik: fünf Minuten cachen, bei Fehlern auf den veralteten Cache zurückfallen, vor dem Rendern alles escapen. Führe vorher npm install express aus.

const express = require('express');
const fs = require('fs');
const path = require('path');

// ---- Konfiguration ----
const ACCESS_TOKEN = process.env.WALLSIO_TOKEN || 'DEIN_WALLS_IO_ACCESS_TOKEN';
const CACHE_FILE   = path.join(__dirname, 'wallsio-cache.json');
const CACHE_TTL    = 5 * 60 * 1000; // 5 Minuten, in Millisekunden

const app = express();

async function getPosts() {
  // 1. Aus dem Cache ausliefern, solange er frisch ist
  try {
    const stat = fs.statSync(CACHE_FILE);
    if (Date.now() - stat.mtimeMs < CACHE_TTL) {
      return JSON.parse(fs.readFileSync(CACHE_FILE, 'utf8'));
    }
  } catch (e) { /* noch kein Cache vorhanden, weiter geht's */ }

  // 2. Frische Daten von der API holen
  const fields = 'id,type,comment,external_fullname,post_image,post_link,created';
  const url = 'https://api.walls.io/v1/posts'
            + `?access_token=${encodeURIComponent(ACCESS_TOKEN)}`
            + `&fields=${encodeURIComponent(fields)}`
            + '&limit=24&sort=-created';

  try {
    const res  = await fetch(url);
    const json = await res.json();
    fs.writeFileSync(CACHE_FILE, JSON.stringify(json)); // 3. Im Cache speichern
    return json;
  } catch (e) {
    // 4. Bei einem Fehler notfalls auf einen veralteten Cache zurückfallen
    if (fs.existsSync(CACHE_FILE)) {
      return JSON.parse(fs.readFileSync(CACHE_FILE, 'utf8'));
    }
    return { data: [] };
  }
}

function escapeHtml(str = '') {
  return String(str).replace(/[&<>"']/g, c => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
  }[c]));
}

app.get('/', async (req, res) => {
  const { data = [] } = await getPosts();
  const items = data.map(p => `
    <article>
      <strong>${escapeHtml(p.external_fullname || 'Jemand')}</strong>
      <em>(${escapeHtml(p.type || '')})</em>
      <p>${escapeHtml(p.comment || '')}</p>
      ${p.post_image ? `<img src="${escapeHtml(p.post_image)}" alt="" width="320">` : ''}
      ${p.post_link ? `<p><a href="${escapeHtml(p.post_link)}">Original-Post ansehen</a></p>` : ''}
    </article><hr>`).join('');

  res.send(`<!doctype html><html lang="de"><head><meta charset="utf-8">
    <title>Unsere Social Wall</title></head><body>
    <h1>Das sagen die Leute</h1>${items}</body></html>`);
});

app.listen(3000, () => console.log('Social Wall läuft auf http://localhost:3000'));

Das ist bereits eine vollständige, funktionierende Social Wall. Du möchtest, dass sie sich im Browser auch optisch aktualisiert, ohne dass jemand neu lädt? Dann füge dem <head> der Seite eine einzige Zeile hinzu, die sie alle fünf Minuten neu lädt – passend zu deinem Cache-Intervall:

<meta http-equiv="refresh" content="300">

Lass Claude Code das für dich bauen

Alles oben ist gut zu verstehen – abtippen musst du es aber nicht. Claude Code kann das Ganze aus einem guten Prompt heraus aufsetzen. Der Trick: Gib die entscheidenden Fakten mit, die der Agent nicht erraten kann – den exakten Endpunkt, die gewünschten Felder, die Caching-Regel und die CORS-Einschränkung. Hier ist ein Prompt, den du direkt in Claude Code einfügen kannst:

Baue eine kleine Social-Wall-Web-App mit der Walls.io API.

API-Details:
- Endpunkt: GET https://api.walls.io/v1/posts
- Auth: mein Token als Query-Parameter access_token übergeben
- Diese Felder anfordern: id,type,comment,external_fullname,post_image,post_link,created
- limit=24 und sort=-created verwenden (neueste zuerst)
- Die API unterstützt KEIN CORS und der Token muss serverseitig bleiben,
  also serverseitig abrufen und fertiges HTML an den Browser ausliefern.

Anforderungen:
- Die API-Response in einer lokalen Datei cachen und nur dann neu abrufen,
  wenn der Cache älter als 5 Minuten ist.
- Schlägt der API-Call fehl, auf den veralteten Cache zurückfallen.
- Sämtliche Post-Texte und URLs vor dem Rendern escapen (XSS vermeiden).
- Einen schlanken, einfachen Feed rendern: Autor:in, Netzwerk, Text, Bild und
  einen Link zum Original-Post.

Lies meinen Token aus einer Umgebungsvariable namens WALLSIO_TOKEN.
Gib mir eine Node.js- und eine PHP-Version.

Claude Code legt die Dateien an, und danach kannst du auf ganz normalem Deutsch weiter iterieren: „mach ein responsives Grid daraus“, „zeig das Icon des Netzwerks neben jedem Post“ oder „cache in Redis statt in einer Datei“. Weil du den API-Vertrag gleich zu Beginn mitgegeben hast, rät der Agent nicht am falschen Endpunkt herum und schleust deinen Token auch nicht in Client-Code ein.

Fazit

Mit einem API-Token und ein paar Zeilen gecachtem, serverseitigem Code hast du eine Social Wall, die Content aus allen Netzwerken auf einmal zieht und sich selbst aktualisiert. Die Walls.io Meta-API nimmt dir die Integrationsarbeit pro Plattform ab, und Claude Code nimmt dir den Großteil der Tipparbeit ab. Von hier aus kannst du den Feed an dein Branding anpassen, nach Medientyp oder Sprache filtern oder ihn beim nächsten Event auf den großen Screen bringen. Die Bausteine bleiben dieselben. Der Rest liegt bei dir.

Als Nächstes in dieser Serie: derselbe Build, umgesetzt mit OpenAI Codex.