So betten Sie den Instagram-Feed auf Ihrer Astra-WordPress-Website ein
Startseite Blog So betten Sie den Instagram-Feed auf Ihrer Astra-WordPress-Website ein

So betten Sie den Instagram-Feed auf Ihrer Astra-WordPress-Website ein

So betten Sie den Instagram-Feed auf Ihrer Astra-WordPress-Website ein

Möchten Sie Ihren lebendigen Instagram-Feed direkt in Ihre Astra-WordPress-Website einbinden?

Die Veröffentlichung Ihrer neuesten Instagram-Fotos, -Reels und -Videos auf Ihrer Astra-Website ist eine großartige Möglichkeit, Ihre Website frisch zu halten und die Besucher von Ihrer Website auf Ihre Instagram-Seite zu leiten, wobei das Design Ihres Astra-Themas perfekt ergänzt wird.

Aber als Social-Media-Vermarkter weiß ich, dass es schwierig sein kann, Ihren Instagram-Feed mit den normalen Instagram-Optionen so aussehen zu lassen, wie Sie es auf Ihrer Astra-Website wünschen.

Wir von Smash Balloon stellen die besten Social-Media-Feed-Plugins für WordPress her, die nahtlos mit Top-Themes wie Astra zusammenarbeiten. Unsere Plugins machen es super einfach, Inhalte von Websites wie Instagram mit vollständiger Anpassung anzuzeigen.

In diesem Artikel zeige ich Ihnen genau, wie Sie mit unserer einfachen Methode Ihren Instagram-Feed zu Ihrer Astra-Website hinzufügen können.

Noch besser? Dieser Leitfaden führt Sie Schritt für Schritt durch alles. Sie ist für jeden Astra-Benutzer gedacht, sodass Sie Ihren schönen Instagram-Feed schnell auf Ihre Website bringen können, selbst wenn Sie sich mit Technik nicht auskennen.

In diesem Artikel

Warum Instagram-Feed auf Astra-Websites einbetten?

Das von Brainstorm Force entwickelte Astra ist ein beliebtes WordPress-Theme und eine gute Option, wenn Sie nach einer Möglichkeit suchen, eine Website für Ihre Marke zu erstellen.

wp astra wordpress theme plugin

Mit der Pro-Version von Astra wird es Ihnen leichter fallen, eine WordPress-Website zu erstellen, die die Besucher Ihrer Website anspricht und ihr Interesse weckt.

Um Ihre Astra-Website noch ansprechender zu gestalten, können Sie ganz einfach Inhalte aus sozialen Netzwerken wie Instagram einbetten.

Durch das Einbetten von Feeds von Instagram-Inhalten können Sie das tun:

  • Erregen Sie die Aufmerksamkeit der Besucher mit schönen Fotos und Videos und halten Sie sie auf Ihrer Website.
  • Zeigen Sie positive Bewertungen an, um Besuchern zu zeigen, dass normale Menschen auf Instagram mit Ihren Produkten zufrieden sind, und steigern Sie so Ihren Umsatz.
  • Zeigen Sie Instagram-Posts von Ihrem eigenen Profil, um viele neue Interaktionen und Follower zu erhalten
  • Binden Sie einen einkaufsfähigen Instagram-Feed ein und bieten Sie Ihren Website-Besuchern ein ansprechendes Einkaufserlebnis
  • Und vieles mehr...

Alles, was Sie tun müssen, ist, Instagram-Feeds auf Ihrer Astra-Website einzubetten, und schon können Sie die Instagram-Präsenz Ihrer Marke ausbauen, Ihren Umsatz steigern und vieles mehr.

Schauen wir uns also die einfachste Möglichkeit an, Instagram-Feeds in Astra einzubetten.

Der einfachste Weg, Instagram-Feeds auf Ihrer Astra-Website einzubetten

Wenn es um die Integration von WordPress mit Instagram geht, ist das beste Tool, das Sie verwenden können, Smash Balloon Instagram Feed Pro.

bestes instagram feed pro plugin

Instagram Feed Pro ist ein WordPress-Plugin, mit dem Sie Instagram-Inhalte auf Ihrer Website anzeigen können, ohne dass Sie Programmierkenntnisse benötigen.

Mit diesem Plugin können Sie Instagram-Fotos, -Videos, -Kurzfilme, -Karussells, -Stories und vieles mehr einbetten. Keine Codierung erforderlich.

Folgen Sie einfach dieser einfachen Anleitung, und das Plugin führt Sie durch den Prozess des Erstellens, Anpassens und Einbettens von Instagram-Feeds.

geführter Instagram-Feed pro

Außerdem können Sie mit Instagram Feed Pro das Design Ihrer Feeds auf vielfältige Weise anpassen.

Um Ihre Feeds auf einfache Weise zu personalisieren, können Sie eine vorgefertigte Vorlage importieren und sofort ein einzigartiges Design kopieren.

Ich persönlich verwende Instagram Feed Pro, um meine Instagram-Inhalte auf meiner Astra-Website zu zeigen, weil ich die visuelle Feed-Anpassungsfunktion so toll finde.

Mit nur wenigen Klicks können Sie Ihr Layout, Farbschema, Beitragselemente, Filter, Kopfzeilendesign und vieles mehr bearbeiten. Außerdem können Sie alle Ihre Änderungen in Echtzeit verfolgen.

Visueller Anpasser Instagram Feed Pro

Da das Plugin so konzipiert wurde, dass es leichtgewichtig ist, können Sie so viele Instagram-Posts einbetten, wie Sie wollen, und Ihre Website wird trotzdem so schnell wie immer geladen.

Und mit einer schnelleren Website können Sie auch eine viel bessere Suchmaschinenoptimierung erzielen.

Mit all diesen erstaunlichen Funktionen ist Instagram Feed Pro einfach das beste Instagram-Feed-Plugin auf dem Markt und hat über 1 Million Nutzer und eine Bewertung von 4,9/5 Sternen!

bewertungen instagram feed pro plugin

Sind Sie bereit, Instagram-Feeds in Astra einzubinden? Holen Sie sich noch heute Smash Balloon Instagram Feed Pro für Ihre Website.

Beginnen wir also mit unserer Schritt-für-Schritt-Anleitung unten.

So betten Sie den Instagram-Feed auf Ihrer Astra-Website ein

Wenn Sie bereit sind, Instagram-Feeds in Ihre Astra-WordPress-Website einzubetten, müssen Sie nur noch unserer Schritt-für-Schritt-Anleitung unten folgen.

Schritt 1: Installieren Sie das Smash Balloon Instagram Feed Pro Plugin

Um loszulegen, können Sie sich Ihr Exemplar von Instagram Feed Pro hier abholen und es auf Ihren Computer herunterladen.

Installieren und aktivieren Sie dann das Plugin auf Ihrer WordPress-Website.

Weitere Informationen finden Sie in diesem Leitfaden für Einsteiger zur Installation eines WordPress-Plugins.

Schritt 2: Erstellen Sie Ihren Instagram-Feed

Sie können nun einfach der Anleitung des Plugins folgen und mit der Erstellung Ihres Instagram-Feeds beginnen.

Öffnen Sie das Menü Instagram-Feed " Alle Feeds in Ihrem WordPress-Dashboard-Bereich, um loszulegen.

Klicken Sie dann oben auf die Schaltfläche Neu hinzufügen.

Neuen Feed erstellen Instagram Feed Pro

Als Nächstes können Sie die Art des Instagram-Inhalts auswählen, den Sie auf Ihrer Website einbetten möchten:

  • Benutzer-Zeitleiste: Anzeigen der Beiträge des eigenen Instagram-Kontos
  • Öffentlicher Hashtag: Wählen Sie bestimmte Hashtags und zeigen Sie alle Beiträge mit diesem Hashtag an
  • Getaggte Beiträge: Verwenden Sie den Feed, um Ihre Instagram-Erwähnungen auf Ihrer Website anzuzeigen

Sie können hier sogar mehrere Optionen auswählen, um Feed-Typen in einem einzigen Feed zu kombinieren.

Klicken Sie einfach auf die Schaltfläche Weiter, nachdem Sie Ihren Feed-Typ ausgewählt haben.

Wählen Sie Ihren Feed-Typ Instagram Feed Pro

Schritt 3: Verbinden Sie den Feed mit Ihrem Instagram

Sie können jetzt Ihr Instagram-Konto für Unternehmen oder Kreative mit Ihrer Website verbinden. Falls Sie noch keines haben, folgen Sie einfach dieser Schritt-für-Schritt-Anleitung hier.

Klicken Sie anschließend auf die Schaltfläche Quelle hinzufügen.

Instagram Quelle für Feed hinzufügen

Sie können jetzt zwischen 2 Arten von Instagram-Verbindungen wählen: Basic oder Advanced.

Mit einer einfachen Verbindung können Sie Ihre eigenen Instagram-Fotos und -Videos Ihren Besuchern zeigen.

Andererseits können Sie mit einer erweiterten Verbindung Instagram-Hashtag-Feeds, Erwähnungs-Feeds, Stories und mehr anzeigen.

Um fortzufahren, wählen Sie Ihren Kontotyp aus und klicken Sie dann auf die Schaltfläche Verbinden unten.

Instagram-Verbindungstyp wählen

Danach können Sie Instagram oder Facebook öffnen, je nachdem, wie Ihre Verbindung aussieht. Die gute Nachricht ist, dass der Vorgang für beide Optionen derselbe ist.

Für den Moment klicke ich auf Mit Instagram verbinden.

Ihr Instagram-Basisprofil verbinden

Um eine Verbindung zu Instagram herzustellen, bittet das Plugin nun um einen schreibgeschützten Zugriff auf Ihr Instagram-Konto.

Da das Plugin Ihre Inhalte nur anzeigen und keine Änderungen vornehmen kann, ist Instagram Feed Pro absolut sicher.

Klicken Sie auf die Schaltfläche Zulassen, um fortzufahren.

nur Lesezugriff zulassen instagram

Wenn Sie eine fortgeschrittene Verbindung gewählt haben, können Sie das Gleiche auf Facebook tun.

Jetzt können Sie diese Quelle für alle Ihre zukünftigen Instagram-Feeds wiederverwenden.

Wählen Sie zum Abschluss Ihre Quelle aus und klicken Sie auf Weiter.

Bestätigen Sie Ihre Instagram-Feed-Quelle

Schritt 4: Passen Sie Ihren Astra Instagram-Feed an

Da das Plugin so benutzerfreundlich ist, können Sie Ihre Astra-Instagram-Feeds auch ganz einfach personalisieren - ohne eine einzige Zeile Code anfassen zu müssen.

Um Ihnen den Einstieg zu erleichtern, erhalten Sie 8 vorgefertigte Vorlagen, aus denen Sie wählen können.

Um fortzufahren, wählen Sie einfach eine Vorlage aus, die Sie verwenden möchten, und klicken Sie dann auf Weiter.

instagram vorlagen astra

Nachdem Sie Ihre Vorlage importiert haben, öffnet Instagram Feed Pro den Live-Feed-Editor, mit dem Sie den Feed detailliert anpassen können.

Auf der linken Seite finden Sie die Anpassungsoptionen, mit denen Sie das Layout Ihres Feeds, das Farbschema, die Kopfzeile, die Beitragselemente, weitere Schaltflächen zum Laden und vieles mehr festlegen können - ohne HTML- oder CSS-Kenntnisse.

live feed editor für instagram feed pro

Wann immer Sie mit diesen Optionen Änderungen vornehmen, zeigt Ihnen die Live-Vorschau auf der rechten Seite, wie Ihr Instagram-Feed in Echtzeit aussehen wird.

Sie können nun auf die Option "Feed-Layout" klicken und mit der Einrichtung des Layouts Ihrer Instagram-Posts beginnen.

Feed-Layout-Optionen auswählen Live-Feed-Editor-Instagram

Anschließend können Sie aus 4 verschiedenen vorgefertigten Vorlagen wählen:

  • Raster: Betten Sie Ihre Instagram-Inhalte in übersichtliche Reihen und Spalten ein, damit Sie viele Beiträge auf einmal anzeigen können.
  • Karussell: Verwandeln Sie Ihre Instagram-Posts in ein wunderschönes Instagram-Karussell und begeistern Sie Ihre Besucher
  • Gemäuer: Präsentieren Sie Instagram-Inhalte in mehreren Spalten und behalten Sie dabei ihre ursprünglichen Proportionen bei
  • Hervorheben: Anzeige der Beiträge in quadratisch zugeschnittenen Bildern, wobei bestimmte Beiträge doppelt so groß dargestellt werden

Für dieses Beispiel verwenden wir das Layout Highlight .

feed layout optionen instagram feed pro

Um Ihr neues Layout zu bestätigen, klicken Sie oben auf die Schaltfläche Speichern.

Klicken Sie anschließend auf die kleine Schaltfläche " Anpassen" , um zu den Hauptanpassungsoptionen zurückzukehren.

Zurück zu den wichtigsten Anpassungsoptionen für Instagram

Damit können Sie die Farben für Ihren Instagram-Feed festlegen.

Klicken Sie einfach auf die Option Farbschema auf der linken Seite, um loszulegen.

Farbschema-Option auswählen

Wenn Sie die Farben Ihres Feeds auf einfache Weise ändern möchten, können Sie aus diesen Farbschemata wählen:

  • Vererben vom Theme: Kopieren Sie die Farben Ihres Astra-Themas, damit Ihr Feed perfekt zu Ihrer Website passt.
  • Hell: Anzeige eines Instagram-Feeds mit hellem Hintergrund und dunkler Schrift
  • Dunkel: Wählen Sie einen dunklen Hintergrund und eine helle Schrift für Ihren Instagram-Feed
  • Benutzerdefiniert: Wählen Sie manuell alle Farben selbst aus
Farbschema-Optionen Live-Instagram-Feed

Nachdem Sie Ihr Farbschema ausgewählt haben, klicken Sie auf die Schaltfläche Speichern.

Möchten Sie Ihren Instagram-Feed noch mehr anpassen? Mit den verbleibenden Anpassungsoptionen können Sie Ihre Kopfzeile personalisieren, weitere Schaltflächen und Filter laden und vieles mehr.

Wenn Sie mit dem Design Ihres Instagram-Feeds zufrieden sind, vergessen Sie nicht, auf die Schaltfläche " Speichern" zu klicken.

Schritt 5: Einbetten Ihres Astra Instagram Feeds

Über den Live-Feed-Editor können Sie diesen Instagram-Feed jetzt auf Ihrer Webseite, in der Seitenleiste und in der Fußzeile einbetten.

Klicken Sie zunächst auf die Schaltfläche Einbetten am oberen Rand des Editors.

Instagram Klicken Sie auf die Schaltfläche "Einbetten

Daraufhin wird ein Popup-Fenster mit allen Möglichkeiten angezeigt, wie Sie Ihren Instagram-Feed einbetten können.

Für unser Beispiel wählen wir die Option Zu einer Seite hinzufügen .

Live-Instagram-Feed zur Seite hinzufügen

Sobald Sie das getan haben, können Sie mit Instagram Feed Pro die Seite auswählen, in die Sie Ihren Feed einbetten möchten.

Sie können es in eine WordPress-Seite einbetten, als Instagram-Feed-Widget anzeigen oder sogar den Shortcode kopieren.

Wählen Sie einfach die gewünschte Option aus und klicken Sie dann auf die Schaltfläche Hinzufügen.

Seite auswählen, um Live-Instagram-Feed einzubetten

Dadurch wird die Seite im Gutenberg-Editor von WordPress geöffnet oder Sie können andere Seitenerstellungsprogramme verwenden. Immerhin hat Astra volle Kompatibilität mit großen Page Buildern wie Beaver Builder oder Elementor.

Sie können sogar eine Vorlage in diese WordPress-Seite importieren, bevor Sie Ihren Instagram-Feed einbetten. Klicken Sie dazu oben auf die Schaltfläche Vorlagen-Kits.

Vorlagen öffnen wp astra

Wenn Sie darauf klicken, öffnet sich ein Popup-Fenster, in dem Sie alle Vorlagen sehen können, die Sie importieren können.

Suchen Sie hier die gewünschte Vorlage und klicken Sie sie an.

wp astra vorlage auswählen.jpg

Sie können dann weitere Informationen über die Vorlage sehen. Auf der rechten Seite finden Sie auch alle Varianten dieser Vorlage.

Um fortzufahren, können Sie unten auf die Schaltfläche Vorlage importieren klicken.

Importvorlage wp astra

Sobald Sie darauf geklickt haben, fügt Astra die Vorlage hier zu Ihrer Seite hinzu. Nachdem Sie das getan haben, können Sie Ihren Instagram-Feed einbetten.

Klicken Sie zunächst auf das Pluszeichen (+), um einen neuen WordPress-Block hinzuzufügen.

neuen Inhaltsblock in Wordpress hinzufügen

Über die Suchleiste oben können Sie nun nach dem Block "instagram" suchen.

Klicken Sie anschließend auf den Instagram-Feed-Block in den Suchergebnissen unten.

Instagram-Feed-Block auf Wordpress-Seite einbetten

Klicken Sie abschließend auf die Schaltfläche Aktualisieren, und Ihr neuer Astra-Instagram-Feed wird auf Ihrer Website live geschaltet.

Wie Sie sehen können, ist es mit Instagram Feed Pro ganz einfach, Instagram-Inhalte auf Ihrer Website anzuzeigen. Wenn Sie Ihre Seite öffnen, können Sie sehen, wie der Instagram-Inhalt für Ihre Besucher aussehen wird.

Beispiel Live-Instagram-Feed

Und das war's!

Wie Sie sehen, kann es mit Hilfe des Instagram Feed Pro Plugins super einfach sein, Instagram-Feeds in WordPress einzubetten.

Möchten Sie Instagram-Feeds einfach einbetten? Holen Sie sich noch heute Ihr Exemplar von Instagram Feed Pro!

Wenn Sie schon einmal hier sind, können Sie sich auch unsere Liste der besten Instagram-Marketing-Tipps ansehen.

Hat Ihnen dieser Artikel gefallen? Folgen Sie uns auf Twitter und Facebook für weitere Social-Media-Marketing-Tutorials.

Autorenavatar
Sajjan Sharma Leitende Autorin
Sajjan schreibt seit über 10 Jahren über WordPress, Social Media Marketing und Online-Unternehmen. Seine beruflichen Interessen umfassen auch Influencer Marketing, Content Curation und digitale Marketingstrategien.

Einen Kommentar hinzufügen

Wir freuen uns, dass Sie einen Kommentar hinterlassen haben. Bitte denken Sie daran, dass alle Kommentare gemäß unserer Datenschutzrichtlinie moderiert werden und alle Links nofollow sind. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Lassen Sie uns ein persönliches und sinnvolles Gespräch führen.