Cheeeeze!

Teil 4: Verwendung des Instagram API in PHP
Kommentare

Die meisten der populären Fotos zeigen mittlerweile irgendwelche Teenager auf Parties oder kleine Hunde. In den meisten Ihrer Anwendungen werden diese Fotos nicht unbedingt die größte Relevanz für Ihre Nutzer haben. In Zeiten von Location-based Services interessieren sich diese immer häufiger dafür, welche Fotos in ihrer Nähe geschossen wurden.

Beim Upload eines Instragram-Fotos kann der Nutzer individuell entscheiden, ob das Foto mit Geotag-Informationen angereichert werden soll. Dabei wird die geografische Breite und Länge mit dem Foto gespeichert. Darüber kann der Ort, an dem das Foto gemacht wurde, bis auf den Meter genau ermittelt werden [13]. Mithilfe des Instagram-API und dieser Information können Sie nun nach Fotos in der Nähe eines beliebigen Orts auf der Welt suchen. Den URL, die Sie dazu verwenden müssen, hat den folgenden Aufbau:

https://api.instagram.com/v1/media/search?lat=52.5185&lng=13.3885&distance=5000&client_id=c...1770397dd9

Über die Parameter lat und lng geben Sie die geografische Breite und geografische Länge für den Ort an, über den Parameter distance geben Sie den Umkreis in Metern an. In diesem Beispiel wird nach Fotos in der Nähe der Friedrichstraße in Berlin gesucht.

Erweitern Sie nun die Instragram-Klasse um eine neue Methode searchMedia(), mit der Sie nach Fotos in der Nähe eines beliebigen Ortes suchen können:

public function searchMedia($lat, $lng, $dist = 1000) {
  $url = sprintf("https://api.instagram.com/v1/media/search?".
                 "lat=%s&lng=%s&distance=%s&client_id=%s",
                 $lat, $lng, $dist, $this->clientId);

  return $this->getUrl($url);
}

Die Methode implementieren Sie analog zur getPopularMedia()-Methode und greifen dabei auf die bereits zuvor implementierte Methode zurück, mit der Sie einen URL abrufen und das Ergebnis parsen. Bevor Sie diese neue Methode in Ihrer Anwendung einsetzen können, müssen Sie den Ort definieren, an dem Sie suchen möchten. Am einfachsten ist es, wenn Sie ihn via URL übergeben können. Sollte kein Ort übergeben werden, so setzen Sie die Adresse in Berlin als Default-Wert.

if (isset($_GET['lat'])) {
  $lng = $_GET['lng'];
  $lat = $_GET['lat'];	
} else {
  $lng = 13.3885;
  $lat = 52.5185;
}

Den aktuellen Ort Ihres Benutzers können Sie zum Beispiel via JavaScript über das Geolocation-API ermitteln und dann an Ihre Anwendung übergeben. Wie das funktioniert, haben Sie im ersten Teil der Geolocation-Serie [11] im PHP Magazin bereits lernen können. Wenn Sie die Position ermittelt haben, verwenden Sie die neue Methode. Zeichnen Sie diesen auf einer Google-Karte ein, in dem Sie das JavaScript-API von Google Maps verwenden (Listing 4).

Listing 4

var latlng = new google.maps.LatLng(, );
var options = {
  zoom: 13,
  center: latlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
 var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({
  position: latlng,
  map: map, 
  title:"Sie sind hier!"
});

Nun haben Sie die aktuelle Position des Nutzers ermittelt und eingezeichnet, es wird also Zeit, nach Fotos in der Nähe zu suchen und diese auch auf der Karte einzuzeichnen. Dazu verwenden Sie die neue Methode:

require_once "Instagram.v2.php";
require_once "config/instagram.php";
$instagram = new Instagram($config['clientId']);
$result = $instagram->searchMedia($lat, $lng, 5000);

Das Ergebnis dieser Methode ist strukturell gesehen nahezu identisch mit dem schon bekannten Rückgabewert. Sie erhalten ein Array mit Objekten, die die einzelnen Fotos repräsentieren. Iterieren Sie nun also einfach über dieses Array und verwenden Sie die Koordinaten des Fotos, um es auf der Google-Karte einzuzeichnen. Die geografische Breite und Länge finden Sie für jedes Foto unter $entry->location. Als Tooltip für die Marker auf der Karte verwenden Sie die Bildunterschrift, die Sie über $entry->caption-text adressieren können.

$cnt = 0;
foreach ($result as $entry) {
  printf("latlng = new google.maps.LatLng(%s,%s);n",
         $entry->location->latitude,
         $entry->location->longitude);
  printf("marker = new google.maps.Marker({
          position: latlng,
          map: map, 
          title:'%s',
          icon: 'img/instagram.png'
  });nn", addslashes($entry->caption->text));
  $cnt++;
}

Wenn Sie nun die Applikation im Browser aufrufen, werden Fotos in der Nähe ermittelt und, wie in Abbildung 4 zu sehen, auf einer interaktiven Karte eingezeichnet.

Abb. 4: Instagram-Fotos in der Nähe des Benutzers

Abb. 4: Instagram-Fotos in der Nähe des Benutzers

Allerdings sehen Sie für jedes Foto nur ein kleines Icon statt des eigentlichen Fotos. Selbst in der Thumbnail-Größe von 150 auf 150 Pixel wären die Fotos zu groß, um sie direkt auf der Karte einzuzeichnen, weshalb als Marker ein kleines Instagram-Icon verwendet wurde. Damit Ihre Nutzer die Fotos trotzdem sehen können, erstellen Sie für jedes Bild einen Modal-Dialog, mit dem das Foto bei Klick auf den entsprechenden Marker angezeigt wird. Der Modal-Dialog ist ein Bootstrap-Feature, mit dem Sie eine Lightbox einblenden können. Listing 5 zeigt Ihnen, wie Sie den HTML-Code für die einzelnen Modals erzeugen. Dazu iterieren Sie erneut über die Rückgabe und erstellen für jeden Modal ein Element. Mithilfe der $cnt-Variable vergeben Sie fortlaufende IDs für jeden Modal-Dialog. Neben dem Foto geben Sie im Modal-Dialog noch die Bildunterschrift und die Anzahl der Likes und Kommentare nach dem bewährten Schema aus.

Listing 5

$cnt = 0;
foreach ($result as $entry) {
  print '</pre>
<div id="image'.$cnt++.'" class="modal fade hide">'; print '
<div class="modal-header">'; print '<button class="close" type="button">×</button>'; printf('
<h3><img src="%s" alt="" width="36" height="36" /> %s</h3>
', $entry->user->profile_picture, $entry->user->full_name); print '</div>
'; print '
<div class="modal-body">'; printf('<img style="float: left; margin-right: 10px;" src="%s" alt="" width="306" height="306" />

', $entry->images->low_resolution->url); if (isset($entry->caption->text)) { printf('%s

', $entry->caption->text); } print ''; printf('%d <i class="icon-heart"></i>', $entry->likes->count); printf(' / %d <i class="icon-comment"></i>', $entry->comments->count); print '

'; print '</div>
'; print '
<div class="modal-footer">'; print '<a class="btn" href="#">Close</a>'; print '</div>
'; print '</div>
';
}

Zusätzlich verwenden Sie $entry->user->profile_picture und $entry->user->full_name, um Informationen zum Benutzer auszugeben, der das Foto auf Instagram hochgeladen hat. Um das Foto anzuzeigen, sobald der Benutzer auf das entsprechende Icon klickt, ergänzen Sie den Code, der die Markierungen auf der Karte setzt, und fügen jedem Marker einen Event Listener hinzu, der beim Klick-Event den Modal-Dialog mit der selben ID öffnet.

print "google.maps.event.addListener(marker, 'click', function() {n";
print "$('#image$cnt').modal();n";
print "});nn";

Mithilfe von Instagram, dem Google Maps API und Twitter Bootstrap haben Sie nun in 200 Zeilen Code eine Anwendung erstellt, die zwei APIs verknüpft und relevante Fotos für den Nutzer anzeigt. Abbildung 5 zeigt die Applikation mit einem geöffneten Modal-Dialog.

Abb. 5: Details zu einem Instagram-Foto

Abb. 5: Details zu einem Instagram-Foto

 

Weiter mit: Teil 5

Alle Teile: Teil 1, Teil 2, Teil 3, Teil 4, Teil 5

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -