Weergegeven resultaten: 1 t/m 17 van 17
  1. #1
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)

    Instagram hashtag feed

    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.

  2. #2
    Crew Member Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.818
    iTrader
    18 (100%)
    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.

  3. #3
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    Ik ga zelf een "unieke" hashtag op de website gebruiken zodat er geen onnodige foto's in de stream komen.

  4. #4
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    Zo'n script heb ik exact nodig:
    Hashgram

  5. #5
    Member W0utR's schermafbeelding
    Lid sinds
    16/04/08
    Locatie
    Hong Kong
    Berichten
    1.893
    iTrader
    6 (100%)
    En dat script gebruikt ook gewoon de method die Zero Grav aangaf.
    Je gaat hoogs waarschijnlijk zelf wat moeten werken.

  6. #6
    Crew Member Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.818
    iTrader
    18 (100%)
    '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.

  7. #7
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    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>

  8. #8
    Crew Member Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.818
    iTrader
    18 (100%)
    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.

  9. #9
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    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 ?

  10. #10
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    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
    Laatst gewijzigd door meuh; 22 april 2012 om 17:22

  11. #11
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    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...

  12. #12
    Member W0utR's schermafbeelding
    Lid sinds
    16/04/08
    Locatie
    Hong Kong
    Berichten
    1.893
    iTrader
    6 (100%)
    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"}

  13. #13
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    Citaat Oorspronkelijk geplaatst door W0utR Bekijk bericht
    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.

  14. #14
    Crew Member Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.818
    iTrader
    18 (100%)
    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 === "") { }

  15. #15
    Member W0utR's schermafbeelding
    Lid sinds
    16/04/08
    Locatie
    Hong Kong
    Berichten
    1.893
    iTrader
    6 (100%)
    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.

  16. #16
    Member
    Lid sinds
    22/06/10
    Locatie
    Mechelen
    Berichten
    285
    iTrader
    4 (100%)
    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 !

  17. #17
    Member W0utR's schermafbeelding
    Lid sinds
    16/04/08
    Locatie
    Hong Kong
    Berichten
    1.893
    iTrader
    6 (100%)
    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 informatie

Users Browsing this Thread

Op dit moment bekijken 1 gebruikers deze discussie. (0 leden en 1 gasten)

Regels voor berichten

  • Je mag geen nieuwe discussies starten
  • Je mag niet reageren op berichten
  • Je mag geen bijlagen versturen
  • Je mag niet je berichten bewerken
  •