Jens Brauer

Blog

Instagram Fotos per PHP oder jQuery einbinden

Coding code foto instagram jquery php

Im Netz finden sich viele Code-Beispiele um seine Instagram Fotos per PHP oder jQuery auf der eigenen Webseite darzustellen. Meist bieten die Tools aber weitaus mehr wie z.B. Fotos mit einem bestimmten Tag oder Fotos anderer User darzustellen usw. Im Grunde also unnötiger Quellcode.
Um nur die letzten Fotos des eigenen Accounts darzustellen kommt man mit sehr wenig Code aus.

Vorbereitung: Access Token

Als erstes braucht man jedoch einen ACCESS TOKEN. Dazu geht man auf http://instagram.com/developer/ und erstellt sich eine neue Applikation, z.B. so:
instagram-application
Nun muss man sich per OAuth authentifizieren. Die genaue Vorgehensweise findet sich auf http://instagram.com/developer/authentication/. Da wir nur den Acces Token brauchen reicht die "Client-Side (Implicit) Authentication".
Dazu erstellt man sich im Verzeichnis /instagram z.B. 2 Dateien auth.html und index.html. In auth.html sollte ein Link stehen mit der Adresse:
https://instagram.com/oauth/authorize/?client_id=CLIENT-ID&redirect;_uri=REDIRECT-URI&response;_type=token
Dabei ist CLIENT-ID und REDIRECT-URI jeweils mit den obigen Angaben zu ersetzen. Klickt man auf den Link wird man zu Instagram umgeleitet, muss sich dort einloggen und den Zugriff bestätigen. Anschließend wird man wieder auf die REDIRECT-URI zurückgeleitet. Der Access Code steht jetzt in der URL Zeile. Am besten gleich notieren ;)

Nun gibt es zwei Möglichkeiten die Fotos einzubinden:

1.Möglichkeit: jQuery

Hierzu fügt man

<div class="instagram"></div>

an der Stelle ein, wo die Bilder erscheinen sollen. Die dazugeörige Javascript Datei enthält folgenden Code:

$(document).ready(function(){
var requesturl="https://api.instagram.com/v1/users/USER-ID/media/recent?access_token=TOKEN";
settings = {count: null}; //anzahl festlegen
var el=$('.instagram');

function createPhotoElement(photo) {
      return $('<li>').addClass('instagram-placeholder').addClass('span2').attr('id', photo.id).append($('<a>').attr('href', photo.link).addClass('thumbnail').attr('target', '_blank').append($('<img>').addClass('instagram-image').attr('src', photo.images.thumbnail.url)));
}

$.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: requesturl,
      success: function(res) {
        var length = typeof res.data != 'undefined' ? res.data.length : 0;
        var limit = settings.count != null && settings.count < length ? settings.count : length;
        if(limit > 0) {
          el.append($('<ul></ul>').addClass('thumbnails'));
          for(var i = 0; i < limit; i++) {
            $('.instagram ul').append(createPhotoElement(res.data[i]));
          }
        }
        else {
          return $('<div>').addClass('error').append($('<p>').html('Keine Fotos gefunden!'));
        }
      }
    });
});

,dabei muss TOKEN und USER-ID natürlich mit dem Access Token und der User-Id ersetzt werden. Die User ID kann man z.B. über diesen Link ermitteln: Klick.
Code auf GitHub betrachten

2.Möglichkeit: PHP

Auch mit PHP ist es sehr leicht möglich mit Hilfe von cURL die JSON Datei von https://api.instagram.com/v1/users/USER-ID/media/recent?access_token=TOKEN auszulesen und die Fotos darzustellen:

<?php
$url="https://api.instagram.com/v1/users/USER-ID/media/recent?access_token=TOKEN";

// Get cURL resource
$curl = curl_init();
// Options
curl_setopt_array($curl, array(
  CURLOPT_RETURNTRANSFER => 1,
  CURLOPT_URL => $url,
  CURLOPT_TIMEOUT => 4
 ));
// Send the request & save response to $resp
$resp = curl_exec($curl);
curl_close($curl);

if($resp){
    $data=json_decode($resp, true);
    foreach($data['data'] as $images){
      echo '<a href="'.$images['link'].'"><img src="'.$images['images']['thumbnail']['url'].'"></img></a>';
    }
}
else echo "FEHLER";
?>

Code auf GitHub betrachten

Endresultat

Das Endresultat könnte mit ein paar weiteren CSS Regeln schließlich so aussehen:
instagramphotostream

Kommentare