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: '
alt-text
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.


Wie zeige ich meinen Instagram-Feed mit PHP auf der Website an?

Neben der Möglichkeit die Instagram Beiträge via Javascript in die Webseite einzubinden gibt es auch die Möglichkeit die Beiträge von Instagram via PHP in die Webseite einzubinden und genau das zeige ich euch im folgenden Abschnitt:

Auslesen der Instagram API

Erstellt zunächst einen Instagram Access Token und fügt ihn anschließend bei $access_token ein. Unter $photo_count könnt Ihr definieren wie viele Posts angezeigt werden sollen. Anschließend wird der $json_link erstellt

$access_token	=	'6516459246.aef0a9a.1c38cb1a62894b28862283355d45e7ca';
$photo_count	=	20;
			     
$json_link		=	'https://api.instagram.com/v1/users/self/media/recent/?';
$json_link		.=	'access_token=' . $access_token . '&count=' . $photo_count . '';

Daten via file_get_content auslesen

Nun holt Ihr euch die Daten via file_get_contents(). Da es sich beim Rückgabewert um ein json handelt müsst Ihr es noch mit json_decode() in ein array umwandeln.

$obj			=	file_get_contents($json_link);
$obj			=	json_decode($obj, true, 512, JSON_BIGINT_AS_STRING);

Instagram Daten mit php anzeigen

Nun habt Ihr die Instagram Posts via PHP ausgelesen und könnt Sie nun mittels der foreach() auslesen und in eure Webseite einbinden.

foreach ( $obj['data'] as $post ) {
	var_dump( $post );
}

oliver

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

  1. avatar silasSilas sagt:

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

    • avatar adminadmin 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

  2. avatar momixxMomixx sagt:

    Wie schaff ich es, per css oder so, alle Bilder (ich hab ein Limit von 4 eingestellt) in eine Reihe hintereinander zu bekommen, sodass sie einmal die ganze Breite des Bildschirmes einnehmen?

    • avatar adminadmin sagt:

      Hi Momixx,

      ich würde an deiner Stelle mit display: flex arbeiten. Ich habe mal kurz ein paar Zeilen css geschrieben. Dürften funktionieren, müssen aber noch angepasst werden. (ungetestet).

      .main {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-content: stretch;
      align:items: stretch;
      }
      .main .box {
      flex-basis: 0;
      flex-grow: 1;
      }
      .main .box+.box {
      margin-left: 24px;
      }

      Lg Oli

Hinterlasse ein Kommentar zum Beitrag "Instagram Beiträge in eigene Webseite einbinden & Instagram Access Token erstellen"

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

Letzte Aktualisierung am 24.06.2019 / Affiliate Links / Bilder von der Amazon Product Advertising API