So zeigen Sie Fotos von Instagram auf Ihrer Website an

Last Updated on 11/10/2021 by MTE Leben

Das interaktive Widget bietet eine einfache Möglichkeit, Ihre echten Instagram-Fotos in Echtzeit auf Ihrer WordPress-Site anzuzeigen. Wir sagen Ihnen, wie es geht.

Sie haben ein Instagram-Profil, das viele Informationen und Bilder enthält. Und Sie möchten, dass Ihre Website-Besucher dies sehen. Es ist ziemlich echt. In diesem Fall hilft Ihnen das Instagram-Plugin-Widget.

Es gibt zwei Möglichkeiten, Fotos anzuzeigen, die von diesem Widget unterstützt werden. Die erste Möglichkeit besteht darin, ein Foto mit einem bestimmten Tag anzuzeigen. Die zweite Möglichkeit besteht darin, die Option Meine Fotos auszuwählen, damit Sie das Foto aus Ihrem Konto herausziehen können.

Da die Anzeige von Fotos von anderen Konten durch die Instagram-Richtlinie eingeschränkt ist, erklären wir Ihnen, wie Sie die Erlaubnis zum Anzeigen von Bildern auf Instagram erhalten. Um auf Ihre Fotos zuzugreifen und zu bestätigen, dass Sie der Eigentümer Ihres Kontos sind und die Erlaubnis zur Verwendung von Fotos und im Allgemeinen allen Inhalten auf Ihrer Website zu bestätigen, müssen Sie zunächst ein Instagram-Zugriffstoken einrichten.

Was ist ein Instagram-Zugriffstoken und wie zeigt man Fotos von Instagram an?

Das Instagram-Zugriffstoken ist ein Satz von Zeichen, die für Ihr Konto einzigartig sind und es anderen Anwendungen ermöglichen, auf Ihren Instagram-Feed zuzugreifen. Ihre Website kann keine Verbindung zu Instagram-Servern herstellen, wenn Sie kein Token haben. Das Token bietet der Website eine sichere Möglichkeit, Instagram um die Erlaubnis zu bitten, auf Ihr Profil zuzugreifen und seine Bilder anzuzeigen.

Und wenn Sie einkaufbare Instagram-Galerien im Shopify Store präsentieren möchten, können Sie einfach die App von Growave installieren und Ihr geschäftliches Facebook-Konto verbinden.

Wie erhalte ich mein Instagram-Zugriffstoken?

Damit Sie erfolgreich Ihr Instagram Access Token erhalten, folgen Sie dieser Schritt-für-Schritt-Anleitung und Sie werden sicherlich lernen, wie Sie Fotos von Instagram einfach anzeigen können.

Schritt 1. Erstellen Sie ein Facebook App

Um dies zu tun, müssen Sie zu developer.facebook.com gehen, Meine Apps auswählen und eine App erstellen. Wählen Sie im Bereich des App-Dashboards Einstellungen > Basis aus, scrollen Sie zum Ende der Seite und klicken Sie auf Plattform hinzufügen.

Wählen Sie als Nächstes die Website aus, geben Sie die URL Ihrer Website ein und speichern Sie die Änderungen. Hier werden wir die Website verwenden, aber später können Sie die Plattform ändern.

Schritt 2. Richten Sie eine grundlegende Instagram-Ansicht ein

Klicken Sie also auf Produkte, suchen Sie das Instagram-Produkt und klicken Sie auf das Hinzufügen.

Klicken Sie auf Basisanzeige, scrollen Sie zum Ende der Seite und klicken Sie dann auf Neue App erstellen.

Füllen Sie das Formular wie unten beschrieben aus.

Anzeigename

Geben Sie den Namen der gerade erstellten Facebook-App ein.

Gültige URIs für die OAuth-Umleitung

Geben Sie die URL Ihrer Website ein. Dieses Feld ist für einen speziellen URI vorgesehen, der Umleitungsparameter registriert, aber in diesem Beispiel verwenden wir der Einfachheit halber die URL Ihrer Website.

Zum Beispiel https://zemez.io/

Speichern Sie nach Eingabe der URL die Änderungen und überprüfen Sie sie erneut. Je nach Struktur wird der URL möglicherweise automatisch ein Schrägstrich hinzugefügt. Behalten Sie die vollständige URL bei: Sie benötigen sie, um Autorisierungscodes und Zugriffstoken zu erhalten.

Deautorisieren Callback URL

Geben Sie die URL Ihrer Website erneut ein. Dann müssen Sie es durch eine URL ersetzen, um Deautorisierungsbenachrichtigungen zu verarbeiten.

Rückruf-URL der Anfrage zur Datenlöschung

Geben Sie die URL Ihrer Website erneut ein. Andererseits müssen Sie sie durch die entsprechende URL ersetzen, um Anfragen zum Entfernen von Daten zu bearbeiten.

App-Überprüfung

Beim Überspringen brauchen wir es noch nicht.

Schritt 3. Instagram-Testbenutzer hinzufügen

Wählen Sie Rollen > Rollen und scrollen Sie zum Abschnitt Instagram-Tester. Klicken Sie auf Instagram-Tester hinzufügen, geben Sie Ihren Instagram-Benutzernamen ein und senden Sie eine Einladung.

Öffnen Sie ein neues Browserfenster, gehen Sie zu www.instagram.com und melden Sie sich bei Ihrem eingeladenen Instagram-Konto an. Wählen Sie (Profilsymbol) > Profil bearbeiten > Anwendungen und Sites > Tester lädt ein und nimmt die Einladung an.

Jetzt hat Ihre Facebook-Anwendung auch im Entwicklungsmodus Zugriff auf Ihr Instagram-Konto.

Schritt 4. Melden Sie sich beim Testbenutzer an, um Fotos von Instagram schnell anzuzeigen

Erstellen Sie die URL des Autorisierungsfensters unten und ersetzen Sie {app-id} durch die ID Ihrer Instagram-App (aus dem Feld App Dashboard > Produkte > Instagram > Basic Display > Instagram App ID) und {redirect-uri} durch Ihre Website-URL, die Sie in . angegeben haben Schritt 2 („Gültige OAuth-Umleitungs-URIs“). Die URL muss genau gleich sein.

Öffnen Sie ein neues Browserfenster und rufen Sie die resultierende Autorisierungsfenster-URL auf. Die Seite sollte den Instagram-Benutzernamen, den Namen der Anwendung und eine Beschreibung der angeforderten Berechtigungen anzeigen.

Autorisieren Sie den Instagram-Testbenutzer (dh geben Sie der Anwendung Zugriff auf Ihre Profildaten). Melden Sie sich dazu im Autorisierungsfenster bei Ihrem Konto an und klicken Sie auf Autorisieren. Im Erfolgsfall leitet Sie die Seite an den im vorherigen Schritt angegebenen URI weiter und fügt einen Autorisierungscode hinzu.

Bitte beachten: Am Ende der Weiterleitungs-URI stehen die Zeichen #_, die jedoch nicht im Code enthalten sind. Kopieren Sie diesen Code (ohne die Zeichen #_ Teil): Sie benötigen ihn im nächsten Schritt.

Schritt 5. Tauschen Sie den Code gegen einen Token

Öffnen Sie ein Befehlszeilentool oder eine Anwendung, die cURL-Anfragen unterstützt, und senden Sie der API eine POST-Anfrage wie diese:

curl -X POST \ https://api.instagram.com/oauth/access_token \ -F client_id={app-id} \ -F client_secret={app-secret} \ -F grant_type=authorization_code \ -F redirect_uri={ umleitung-uri} \ -F code={code}

Ersetzen Sie die {app-id}-ID Ihrer Instagram-Anwendung anstelle von {app-secret} – dem Geheimnis der Instagram-Anwendung, anstelle von {redirect-uri} – der Weiterleitungs-URI und dem von uns erhaltenen Code anstelle von {code }. Bitte beachten: Die Weiterleitungs-URI muss genau mit der im vorherigen Schritt angegebenen übereinstimmen, bis zum Schrägstrich am Ende (das Anwendungspanel könnte sie beim Einrichten der Instagram-Anwendung automatisch zur URI hinzufügen).

Bei Erfolg gibt die API ein JSON-codiertes Objekt mit einem kurzfristigen Instagram-Benutzerzugriffstoken, das eine Stunde lang gültig ist, und Ihrer Instagram-Testbenutzer-ID zurück.

Schritt 6. Fordern Sie den Benutzerknoten an um Fotos von Instagram anzuzeigen

Senden Sie die cURL-Anforderung über eine Befehlszeile oder Anwendung an den unten gezeigten Benutzerknoten, um den Benutzernamen und die ID abzurufen. Ersetzen Sie {user-id} und {access-token} durch die im vorherigen Schritt erhaltene ID bzw. das Zugriffstoken.

curl -X GET \ 'https://graph.instagram.com/{user-id}?fields=id, username&access_token={access-token}'

Bei Erfolg zeigt die API den Instagram-Benutzernamen und die ID an.

Schritt 7. Fügen Sie das Zugriffstoken zur Plugin-Einstellung hinzu

Navigieren Sie zu WordPress-Dashboard> JetPlugins> JetElements-Einstellungen. Gehen Sie zur Registerkarte Integrationen, suchen Sie den Abschnitt Instagram, fügen Sie Ihr Token in das Feld Access Token ein und klicken Sie dann auf die Schaltfläche Speichern.

Fertig! Jetzt können Sie zu Elementor zurückkehren und das Instagram-Widget verwenden, um Fotos von Ihrem Konto anzuzeigen. Um mehr Funktionalität auf Ihre Website zu bringen, probieren Sie auch das ZeGuten-Plugin aus.