Archief - Instagram hashtag feed

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
m

meuh

Legacy Member
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.
Z

Zero Grav

Legacy Member
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.
m

meuh

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

W0utR

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

Zero Grav

Legacy Member
'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/263392/handling-data-in-a-php-json-object Is hetzelfde principe als dit.
m

meuh

Legacy Member
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>
Z

Zero Grav

Legacy Member
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.
m

meuh

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

Moet ik dan juist buiten dit for lus terug opnieuw
HTML: 
 $(".instagram").append("next url..... ");
schrijven ?
m

meuh

Legacy Member
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
m

meuh

Legacy Member
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...
W

W0utR

Legacy Member
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_id":"1335196736050","min_tag_id":"1335196736050","next_url":"https:\/\/api.instagram.com\/v1\/tags\/summer\/media\/recent?client_id=4edcbbcae1654cd79df028cc00a497e6&max_tag_id=1335196677583"}
Klik om te vergroten...
m

meuh

Legacy Member
W0utR zei:
Ik snap niet echt wat het probleem is, die api geeft toch alles terug?
Klik om te vergroten...

Er is nu toch geen probleem...

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

Zero Grav

Legacy Member
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 === "") { }
W

W0utR

Legacy Member
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.
m

meuh

Legacy Member
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 !
W

W0utR

Legacy Member
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.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan