Instagram Beiträge in eigene Webseite einbinden & Instagram Access Token erstellen

  • HTML
  • JS
  • CSS
var userFeedLink = new Instafeed({
	get: 'user',
	userId: '6827182071',
	accessToken: '6827182071.86b0ed6.1508f93611f341ba980d3da778cecbd7',
	template: '
Comments: {{comments}}
', target: 'instafeed-link' }); userFeedLink.run();
div.instafeed {
	width: 100%;
	margin: 0 0 0 0;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 20px;
}
div.instafeed div.post {
	margin: 0 2.5% 10px 2.5%;
	position: relative;
	width: 20%;
}
div.instafeed div.post div.metas {
	width: 100%;
	display: inline-block;
}
div.instafeed div.post div.metas span {
	link-height: 20px;
	width: 100%;
	display: inline-block;
	font-size: 12px;
}			

In diesem Beitrag zeige ich, wie Ihr Eure letzten Instagram Beiträge auf die eigene Webseite postet.

1. Download der Instafeed.js

Als erstes müsst Ihr euch die Instafeed.js downloaden und diese anschließend in Eure Webseite einbinden.

2. Ausgabe der Instagram Feeds definieren

Nun muss ein Div mit der ID instafeed an die Stelle im Template kopiert werden, wo die Ausgabe der Instagram Bilder stattfinden soll.

Die ID kann verändert werden, indem Ihr den Parameter target: 'meineID' dem folgenden Javascript anfügt. Standardmäßig wird die ID instafeed gesucht.

3. Auslesen der eigenen letzten Instagram Beiträge

Den folgenden Code kopiert Ihr in Euren Footer:

var userFeed = new Instafeed({
	get: 'user',
	userId: '6827182071',
	accessToken: '6827182071.86b0ed6.1508f93611f341ba980d3da778cecbd7',
	template: ' ',
	limit: 20
});
userFeed.run();

Wer die Ausgabe des template modifizieren möchte, der findet hier eine Reihe von Shortcodes die er verwenden kann.

4. Die eigene Instagram ID herausfinden

Nun müsst Ihr Eure Instagram User-ID herausbekommen. In meinem Fall ist es die ID 6827182071

5. Instagram Access Token erstellen

Um einen Instagram Access Token zu erstellen müsst Ihr die folgenden Schritte ausführen

Schritt 1: Neuen Client erstellen

  1. Besucht die Instagram Developer Webseite
  2. Klickt auf Manage Clients und fügt einen neuen Client hinzu

      Details

    1. Application Name: Gib dem Client einen Namen um ihn später schneller finden zu können
    2. Description: Beschreibung des Clients
    3. Company Name: Optional
    4. Website URL: Die Url auf der der User später weitergeleitet werden soll
    5. Contact email: hinterlegte Kontakt-E-Mail Adresse bei eventuellen Problemen

      Security

    1. Disable implicit OAuth: Entfernt das Häkchen

So sollte Euer Neu erstellter Instagram Client aussehen.

instagram new client

Schritt 2: App/Client Autorisieren

Auf dem Weg zu den Instagram Post auf der eigenen Webseite muss der erstelle Client noch Autorisiert werden. Dazu kopiert Ihr den folgenden Code in einen neuen Tab und tauscht CLIENTID und REDIRECTURL mir Euren Daten ein.

https://instagram.com/oauth/authorize/?client_id=CLIENTID&redirect_uri=REDIRECTURL&response_type=token

In meinem Fall würde das so aussehen

https://instagram.com/oauth/authorize/?client_id=86b0ed6e42c240d6a944b8e3ece0a191&redirect_uri=https://www.revilodesign.de&response_type=token

Wenn Ihr Eure Daten richtig eingeben habt, dann solltet Ihr nachdem Ihr Enter gedrückt habt, folgende Grafik sehen.

authorize instagram app

Hinweis: Die rote Zeile mit dem Hinweis „This app is in sandbox mode and can only be authorized by sandbox users.“ könnt Ihr ignorieren, da Sie nur für App’s interessant sind. Um eigene Instagram Beiträge auf der eigenen Webseite anzeigen zu lassen reicht auch der Sandbox Mode.

Nun klickt Ihr auf Authorize und dann solltet Ihr in Eurem Browser eine ähnliche Url wie meine sehen:

https://www.revilodesign.de/#access_token=6827182071.86b0ed6.1508f93611f341ba980d3da778cecbd7

Alles hinter https://www.revilodesign.de/#access_token= ist Eurer Instagram Access Token. Diesen kopiert Ihr und fügt Ihn in Euren Javascript Code ein.

Nun sollten Eure letzten Instagram Beiträge auf eurer Webseite angezeigt werden.

oliver Ich heisse Oli und komme aus dem wuseligen Berlin. Meine Leidenschaft für Webseiten hält seit mehr 10 Jahren an. Dabei ist es egal ob ich kleinere oder größere Projekte umsetze - ich hänge mich in jedes Projekt mit voller Leidenschaft rein und versuche mich dabei immer wieder neu zu entdecken und neue Ideen umzusetzen.

Hinterlasse ein Kommentar

2 Antworten zu “Instagram Beiträge in eigene Webseite einbinden & Instagram Access Token erstellen”

  1. Silas sagt:

    Funktionier super! Mich würde dennoch mal interessieren, wie und ob man die Qualität der Bilder hochschrauben kann! 🙂

    • admin sagt:

      Hallo Silas,

      du kannst Dir 3 verschiedene Größen wiedergeben lassen:

      thumbnail (default) – 150×150
      low_resolution – 306×306
      standard_resolution – 612×612

      Einfach die folgende Zeile unter limit (Punkt 3) hinzufügen

      resolution: ’standard_resolution‘

      So bekommst du Bilder in einer höheren Qualität. Ich hoffe ich konnte helfen.

      Lg Oli

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.