Wir zeigen dir in diesem Beitrag, wie du deinen Social Media Feed auf einer WordPress Website darstellen kannst. Hier ein Beispiel von uns:
In 5 Schritten zu deinem eignen Social Media Feed für WordPress
25. August 2023
1. Social Media Feed-Plugin installieren und einrichten
Die Auswahl an verschiedenen Social Media Plugins ist unglaublich gross. Um dir folglich eine lange Suche zu ersparen, geben wir dir eine Empfehlung für ein WordPress Plugin, welches uns gute Dienste leistet: Smash Balloon. Keine Angst, das ist kein Party-Produkt und wir erhalten für diese Empfehlung auch keine Provision! Wir finden es einfach ein gutes Plugin, welches eine breite Palette an Möglichkeiten bietet. Mit Smash Balloon hast du die Möglichkeit YouTube, Reviews, Facebook, Twitter und Instagram Feeds zu erstellen und diese dann auf deiner Website einzubinden und individuell darzustellen. Wir zeigen dir im Folgenden an einem konkreten Beispiel, wie du das Plugin auf WordPress integrieren kannst.
Du kennst Smash Balloon bereits? Dann finde hier heraus, warum du deine WordPress Plugins immer up-to-date halten solltest.
Das Plugin zeichnet sich durch eine einfache User-Journey aus. Aber trotzdem kann man die Darstellung des Contents auf der Website jederzeit flexibel anpassen und dazu braucht man keine IT-Expertise. Sobald du dich auf der Website registrierst und eine Lizenz gekauft hast, die für dich passend ist, siehst du die Lizenzen bei der Übersicht. Wir haben für uns beispielsweise nur die Instagram Lizenz gekauft, da wir diesen Kanal auch teilen möchten. Als nächstes kannst du auf den Button «View License Keys, Details, and Downloads» klicken und dort den Lizenz-Schlüssel kopieren, welchen du für die Aktivierung des Plugins in WordPress brauchst.
Auf dem WordPress-Admin-Dashboard kannst du auf der linken Seite auf «Plugins» (1) und danach auf die Option «Installieren» klicken (2). Nun siehst du oben links ein Button, welcher dir erlaubt die von Smash Balloon heruntergeladene ZIP-Datei hochzuladen (3). Die Datei befindet sich wahrscheinlich in deinem Downloads-Ordner (4). Als letztes drückst du auf «Jetzt installieren / install now» und anschliessend auf «Plugin aktivieren». Nach diesen Schritten wird eine neue Kategorie «Instagram Feed» auf der linken Seitenleiste sichtbar (5).
2. Gewünschten Feed-Typ erstellen
Wenn du auf das neu erschienene Feld klickst solltest du auf das Feed-Dashboard von Smash Balloon gelangen. Hier kannst du auf «+ Add New» klicken, um einen neuen Feed anzulegen. Dann kommst du zur Maske, wo du den Typ auswählen sollst. Zur kurzen Zusammenfassung, welchen Content du wie darstellen kannst:
-
User-Timeline: Profil eigener Content (diese Variante wird in unserem Beispiel verwendet)
-
Public Hashtag: Instagram-Hashtag, welcher von allen verwendet wird. Zum Beispiel #KlubdergutenSeiten
-
Tagged Posts: Posts, auf denen dein Profil getaggt wurde (bedeutet ein Post mit einem @Namen von deinem Profil). Zum Beispiel alle Posts mit dem Tag @klubdergutenseiten
-
Social Wall: Wenn du bei Smash Balloon die Lizenz holst, welche alle Social Media beinhaltet, schaltest du dir zusätzlich dieses Feature frei. Es gibt dir die Möglichkeit alle Sozialen Medien zusammenzufassen.
Als nächstes muss man die Quelle festlegen, beziehungsweise das Social Media Profil, von dem der Content kommen soll. Klicke dafür auf «+ Add New» und wähle aus, ob du ein persönliches oder Unternehmenskonto bei Instagram besitzt. Ein Unternehmenskonto hat mehr Features, um beispielsweise dein Profilbild und eine Beschreibung darzustellen, sowie das Nutzen von «Public Hashtag» und «Tagged Posts». Danach kannst du dich mit deinem Konto anmelden und mit «Yes, it is my domain» bestätigen, dass es sich um dein Profil handelt.
Nachdem du die Quelle ausgewählt hast kommst du zur Themenauswahl. Dabei handelt es sich um die Voreinstellungen für das Styling der Posts. Keine Sorge, diese sind später auch beliebig anpassbar. Es gibt im Anschluss ganz viele Anpassungsmöglichkeiten wie zum Beispiel: das Template, Feed Layout, Themes, die Anzahl der Posts et cetera. Am besten probierst du hier einfach etwas aus und suchst eine passende Darstellungsoption für deinen Anwendungsfall. Das Gute dabei ist, das Plugin erstellt dir auf der rechten Seite jeweils eine Vorschau und dir den Feed gleich auf allen Geräten (Desktop, Tablet, Smartphone) anschauen.
3. Social Media Feed bei der Webseite einbinden
Wir haben im Schritt 1 und 2 bereits das Konto verknüpft und die Darstellungsoptionen ausgewählt. Nun geht es darum den Feed auch auf der Website einzubinden. Geh dafür auf die Übersicht (1 + 2), wo alle Feeds aufgelistet sind (in deinem Fall wird das erst einer sein). Mithilfe von einem Shortcode kannst du dann den Feed auf deiner WordPress-Seite oder -Post einbinden. Dafür kopierst du als Erstes den Code (3) und danach gehst du auf den Post oder die Page, wo du den Feed einsetzen möchtest.
Als nächstes kannst du den Feed ganz einfach mit dem Shortcode-Block einbinden. Das heisst du musst einfach den Code Mithilfe von Ctrl + V oder auf Mac Command + V an der gewünschten Stelle einfügen, alles speichern und schon siehst du deinen clean integrierten Instagram Feed auf deiner Website. Zuletzt werden wir dir noch einige kleine Tricks zeigen, wie du das Aussehen des Feeds auf deine Website abstimmen kannst.
4. Gestaltung deines eigenen Social Media Feed-Templates für WordPress
Zuletzt werden wir dir noch einige kleine Tricks zeigen, wie du das Aussehen des Feeds auf deine Website abstimmen kannst:
Dein Branding durch Farben übernehmen (1)
Im folgenden Beispiel zeigen wir euch, wie du dein Corporate Branding durch Farben in den Einstellungen übernehmen kannst. Zuerst klickst du auf den Button «Color Scheme». Dann kannst du die Option «Custom» auswählen und mit den Textfeldern Background, Text 1 & 2 durch einen Hex-Code deine Farbe wählen. So kannst du sicherstellen, das der Hintergrund auch genau die Farbe hat, welche du gerne hättest.
Feed Layout – Bestimme die Menge an Posts, die du darstellen möchtest (2)
Sobald du die Kategorie Feed Layout auswählst, kannst du dort die Menge angezeigter Posts festlegen. In unserem Beispiel sind es ja nur 4 Posts. Du kannst aber auch 9 eingeben mit 3 Spalten und dann hast du gleich eine ganzen Block voll mit Social Media Beiträgen. Hier macht es vielleicht noch Sinn zu erwähnen, dass du mit Filtern auch einzelne Beiträge herausfiltern kannst (z.B. Videos / Reels), welche du allenfalls nicht auf deiner Website anzeigen möchtest.
Header anpassen (3)
Für den Header hast du vier verschiedene Styles zur Auswahl. Ausserdem hast du die Option deinen Feed mit einem Titel oder einem kleinen Text zu versehen. Ein Beispiel könnte sein: «Unseren Agenturalltag kannst du (fast) live auf Instagram verfolgen. Hier ein kleiner Einblick hinter die Kulissen»
Go Custom (4)
Möchtest du noch mehr Individualität? Das lässt sich einrichten. Dann bedarf es jedoch etwas tieferem CSS Verständnis und du kommst um das Coden nicht mehr herum. Hier kann dir Bruno aus unserem Team aber sicherlich zur Seite stehen.
