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:
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";
?>
Endresultat
Das Endresultat könnte mit ein paar weiteren CSS Regeln schließlich so aussehen:
Kommentare