Instagram Einbindung

Instagram ist ein perfektes Tool, um Fotos und Bildmaterial zu veröffentlichen. Mit nur wenigen Klicks können mit dem Smartphone aufgenommene Schnappschüsse veröffentlicht werden. Eine Einbindung der Instagram-Bilder vom eigenen Instagram-Profil in die eigene Firmen-Website wird also immer mehr genutzt.


Was ist die Voraussetzung?

Damit die Bilder vom eigenen Instagram-Account auf der eigenen Website eingebunden werden können, sind ein paar notwendige Programmierarbeiten zu erledigen und auch einige Berechtigungen für den Instagram-Zugriff abzuklären.


Grundvoraussetzung ist zunächst ein eigener Instagram-Account. Dieser kann von jeder natürlichen Person kostenlos angelegt werden (wird direkt am Smartphone mit der Instagram-App gemacht).
Damit Sie Bilder von Ihrem Instagram extern einbinden können, müssen Sie Ihrer Website erlauben, dass diese auf Ihren Instagram-Account zugreifen darf. Instagram löst dies mit einem sogenannten Access-Token. Es ist somit erforderlich, dass Sie für Ihren Instagram-Account einen eindeutigen Access-Token generieren lassen.


Wie kann man einen Access-Token generieren?

Die gute Nachricht: Einen Access-Token kann jeder problemlos erstellen. Wir erklären Ihnen hier Schritt für Schritt, wie Sie zu Ihrem Access-Token kommen.


Schritt 1:
Loggen Sie sich in Ihren Instagram Account ein. Gehen Sie dazu auf www.instagram.com und klicken Sie auf den Link „Melde dich an“.


Schritt 2:
Geben Sie Ihren Benutzernamen und Ihr Passwort ein und klicken Sie dann auf den Button „Anmelden“.


Schritt 3:
Nun sind Sie eingeloggt. Sie sehen Ihre Instgram-Profil-Seite. Geben Sie nun im Browser folgende URL ein: www.instagram.com/developer


Schritt 4:
Nun sind in der Developer-Seite von Instagram angemeldet. Klicken Sie nun oben rechts auf den Button „Manage Clients“.


Schritt 5:
Klicken Sie nun auf den Button „Register a New Client“.


Schritt 6:
Füllen Sie das Formular aus. Bitte ergänzen Sie hier Ihre persönlichen Eingaben. Im Feld „Valid redirect URL“ geben Sie bitte exakt diesen Wert ein: http://localhost. Bestätigen Sie dann das Captcha mit einem „Hackerl“ (unter Umständen müssen Sie dann eine Bildaufgaben lösen) und klicken Sie dann auf den Button „Register“.


ACHTUNG: Wenn Sie das Captcha („Ich bin kein Roboter“) vor dem Register-Button nicht sehen, so liegt dies derzeit an einer fehlerhaften Website-Konfiguration von Instagram. Damit das Captcha angezeigt wird, müssen Sie den Browser „Chrome“ verwenden und folgendes Plugin installieren:
Name des Plugins: Disable Content-Security-Policy
URL: https://chrome.google.com/webstore/detail/disable-content-security/ieelmcmcagommplceebfedjlakkhpden?hl=en-GB
Wenn Sie dieses Plugin auf der Registrierungs-Seite dann aktivieren (oben rechts im Browser), dann sollte das Captcha angezeigt werden.


Schritt 7:
Nun ist ein „Client“ für Sie angelegt und Sie sehen die eindeutige Client-ID. Bitte notieren Sie sich diese Client-ID.


Schritt 8:
Klicken Sie beim angelegten Client nun auf den Button „Manage“.


Schritt 9:
Entfernen Sie im Reiter „Security“ beim Eintrag „Disable implicit OAuth“ das Hackerl und klicken Sie auf den Button „Update Client“.


Schritt 10:
Geben Sie nun im Browser folgende URL ein:
https://instagram.com/oauth/authorize/?client_id=XXXXXXXXXX&scope=basic+public_content&redirect_uri=http://localhost&response_type=token
Bitte ersetzen Sie „xxxxxxxxxxxx“ durch die oben genannte Client-ID, also in unserem Fall müsste der URL-Aufruf wie folgt aussehen:
https://instagram.com/oauth/authorize/?client_id=8d368ed3db654c7dbc853208f632e490&scope=basic+public_content&redirect_uri=http://localhost&response_type=token


Schritt 11:
Nun müssen Sie noch bestätigen, dass Sie die Erstellung des Access-Tokes beauftragen möchten, indem Sie auf den Button „Authorize“ klicken.


Schritt 12:
Es öffnet sich eine Seite, wo angezeigt wird, dass die Website nicht erreichbar ist. Das ist völlig normal. Oben im Browser steht nun in der URL Ihr persönlicher Access-Token. Bitte notieren Sie sich diesen Token ebenfalls.


Schritt 13:
Nun haben sie alle notwendigen Keys, damit sie Instagram-Bilder auf Ihrer Website einbinden können. Es gibt zahlreiche Plugins, mit denen man die Einbindung machen kann. Wir verwenden dazu gerne das Plugin “jQuery Social Stream” (erhältlich hier: https://codecanyon.net/item/jquery-social-stream/2103997

Gerne können Sie uns den Clinet-ID und den Access-Token per Email zukommen lassen, wir kümmern uns dann um die Einbindung in Ihrer Website.