formativ.net Internetagentur Frankfurt

 

Einbinden von Instagram in WordPress leicht gemacht

Veröffentlicht: 06.09.2017

Ihr möchtet Instagram auf eure Website integrieren, um Besuchern die neusten Schnappschüsse aus eurem Profil zu zeigen? Dank „WP Instagram Widget“ ist die Verknüpfung von Instagram und eurer WordPress-Installation ein Leichtes. Wir zeigen euch wie es geht.

Instagram mit WordPress verknüpfen

Um Instagram in WordPress einzubinden, benötigt Ihr zuerst ein zusätzliches Plugin names „WP Instagram Widget“. Um dieses Plugin zu installieren, meldet ihr euch zuerst im Backend-Bereich eurer WordPress-Installation unter wp-admin an. Anschließend wählt ihr links im Seitenmenü Plugins > Installieren und ladet euch „WP Instagram Widget“ herunter (siehe Bild unten).

Instagram Plugin für WordPress hinzufügen

Wichtig: Vergesst nach der Installation nicht, das Plugin zu aktivieren!

Instagram Plugin aktivieren

Nach der Aktivierung des Plugins könnt ihr das Widget nutzen.

Um das Widget in der Seitenleiste, dem Fußzeilenbereich (Footer) oder an einer eigenen Position (je nach Theme) zu platzieren, wechselt ihr über Design > Widgets in den Widgets-Bereich.

Instagram Widget nutzen

Ihr solltet nun eine ähnliche Darstellung auf eurem Bildschirm sehen, wie im oberen Bild.

Die rote Umrahmung zeigt euch, wie ihr in den Widgets-Bereich gelangt. 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, zieht ihr den Kasten „Instagram“ an die gewünschte Stelle.

Wie ihr in dem Bild oben sehen könnt, 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 ihr i.d.R. benötigt.

Einstellungen Instagram WP-Plugin

Das Eingabefeld „Title“ erzeugt eine Überschrift, die über den gezeigten Bildern angezeigt wird. Dabei handelt es sich um eine H4-Überschift, falls ihr diese mit CSS anpassen möchtet.

Hinter dem Username (dt. Benutzername) versteckt sich der Profilname des gewünschten Instagram-Accounts, denn ihr einbinden möchtet.

Über „Number of Photos“ könnt ihr die Anzahl der gezeigten Bilder aus eurem Instagram-Profil auf der Website bestimmen.

Mit Hilfe des Drop-Downs „Photo size“ könnt ihr die Darstellungsgröße eurer Bilder steuern. Euch stehen die folgenden Größen zur Auswahl:

  • Thumbnail
  • Small
  • Large
  • Original

Das Widget bindet eure Bilder aus Instagram nicht nur in die Website mit ein, sondern es setzt auch automatisch einen Bild-Link auf Instagram. Klickt ihr den Link an, gelangt ihr auf die Instagram Desktop-Version, wo ihr wie gewohnt euer Bild, den beschreibenden Text und die Kommentare eurer Follower sehen könnt.

Über „Open Links in“ könnt ihr 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 eure eigene Website weiterhin im Browser.

Zu guter Letzt könnt ihr an dieser Stelle noch einen kleinen verlinkten Text hinzufügen. Dieser verweist dann auf die Übersichtsseite eures Instagram-Profils.

Habt ihr alle Einstellungen wie gewünscht vorgenommen, vergesst 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öchtet ihr eure Instagram-Bilder in einer Zeile dargestellen, müsst ihr eine kleine Anpassung im CSS des Themes vornehmen.

Instagram Feed horizontal darstellen

CSS-Anpassung für ein-Zeilen-Darstellung

Für eine horizontale Anordnung der Instagram-Bilder in WordPress fügt ihr das folgende CSS zu eurem Theme hinzu.

.null-instagram-feed { 
  width: 100%; 
}  

ul.instagram-pics li { 
  width: 25%; 
  float: left; 
}

Wenn ihr nicht wisst, wie ihr eigenes CSS in eurer WordPress-Installation einfügt, findet ihr bei den Kollegen von elmastudio.de einen ausführlichen Beitrag zu diesem Thema.

Veröffentlicht in:Allgemein, Webdesign und Internetseiten erstellen, Wordpress CMS | Keine Kommentare

Kommentieren Sie

Spamschutz - bitte kurz noch ausrechnen: *

FacebookTwitterYoutubeRSS-Feed