Einbinden von Instagram in Wordpress leicht gemacht
Sie möchten Instagram auf Ihre Website integrieren, um Besuchern die neusten Schnappschüsse aus Ihrem Profil zu zeigen? Dank „WP Instagram Widget“ ist die Verknüpfung von Instagram und Ihrer Wordpress-Installation ein Leichtes. Wir zeigen Ihnen wie es geht.
Instagram mit Wordpress verknüpfen
Um Instagram in Wordpress einzubinden, benötigen Sie zuerst ein zusätzliches Plugin names „WP Instagram Widget“. Um dieses Plugin zu installieren, melden Sie sich zuerst im Backend-Bereich Ihrer Wordpress-Installation unter wp-admin an. Anschließend wählen Sie links im Seitenmenü Plugins > Installieren und laden sich „WP Instagram Widget“ herunter (siehe Bild unten).
Wichtig: Vergessen Sie nach der Installation nicht, das Plugin zu aktivieren!
Nach der Aktivierung des Plugins können Sie das Widget nutzen. Um das Widget in der Seitenleiste, dem Fußzeilenbereich (Footer) oder an einer eigenen Position (je nach Theme) zu platzieren, wechseln Sie über Design > Widgets in den Widgets-Bereich.
Sie sollten nun eine ähnliche Darstellung auf Ihrem Bildschirm sehen, wie im oberen Bild. Die rote Umrahmung zeigt Ihnen, wie Sie in den Widgets-Bereich gelangen. Der orange umrahmte Kasten auf der linken Hälfte der Seite, zeigt das „WP Instagram Widget“. Um dieses auf einer der vorgegebenen Positionen Seitenleiste, Fußzeilenbereich 1-4 oder einer eigenen Position zu positionieren, ziehen Sie den Kasten „Instagram“ an die gewünschte Stelle. Wie Sie in dem Bild oben sehen können, haben wir für das Widget eine eigene Position mit dem Namen „Instagram-Feed“ (pinke Umrahmung) angelegt. In dieser Position haben wir die Einstellungen des Widgets bereits geöffnet.
Einstellungen des Widgets
Die Einstellungsmöglichkeiten für das Wiget sind recht überschaubar. Sie beinhalten jedoch alle wichtigen Einstellungsmöglichkeiten die Sie i.d.R. benötigen.
Das Eingabefeld „Title“ erzeugt eine Überschrift, die über den gezeigten Bildern angezeigt wird. Dabei handelt es sich um eine H4-Überschift, falls Sie diese mit CSS anpassen möchten. Hinter dem Username (dt. Benutzername) versteckt sich der Profilname des gewünschten Instagram-Accounts, denn Sie einbinden möchten. Über „Number of Photos“ können Sie die Anzahl der gezeigten Bilder aus Ihrem Instagram-Profil auf der Website bestimmen. Mit Hilfe des Drop-Downs „Photo size“ können Sie die Darstellungsgröße Ihrer Bilder steuern. Ihnen stehen die folgenden Größen zur Auswahl:
- Thumbnail
- Small
- Large
- Original
Das Widget bindet Ihre Bilder aus Instagram nicht nur in die Website mit ein, sondern es setzt auch automatisch einen Bild-Link auf Instagram. Klicken Sie den Link an, gelangen Sie auf die Instagram Desktop-Version, wo Sie wie gewohnt Ihr Bild, den beschreibenden Text und die Kommentare Ihrer Follower sehen können. Über „Open Links in“ können Sie steuern, ob die verlinkte Seite im aktuellen Browser-Fenster geöffnet wird (hier die aktuelle Website) oder in einem neuen Tab. Bei Verlinkung zu externen Websites ist es meist sinnvoll, die verlinkte Seite in einem neuen Tab des Browsers öffnen zu lassen. So behält der Besucher Ihre eigene Website weiterhin im Browser. Zu guter Letzt können Sie an dieser Stelle noch einen kleinen verlinkten Text hinzufügen. Dieser verweist dann auf die Übersichtsseite Ihres Instagram-Profils. Haben Sie alle Einstellungen wie gewünscht vorgenommen, vergessen Sie nicht sie über den Button „Speichern“ zu sichern!
Ergebnis auf der Website
Die Anordnung der Bilder wird vom Widget leider standardmäßig untereinander ausgegeben. Grund für diese Positionierung ist wahrscheinlich, dass der Einsatz sich auf die Seitenleiste beschränken soll oder auf Websites zu denen diese Darstellung passt. Möchten Sie Ihre Instagram-Bilder in einer Zeile dargestellen, müssen Sie eine kleine Anpassung im CSS des Themes vornehmen.
CSS-Anpassung für ein-Zeilen-Darstellung
Für eine horizontale Anordnung der Instagram-Bilder in Wordpress fügen Sie das folgende CSS zu Ihrem Theme hinzu.
.null-instagram-feed {
width: 100%;
}
ul.instagram-pics li {
width: 25%;
float: left;
}
Wenn Sie nicht wissen, wie Sie eigenes CSS in Ihrer Wordpress-Installation einfügen, finden Sie bei den Kollegen von elmastudio.de einen ausführlichen Beitrag zu diesem Thema.