Instagram hashtag feed

**meuh** · 18 april 2012, 23:03

Bestaat een manier om alle foto's met een bepaalde hashtag in je website te laden ? Ik weet wel dat Instagram een API heeft, maar eerlijk gezegd raak ik daar helemaal in verloren :/

Ik heb al verschillende websites gevonden, die een feed geven, maar er is telkens een limiet het aantal zichtbare foto's. Of je kan enkel feed binnenhalen van jouw profiel, maar dit is niet de bedoeling.
Dit is hetgeen ik nodig heb:
mattwilcox.info/2011/02/instagram-parser/

Maar hier kan je maximum de laatste 20 foto's inladen.

Ik ben zojuist deze url tegengekomen:
instagr.am/tags/[hashtag]/feed/recent.rss

Hier kan ik wel snel een php script schrijven die deze rss feed op mijn website toont, maar deze rss feed toont telkens de laatste 18 submissions.

**Zero Grav** · 18 april 2012, 23:25

Dus, de API: Instagram

Ge zijt op zoek naar afbeeldingen per tag, dus dat is de "GET /tags/{tag-name}/media/recent" method. Dan krijgt ge inderdaad enkel de meest recente terug. Maar dat is omdat dat veel logischer is dan direct alle resultaten terug te geven (imagine the amount) terwijl de meeste mensen dat niet eens nodig hebben.

Maar steek dat eens in hun console en dan zult ge zien dat bij elke request die ge daarmee doet een object "pagination" wordt meegestuurd, met daarin onder andere de "next_url", de volgende x aantal resultaten dus.

**meuh** · 18 april 2012, 23:56

Ik ga zelf een "unieke" hashtag op de website gebruiken zodat er geen onnodige foto's in de stream komen.

**meuh** · 19 april 2012, 00:30

Zo'n script heb ik exact nodig:
Hashgram

**W0utR** · 19 april 2012, 04:32

En dat script gebruikt ook gewoon de method die Zero Grav aangaf.
Je gaat hoogs waarschijnlijk zelf wat moeten werken.

**Zero Grav** · 19 april 2012, 09:07

't Is dat, ge kunt niet meer vragen dan ge krijgt. Bij een API moet ge roeien met de riemen die ge krijgt. In dit geval zijn dat x aantal afbeeldingen per pagina. Kijk maar op die Hashgram site, als ge uw pagina helemaal naar beneden scrollt doet hij gewoon een Ajax Request om de volgende x aantal afbeeldingen op te halen.

Als ge niet weet hoe ge die API moet aanspreken dan moet ge dit eens bekijken: http://stackoverflow.com/questions/2...hp-json-object Is hetzelfde principe als dit.

**meuh** · 22 april 2012, 02:48

Nu is het me eindelijk gelukt om foto's van een bepaalde tag te tonen via json. Maar heeft iemand enig idee hoe ik de previous en next url's kan genereren ? Of iemand die het voor mij wil uitschrijven ?

Als je deze url opent zie je al het json object met in het begin "pagination"... Maar daar stop de kennis volledig bij mij :/

Code:

https://api.instagram.com/v1/tags/summer/media/recent?client_id=4edcbbcae1654cd79df028cc00a497e6

Alvast bedankt !

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="instagram"></div>

<script>

$(function() {
    $.ajax({
    	type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/tags/summer/media/recent?client_id=4edcbbcae1654cd79df028cc00a497e6",
        success: function(data) {
            for (var i = 0; i < 100; i++) {
        $(".instagram").append("<div class='instagram-placeholder'><a target='_blank' href='" + data.data[i].link +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></a></div>");   
      		}     
                            
        }
    });
});

</script>

**Zero Grav** · 22 april 2012, 11:45

Ge moet die link niet genereren, die wordt u volledig aangeleverd.

Zie JSON als XML, alleen een pak efficiënter en met bij veel (lees alle) talen de mogelijkheid (al dan niet via een plugin) om omgezet te worden naar een standaardobject in die taal. Dus doorgaans een pak gemakkelijker te manipuleren dan XML.

JQuery decodeert automatisch het JSON-object voor u en ge zijt dus nu in uw return functie gewoon met een javascript object aan't werken.. Dus op zich moet ge gewoon een console.log(data); doen en ge kunt zien waar die next_url zich bevindt.

En aangezien ge weet dat ge properties van een object via een punt kunt benaderen (ge hebt het al gedaan in uw loop) zou dat wel moeten lukken.

Gebruik voor uw loop trouwens geen hardcoded value, maar de grootte van de data-array door middel van for (var i = 0; i < data.data.length; i++). Ge krijgt maar 19 afbeeldingen terug, geen 100.

**meuh** · 22 april 2012, 15:55

Om eerlijk te zijn heb ik dat script letterlijk van ergens overgenomen...

Moet ik dan juist buiten dit for lus terug opnieuw

HTML-code:

 $(".instagram").append("next url..... ");

schrijven ?

**meuh** · 22 april 2012, 17:04

Hetgeen dat ik nu heb is:

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="instagram"></div>

<script>

$(function() {
    $.ajax({
    	type: "GET",
        dataType: "jsonp",
        cache: false,
        url: "https://api.instagram.com/v1/tags/summer/media/recent?client_id=4edcbbcae1654cd79df028cc00a497e6",
        success: function(data) {
            for (var i = 0; i < data.data.length; i++) {
        $(".instagram").append("<div class='instagram-placeholder'><a target='_blank' href='" + data.data[i].images.standard_resolution.url +"'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></a></div>");   
      		}
			
		$(".instagram").append("<div id='pag'><a href='"+data.pagination.next_url+"'>Next</a></div>");

                            
        }
    });
	
	
});

</script>

Maar als ik nu op Next klik, krijg ik terug opnieuw een json object te zien. Dat komt uiteraard wel dat ik niet naar mijn index.php link, maar hoe kan ik dat nieuwe json object dan "inladen" ?

Ik heb het script even hier geplaatst:
http://clubtropicana.be/insta/index.php

**meuh** · 23 april 2012, 09:33

Het is me gelukt !

Voor de geïnteresseerde:

Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<ul class="instagram"></div>
<script>
    $(function () {
        getNewData("https://api.instagram.com/v1/tags/summer/media/recent?client_id=4edcbbcae1654cd79df028cc00a497e6");
    });

    function getNewData(url) {
        $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: url,
            success: function (data) {
                $(".instagram").empty();
				
 				$(".instagram").append("<div id='pag'><a href='' id='next'>Next</a></div>");
	
	
                for (var i = 0; i < data.data.length; i++) $(".instagram").append("<li class='insta' style='float:left;'><a target='_blank' href='" + data.data[i].images.standard_resolution.url + "'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url + "' /></a></li>");

               

                $("a#next").click(function (event) {
                    event.preventDefault();
                    getNewData(data.pagination.next_url);
                });
            }
        });
    }
</script>

Nu nog een previous link maken en ervoor zorgen dat de links verdwijnen als er geen volgende pagina is...

**W0utR** · 23 april 2012, 10:59

Ik snap niet echt wat het probleem is, die api geeft toch alles terug?

{"pagination":{"next_max_tag_id":"1335196677583"," deprecation_warning":"next_max_id and min_id are deprecated for this endpoint; use min_tag_id and max_tag_id instead","next_max_id":"1335196677583","next_min_i d":"1335196736050","min_tag_id":"1335196736050","n ext_url":"https:\/\/api.instagram.com\/v1\/tags\/summer\/media\/recent?client_id=4edcbbcae1654cd79df028cc00a497e6& max_tag_id=1335196677583"}

**meuh** · 23 april 2012, 14:15

Oorspronkelijk geplaatst door W0utR

Ik snap niet echt wat het probleem is, die api geeft toch alles terug?

Er is nu toch geen probleem...

Maar bijvoorbeeld "previous url" zit niet in dat json object.

**Zero Grav** · 23 april 2012, 14:24

Previous_url is de vorige next_url feitelijk. Dus als ge next_url update kunt ge simpelweg eerst previous_url = next_url; doen. En kijken of er een next_url bestaat is simpelweg de string length bekijken of vergelijken met "" if(data.pagination.next_url === "") { }

**W0utR** · 24 april 2012, 04:59

Ik denk niet dat je dat moet controleren, de next_url geeft hij al terug, voor de previous url te maken moet je gewoon die min_tag_id gebruiken en deze gaan wss altijd verschillend zijn.

De previous url zit inderdaad niet helemaal in de json, maar je moet hem gewoon zelf genereren.

**meuh** · 24 april 2012, 22:52

Bedankt voor alle hulp ! Het is hier in orde aan 't geraken

Maar 'k heb nog één vraagje...
Ik heb hier een script geschreven om om de 5 seconden een nieuwe instagram foto te tonen, maar na enkele foto's begint dat script te "flashen"... iemand enig idee waarom ?

De broncode kan je via de volgende url gewoon bekijken:

Untitled Document

Thanks !

**W0utR** · 25 april 2012, 04:29

Het script toon om de 10 seconden een andere foto, en nogal normaal dat er van alles mis gaat.

Je haalt eerst de volledige feed op, append de eerste foto via een for lus(?????) en je hangt er een interval aan.
Dit interval word nergens gestopt, dus elke keer dat je die getNewData() aanroept word er een nieuw interval gestart, na 5 keer lopen er dus 5 intervals.

Ik snap trouwens je logica niet, je haalt een feed op met een stuk of 20 foto's maar je toont enkel de eerste om even later de feed opnieuw op te halen en waar enkel de eerste te tonen.

Dat wilt dus zeggen dat je 20 requests gaat doen om 20 foto's te tonen, terwijl je gewoon 20 foto's krijgt per request.

Discussie: Instagram hashtag feed

LinkBack

Discussietools

Geef een waardering voor deze discussie

Instagram hashtag feed

Discussie informatie

Users Browsing this Thread

Regels voor berichten