Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Wie man einen benutzerdefinierten Instagram-Foto-Feed in WordPress erstellt

Hinweis der Redaktion: Wir erhalten eine Provision für Partnerlinks auf WPBeginner. Die Provisionen haben keinen Einfluss auf die Meinung oder Bewertung unserer Redakteure. Erfahre mehr über Redaktioneller Prozess.

Möchten Sie einen eigenen Instagram-Feed in WordPress erstellen?

Ein Instagram-Feed kann Ihre Website frisch und ansprechend halten und Ihnen gleichzeitig mehr Likes, Shares und Instagram-Follower bescheren.

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach einen benutzerdefinierten Instagram-Foto-Feed für Ihre WordPress-Website erstellen können.

How to create a custom Instagram photo feed in WordPress

Warum einen Instagram-Feed auf Ihrer WordPress-Website einbinden?

Wenn Sie einen Instagram-Feed auf Ihrer WordPress-Website einbetten, können Sie Ihren Besuchern ohne viel zusätzlichen Aufwand frische Inhalte zeigen. Außerdem ermutigt es die Leser, Ihnen auf Instagram zu folgen.

Anstatt Bilder manuell im WordPress-Blockeditor hinzuzufügen, können Sie einfach einen Feed erstellen, der jedes Mal automatisch aktualisiert wird, wenn Sie neue Fotos auf Instagram veröffentlichen. Sie können sogar die Fotos anderer Personen auf Ihrer Website zeigen, indem Sie einen Hashtag-Feed erstellen.

In der folgenden Abbildung sehen Sie ein Beispiel für eine Marke, die einen benutzerdefinierten Instagram-Feed verwendet, um nutzergenerierte Inhalte anzuzeigen.

An example of user-generated Instagram content

Auf diese Weise können Sie einen benutzerdefinierten Instagram-Feed nutzen, um wertvolle soziale Beweise zu liefern und mehr Geld online zu verdienen.

Sehen wir uns also an, wie Sie einen benutzerdefinierten Instagram-Foto-Feed in WordPress erstellen können.

Wie man einen benutzerdefinierten Instagram-Foto-Feed in WordPress erstellt

Der einfachste Weg, einen Instagram-Foto-Feed zu Ihrer Website hinzuzufügen, ist die Verwendung des Smash Balloon Instagram Feed Plugins. Es ist das beste Instagram-Plugin für WordPress, mit dem Sie Inhalte aus Ihrem Instagram-Konto im Handumdrehen anzeigen können.

Es ist auch der einfachste Weg, das Facebook- und Instagram-oEmbed-Problem in WordPress zu beheben.

In unserem Tutorial werden wir mehrere Schritte abdecken, und Sie können die unten stehenden Links verwenden, um zu den einzelnen Abschnitten zu springen:

Wie man ein Instagram-Konto mit WordPress verbindet

Zunächst müssen Sie das Smash Balloon Instagram Feed Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Hinweis: In dieser Anleitung verwenden wir die Premium-Version von Smash Balloon, mit der Sie einen komplett benutzerdefinierten Instagram-Feed mit Hashtags und einkaufbaren Bildern erstellen können. Wenn Sie gerade erst anfangen oder ein kleines Budget haben, gibt es auch ein kostenloses Smash Balloon Social Photo Feed Plugin.

Rufen Sie nach der Aktivierung die Seite Instagram-Feed “ Einstellungen im WordPress-Dashboard auf

Geben Sie anschließend Ihren Smash Balloon-Lizenzschlüssel in das Feld „Lizenzschlüssel“ ein.

Adding a license to Smash Balloon's Instagram plugin

Sie finden diese Informationen in der Bestätigungs-E-Mail, die Sie beim Kauf von Smash Balloon erhalten haben, sowie in Ihrem Smash Balloon-Konto.

Sobald Sie dies getan haben, klicken Sie auf die Schaltfläche „Aktivieren“.

Sie sind nun bereit, einen benutzerdefinierten Instagram-Feed zu erstellen. Wählen Sie dazu Instagram-Feed “ Alle Feeds und klicken Sie dann auf die Schaltfläche „Neu hinzufügen“.

Creating an Instagram feed for WordPress

Smash Balloon zeigt nun alle verschiedenen Arten von Instagram-Feeds an, die Sie erstellen können.

Wählen Sie einfach die Art des Feeds aus, den Sie zu WordPress hinzufügen möchten, und klicken Sie auf „Weiter“.

How to add an Instagram timeline feed to WordPress

Wenn Sie nur Ihre Instagram-Fotos zeigen möchten, können Sie ein persönliches Instagram-Konto verwenden. Sie benötigen jedoch ein geschäftliches Instagram-Konto, wenn Sie einen Hashtag-Feed erstellen oder die Beiträge anzeigen möchten, in denen Ihr Konto getaggt ist.

Tipp: Sie haben noch kein Geschäftskonto? Um Ihr persönliches Instagram-Konto in ein Geschäftskonto umzuwandeln, folgen Sie einfach der Schritt-für-Schritt-Anleitung von Smash Balloon.

Wenn Sie „Hashtag veröffentlichen“ wählen, müssen Sie die Hashtags eingeben, die Sie verwenden möchten. Um mehrere Hashtags im selben Feed anzuzeigen, trennen Sie einfach jeden Hashtag mit einem Komma.

Adding Instagram hashtags to your WordPress website

Klicken Sie dann einfach auf „Weiter“.

Möchten Sie Beiträge anzeigen, in denen Ihr Konto getaggt ist? Wählen Sie stattdessen „Getaggte Beiträge“ und klicken Sie dann auf „Weiter“.

How to show tagged posts in a custom Instagram feed

Unabhängig davon, welche Art von Feed Sie erstellen, müssen Sie WordPress mit Ihrem Instagram-Konto verbinden.

Klicken Sie auf die Schaltfläche „Quelle hinzufügen“, um zu beginnen.

Creating a custom Instagram photo feed in WordPress

Wählen Sie anschließend aus, ob Sie Bilder von einem persönlichen oder einem geschäftlichen Konto anzeigen möchten.

Wenn Sie die Schaltfläche neben „Persönlich“ auswählen, fügt Smash Balloon den Instagram-Avatar und die Biografie standardmäßig nicht in Ihre Kopfzeile ein. Sie können das Instagram-Avatar und den Lebenslauf jedoch jederzeit manuell in den Einstellungen des Plugins hinzufügen.

Choose between a personal and business Instagram account

Wenn Sie zwischen einem Geschäfts- und einem Privatkonto gewählt haben, klicken Sie einfach auf „Mit Facebook anmelden“.

Sie können nun das Instagram-Konto auswählen, das Sie auf Ihrer WordPress-Website einbinden möchten, und auf „Weiter“ klicken.

Connecting to an Instagram account

Aktivieren Sie anschließend das Kästchen neben der Facebook-Seite, die mit dem gewünschten Instagram-Konto verknüpft ist.

Anschließend müssen Sie auf die Schaltfläche „Weiter“ klicken.

Connecting a Facebook page to WordPress

Sie sehen nun ein Popup-Fenster mit allen Informationen, auf die Instagram Feed Pro Zugriff hat, und den Aktionen, die es durchführen kann.

Um den Zugriff des Plugins auf Ihr Instagram-Konto zu beschränken, klicken Sie einfach auf einen der Schalter, um ihn von „Ja“ auf „Nein“ zu stellen. Beachten Sie jedoch, dass sich dies auf die Fotos auswirken kann, die auf Ihrem WordPress-Blog oder Ihrer Website erscheinen.

Aus diesem Grund empfehlen wir, alle Schalter aktiviert zu lassen. Wenn Sie mit der Einrichtung des Feeds zufrieden sind, klicken Sie auf „Fertig“.

Giving Smash Balloon access to your Instagram account

Sie sehen nun ein Popup mit dem Instagram-Konto, das Sie gerade zu Ihrer Website hinzugefügt haben.

Markieren Sie einfach das Kästchen neben dem Konto und klicken Sie dann auf „Hinzufügen“.

How to connect Instagram to WordPress using Smash Balloon

Instagram Feed Pro bringt Sie nun zurück zum Bildschirm Instagram Feeds “ Alle Feeds.

Um einen benutzerdefinierten Instagram-Feed zu erstellen, aktivieren Sie einfach das Kästchen neben dem Instagram-Konto, das Sie verwenden möchten. Klicken Sie dann auf „Weiter“.

Creating a new Instagram feed in WordPress

Das Plugin erstellt nun einen Instagram-Foto-Feed, den Sie zu jeder Seite, jedem Beitrag oder einem Widget-bereiten Bereich hinzufügen können.

So passen Sie Ihren Instagram-Foto-Feed an

Standardmäßig öffnet Smash Balloon Ihren Feed in seinem Editor, damit Sie ihn anpassen können.

Auf der rechten Seite sehen Sie eine Vorschau Ihres Instagram-Fotofeeds. Auf der linken Seite finden Sie alle Einstellungen, die Sie verwenden können, um den Social Media Feed anzupassen.

How to create a custom Instagram feed with Smash Balloon

Die meisten dieser Einstellungen sind selbsterklärend, aber wir werden kurz auf einige wichtige Bereiche eingehen.

Um das Layout zu ändern, klicken Sie einfach im linken Menü auf „Feed Layout“. Sie können nun zwischen einem Raster-, Masonry- oder Karussell-Layout wählen.

Switching to a different Instagram layout

Es gibt auch ein hervorgehobenes Layout, das standardmäßig jedes dritte Foto hervorhebt.

Wenn Sie auf die verschiedenen Optionen klicken, wird die Live-Vorschau automatisch aktualisiert und zeigt das neue Layout an. So können Sie ganz einfach verschiedene Designs ausprobieren und Ihr Lieblingsdesign finden.

Standardmäßig zeigt Smash Balloon auf Desktop-Computern und mobilen Geräten die gleiche Anzahl von Fotos an. Sie können eine Vorschau anzeigen, wie der Instagram-Feed auf Desktop-Computern, Tablets und Smartphones aussehen wird, indem Sie die Reihe von Schaltflächen in der oberen rechten Ecke verwenden.

Previewing an Instagram feed on desktop, mobile, and tablet

Smartphones und Tablets haben in der Regel kleinere Bildschirme und eine geringere Verarbeitungsleistung, so dass Sie auf mobilen Geräten weniger Instagram-Fotos und -Videos zeigen sollten.

Geben Sie dazu einfach eine andere Zahl in das Feld „Mobil“ unter „Anzahl der Beiträge“ ein.

How to show a different number of Instagram posts on mobile

Standardmäßig teilt Smash Ballon Ihre Fotos auf dem Desktop in 4 Spalten, auf Tablet-Geräten in 2 Spalten und auf mobilen Geräten in eine einzige Spalte.

Möchten Sie eine andere Anzahl von Spalten verwenden? Dann blättern Sie einfach zum Abschnitt „Spalten“ im linken Menü.

Sie können nun eine neue Nummer in die Felder Desktop, Tablet oder Mobile eingeben.

Showing a different number of columns in a custom Instagram feed

Um sicherzustellen, dass Ihr Instagram-Feed auf mobilen Geräten gut aussieht, sollten Sie sich die mobile Version Ihrer WordPress-Website ansehen.

Nachdem Sie Ihre Änderungen vorgenommen haben, klicken Sie auf den Link „Anpassen“. Dadurch gelangen Sie zurück zum Haupteditor von Smash Balloon und können den nächsten Einstellungsbildschirm erkunden, nämlich „Farbschema“.

Changing the Instagram feed color scheme

Standardmäßig verwendet Smash Balloon ein Farbschema, das von Ihrem WordPress-Theme übernommen wurde, aber es gibt auch die Themen „Hell“ und „Dunkel“, die Sie für Ihren Instagram-Feed verwenden können.

Sie können sogar Ihr eigenes Farbschema erstellen, indem Sie „Benutzerdefiniert“ auswählen und dann die Einstellungen verwenden, um die Linkfarbe, die Hintergrundfarbe, die Textfarbe in WordPress und mehr zu ändern.

Changing the Instagram color scheme

Standardmäßig fügt Smash Balloon dem Instagram-Feed eine Kopfzeile hinzu, die aus Ihrem Profilbild und dem Namen Ihrer Seite besteht. Dies kann einen nützlichen zusätzlichen Kontext liefern, damit die Besucher verstehen, woher diese Bilder stammen.

Um das Aussehen dieses Abschnitts zu ändern, kehren Sie zum Haupteinstellungsbildschirm zurück und wählen Sie dann „Kopfzeile“.

Adding a header to a custom Instagram photo feed

Auf diesem Bildschirm können Sie die Hintergrundfarbe ändern, Ihre Instagram-Bio anzeigen, die Größe der Kopfzeile ändern und vieles mehr.

Standardmäßig enthält die Kopfzeile Ihr Instagram-Profilbild. Sie können jedoch auch ein anderes Bild anzeigen, z. B. das benutzerdefinierte Logo Ihrer Website.

Um das Profilbild zu ändern, klicken Sie auf „Bild hinzufügen“ unter „Benutzerdefinierten Avatar anzeigen“. Sie können dann entweder ein Bild aus der WordPress-Mediathek auswählen oder ein neues Foto hochladen.

Adding a custom Instagram avatar to your WordPress website

Sie können auch eine andere Bio hinzufügen. Sie könnten zum Beispiel einen Aufruf zum Handeln hinzufügen, der die Leute dazu ermutigt, Ihre Instagram-Seite zu besuchen.

Um eine einzigartige Instagram-Bio zu erstellen, geben Sie einfach in das Feld „Benutzerdefinierte Bio hinzufügen“ ein.

Adding a custom Instagram bio to your WordPress website

Wenn Sie mit dem Aussehen der Kopfzeile zufrieden sind, klicken Sie auf den Link „Anpassen“, um zum Hauptbildschirm der Einstellungen zurückzukehren.

Jetzt müssen Sie auf „Beiträge“ klicken.

Creating a custom Instagram photo feed in WordPress

Zunächst können Sie für die einzelnen Beiträge innerhalb des Instagram-Feeds zwischen Boxed- und Regular-Layout wechseln.

Wählen Sie dazu „Beitragsstil“.

Customizing an embedded Instagram photo feed

Sie können nun durch Anklicken das gewünschte Layout auswählen.

Wenn Sie „Rahmen“ wählen, können Sie die Hintergrundfarbe ändern, einen Rahmenschatten hinzufügen und den Radius des Rahmens vergrößern, um geschwungene Ecken zu erzeugen.

Adding a box style to an embedded social media feed

Wenn Sie mit Ihren Änderungen zufrieden sind, klicken Sie einfach auf den Link „Beiträge“, um zum vorherigen Bildschirm „Smash Balloon“ zurückzukehren.

Wählen Sie dieses Mal „Bilder und Videos“.

Changing the resolution of an embedded Instagram feed

Smash Balloon analysiert automatisch Ihre Instagram-Fotos und zeigt sie in der besten Auflösung an. Wir empfehlen, diese Standardeinstellungen zu verwenden, da sie die Geschwindigkeit und Leistung von WordPress verbessern. Sie können die Instagram-Bilder jedoch größer oder kleiner machen, wenn Sie es wünschen.

Um die Bildgröße zu ändern, öffnen Sie einfach das Dropdown-Menü „Auflösung“ und wählen Sie eine der Standard-WordPress-Bildgrößen aus der Liste.

Changing the resolution for an embedded Instagram feed

Klicken Sie erneut auf den Link „Beiträge“, um zum vorherigen Bildschirm zurückzukehren.

Wählen Sie dieses Mal „Bildunterschrift“. Auf dem nächsten Bildschirm können Sie die Instagram-Beschriftung neben jedem Bild anzeigen, indem Sie auf den Schieberegler „Aktivieren“ klicken.

Showing Instagram captions on your WordPress website

Daraufhin werden neue Anpassungsoptionen geöffnet, mit denen Sie die Textgröße und -farbe ändern und eine maximale Textlänge festlegen können.

Klicken Sie dann einfach auf den Link „Beiträge“, um zum vorherigen Bildschirm zurückzukehren.

Showing social media captions on a website or blog

Die nächste Einstellung ist „Zusammenfassung von Likes und Kommentaren“.

Hier können Sie die Gesamtzahl der Likes und Kommentare zu jedem Bild hinzufügen oder ausblenden. Wenn Ihre Instagram-Beiträge eine gute Beteiligung erhalten, können diese Zahlen Menschen dazu ermutigen, Ihre Instagram-Seite zu besuchen oder Ihnen in den sozialen Medien zu folgen.

Showing social media comments and likes on a website or blog

Wie immer müssen Sie auf „Beiträge“ klicken, um zum vorherigen Bildschirm zurückzukehren.

Die letzte Option ist „Hover-Status“, d. h. das Overlay, das Smash Balloon einem Beitrag hinzufügt, wenn Sie mit der Maus darüber fahren.

Customizing the hover state for an embedded social media photo feed

Hier können Sie die Informationen auswählen, die Smash Balloon anzeigt, wenn jemand den Mauszeiger über einen Beitrag bewegt, indem Sie die Einstellungen unter „anzuzeigende Informationen“ vornehmen.

Sie können auch die Farbe des Hover-Overlays ändern.

Adding a custom Instagram feed to WordPress

Wenn Sie mit den vorgenommenen Änderungen zufrieden sind, klicken Sie auf den Link „Anpassen“.

Dies bringt Sie zurück zur Hauptseite der Smash Balloon-Einstellungen, wo Sie auf die Registerkarte ‚Load More Button‘ klicken können.

Adding a load more button to a custom Instagram photo feed in WordPress

Hier können Sie die Schaltfläche „Mehr laden“ hervorheben, indem Sie die Hintergrundfarbe, die Textfarbe und den Schwebezustand ändern.

Sie können auch versuchen, der Schaltfläche Ihre eigene Nachricht hinzuzufügen, indem Sie sie in das Feld „Text“ eingeben.

Customizing the load more button on a custom Instagram photo feed

Wir empfehlen zwar, diese Schaltfläche aktiviert zu lassen, aber Sie können sie auch entfernen. Sie könnten zum Beispiel Menschen dazu ermutigen, Ihre Instagram-Seite zu besuchen, indem Sie die Anzahl der Fotos begrenzen, die sie auf Ihrer Seite sehen können.

Um die Schaltfläche zu entfernen, schalten Sie einfach den Schieberegler „Aktivieren“ aus, so dass er grau wird.

Removing the 'Load More' button on a custom Instagram photo feed

Wenn den Besuchern gefällt, was sie sehen, können sie sich über die Schaltfläche „Auf Instagram folgen“, die unter dem eingebetteten Feed erscheint, anmelden.

Da es sich um eine so wichtige Schaltfläche handelt, möchten Sie vielleicht ein individuelles Styling hinzufügen, damit sie besser zur Geltung kommt. Wählen Sie dazu „Anpassen“, um zum Haupteinstellungsbildschirm zurückzukehren. Wählen Sie dann im linken Menü die Option „Schaltfläche folgen“.

Hier können Sie die Hintergrundfarbe, den Schwebezustand und die Textfarbe der Schaltfläche ändern.

Customizing the Instagram follow button

Standardmäßig zeigt die Schaltfläche die Aufschrift „Auf Instagram folgen“.

Sie können diese durch Ihre eigene Nachricht ersetzen, indem Sie sie in das Feld „Text“ eingeben.

Adding your own messaging to an Instagram CTA button

Smash Balloon verfügt über eine integrierte Lightbox, mit der Besucher Ihre Instagram-Fotos und -Videos öffnen können, ohne Ihre Website zu verlassen.

Um diese Funktion zu konfigurieren, kehren Sie zum Hauptbildschirm für die Smash Balloon-Einstellungen zurück und klicken Sie dann auf „Leuchtkasten“.

The Smash Balloon lightbox feature

Hier können Sie einstellen, wie viele Kommentare Smash Balloon in der Lightbox anzeigen soll.

Wenn Sie die Leuchtkasten-Funktion nicht verwenden möchten, können Sie sie mit dem Schieberegler „Aktivieren“ deaktivieren.

Enabling the WordPress lightbox feature

Wenn Sie mit dem Aussehen Ihres Instagram-Feeds zufrieden sind, vergessen Sie nicht, auf „Speichern“ zu klicken, um Ihre Änderungen zu speichern.

Sie sind nun bereit, den Instagram-Feed zu Ihrer WordPress-Website hinzuzufügen.

Anzeigen eines Feeds mit Ihren Instagram-Fotos in WordPress

Sie können den benutzerdefinierten Instagram-Feed mithilfe eines Blocks, eines Widgets oder eines Shortcodes zu Ihrer Website hinzufügen.

Wenn Sie mehr als einen Feed mit Smash Balloon erstellt haben, müssen Sie den Code des Feeds kennen, um ein Widget oder einen Block zu verwenden.

Um diesen Code zu erhalten, müssen Sie auf Instagram Feed “ Alle Feeds gehen und dann den Text unter „Shortcode“ kopieren.

Im folgenden Bild müssen wir instagram-feed feed=4 verwenden.

Getting a shortcode for your custom Instagram feed

Wenn Sie den Instagram-Feed in eine Seite oder einen Beitrag einbetten möchten, können Sie den Instagram-Feed-Block verwenden.

Öffnen Sie einfach die Seite oder den Beitrag, in den Sie Ihren benutzerdefinierten Instagram-Feed einbetten möchten. Klicken Sie dann auf das „+“-Symbol, um einen neuen Block hinzuzufügen, und beginnen Sie mit der Eingabe von „Instagram Feed“.

Wenn der richtige Block erscheint, klicken Sie darauf, um ihn der Seite oder dem Beitrag hinzuzufügen.

Adding the Feeds for Instagram block to your WordPress website

Der Block zeigt standardmäßig einen Ihrer Instagram-Feeds an. Wenn Sie einen anderen Smash Balloon-Feed anzeigen möchten, finden Sie „Shortcode-Einstellungen“ im Menü auf der rechten Seite.

Fügen Sie hier einfach den Shortcode hinzu und klicken Sie dann auf „Änderungen übernehmen“.

Adding a social media feed to WordPress using shortcode

Wenn Sie mit dem Aussehen des benutzerdefinierten Instagram-Feeds zufrieden sind, können Sie die Seite veröffentlichen oder aktualisieren.

Eine weitere Option ist das Hinzufügen des Instagram-Feed-Widgets zu Ihrer Website. Dies ist eine großartige Möglichkeit, einen Instagram-Feed auf jeder Seite Ihrer Website anzuzeigen. Sie können das Instagram-Widget zum Beispiel in die Seitenleiste oder die Fußzeile des WordPress-Themes einfügen.

Um das Instagram-Feed-Widget zu Ihrer Website hinzuzufügen, gehen Sie zu Darstellung “ Widgets. Klicken Sie dann auf das blaue „+“-Symbol oben auf dem Bildschirm.

Adding an Instagram feed to a widget-ready area

Geben Sie in dem daraufhin angezeigten Feld „Instagram Feed“ ein, um das richtige Widget zu finden.

Wie Sie auf dem folgenden Bild sehen können, gibt es zwei Instagram-Feed-Widgets, also stellen Sie sicher, dass Sie das richtige verwenden.

Adding the Instagram feed widget to a WordPress sidebar

Als Nächstes ziehen Sie das Widget einfach auf den Bereich, in dem Sie den Instagram-Feed anzeigen möchten, z. B. in die Seitenleiste oder einen ähnlichen Bereich.

Das Widget zeigt automatisch einen der Feeds an, die Sie mit Smash Balloon erstellt haben. Wenn dies nicht der benutzerdefinierte Instagram-Feed ist, den Sie gerade erstellt haben, geben Sie den Code des Feeds in das Feld „Shortcode-Einstellungen“ ein.

Klicken Sie anschließend auf „Änderungen übernehmen“.

Sie können das Widget nun aktivieren, indem Sie auf die Schaltfläche „Aktualisieren“ klicken. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung für das Hinzufügen und Verwenden von Widgets in WordPress.

An example of an embedded Instagram feed

Eine weitere Möglichkeit ist das Einbetten des Instagram-Feeds auf einer beliebigen Seite, einem Beitrag oder einem Widget-bereiten Bereich mithilfe eines Shortcodes.

Gehen Sie einfach auf Instagram Feed “ Alle Feeds und kopieren Sie den Code in der Spalte „Shortcode“. Sie können diesen Code nun zu jedem Shortcode-Block hinzufügen. Hilfe beim Platzieren des Shortcodes finden Sie in unserer Anleitung zum Hinzufügen eines Shortcodes.

Verwenden Sie ein blockfähiges Theme? Dann können Sie den vollständigen Site-Editor verwenden, um den Instagram-Feed-Block überall auf Ihrer WordPress-Website hinzuzufügen.

Gehen Sie im Dashboard auf Erscheinungsbild “ Editor.

How to add an Instagram feed to WordPress using the full-site editor

Standardmäßig wird im Full-Site-Editor die Home-Vorlage des Themas angezeigt.

Wenn Sie den Instagram-Feed zu einem anderen Bereich hinzufügen möchten, klicken Sie entweder auf „Vorlage“ oder „Vorlagenteile“.

Adding an Instagram feed to a WordPress template

Der Editor zeigt nun eine Liste aller Vorlagenteile an, aus denen Ihr WordPress-Theme besteht.

Klicken Sie einfach auf die Vorlage, in der Sie den Instagram-Feed anzeigen möchten.

A list of templates, in the WordPress full-site editor (FSE)

WordPress zeigt nun eine Vorschau des Designs an.

Um diese Vorlage zu bearbeiten, klicken Sie auf das kleine Bleistiftsymbol.

Editing the WordPress homepage template using the full-site editor

Nachdem Sie eine Vorlage ausgewählt haben, fahren Sie mit der Maus über den Bereich, in dem Sie den Instagram-Foto-Feed hinzufügen möchten.

Klicken Sie dann auf die blaue Schaltfläche „+“.

How to add a block to a template using full-site editor (FSE)

Sobald Sie das getan haben, müssen Sie „Instagram Feed“ eingeben.

Wenn der richtige Block erscheint, klicken Sie darauf, um ihn der Vorlage hinzuzufügen.

Adding a Instagram feeds block using the full-site editor (FSE)

Wie immer wird Smash Balloon standardmäßig einen Feed anzeigen. Sie können diesen Feed ändern, indem Sie einen Shortcode nach dem oben beschriebenen Verfahren hinzufügen.

Bonus: Lassen Sie Kunden Ihre Produkte über Instagram kaufen

Wenn Sie einen Online-Shop haben, können Sie Ihren benutzerdefinierten Instagram-Feed auch nutzen, um Ihre Produkte einfach zu verkaufen.

Smash Balloon Instagram Feed Pro ermöglicht es Ihnen, Ihre Instagram-Bilder mit Produktlinks zu versehen, damit die Nutzer darauf klicken und sie direkt kaufen können, anstatt durch Ihre Produktseiten zu navigieren. Dies kann den Umsatz und den Gewinn in Ihrem Geschäft steigern.

How to add a shoppable link to an Instagram post

Weitere Einzelheiten finden Sie in unserer vollständigen Anleitung zum Hinzufügen von Instagram-Shoppable-Bildern in WordPress.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man einen benutzerdefinierten Instagram-Feed in WordPress erstellt. Vielleicht interessieren Sie sich auch für unseren Vergleich der besten WordPress-Giveaway-Plugins, um Ihre soziale Fangemeinde zu vergrößern, und lernen Sie , wie Sie einen E-Mail-Newsletter mit unserer Anleitung für Anfänger erstellen.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.

Offenlegung: Unsere Inhalte werden von unseren Lesern unterstützt. Das bedeutet, dass wir möglicherweise eine Provision verdienen, wenn Sie auf einige unserer Links klicken. Mehr dazu erfahren Sie unter Wie WPBeginner finanziert wird , warum das wichtig ist und wie Sie uns unterstützen können. Hier finden Sie unseren redaktionellen Prozess .

Das ultimative WordPress Toolkit

Erhalte KOSTENLOSEN Zugang zu unserem Toolkit - eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Reader Interactions

18 KommentareEine Antwort hinterlassen

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    I have my website as a tech blog, but it also serves as my portfolio. I have my resume, certificates, and much more there. So, on one hand, I write technical guides for people, and on the other hand, I present myself. Additionally, there’s a personal section with a different header and footer where I share my personal opinions outside the tech blog—topics like politics, life, and such. That’s why I’ve implemented an Instagram feed using Smash Balloon there. I think it’s a great combination of professional and personal life, and a potential business partner can get to know you from both angles, making it easier for them to approach you. They’ll see your interests and values beyond work.

    Regarding the display of the feed, as I mentioned, I use the Smash Balloon plugin, which is excellent. Occasionally, my only concern is that it disconnects from the feed every few months, requiring manual reconnection. Otherwise, it’s a fantastic plugin for social media feeds.

  3. Ralph says

    I used to have Instagram feed on my website in the footer to make my account more popular but as a technical blogger this was bad move. I’m using social media to bring awareness to my website where I earn money. Sending people off my website to social media was a mistake even if it looks good on the website itself.
    If this is your goal, then go for it, it is great and this method looks solid. But if your goal is to promote your website I would not recommend doing this. It’s all about what you want to achieve.

  4. Roy says

    FYI – Smash Balloon Instagram Feed Lite / Pro plugin the latest version 2022 does not have a customize section as seen / mentioned in this Post.

  5. Anitha says

    I am a new blogger who is not as tech savvy as I would love to be. This article was loaded with information that I can use. Thank you

  6. James Burke says

    I agree with your Plugin choice. I tried several Insta Feed plugins but they got messed up with Facebook / Instagram API changes. Smash Balloon’s worked perfectly. If only other plugins worked as well as these ;-)

  7. Darshan Singh says

    Thanks for such a detailed description of WP website Instagram use, I was searching such informative articles from many days, You describe it in very detailed manner.

Eine Antwort hinterlassen

Danke, dass du einen Kommentar hinterlassen möchtest. Bitte beachte, dass alle Kommentare nach unseren kommentarpolitik moderiert werden und deine E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwende KEINE Schlüsselwörter im Namensfeld. Lass uns ein persönliches und sinnvolles Gespräch führen.