Pagina 1 van 2 12 Laatste
  1. #1

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.822
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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

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

  5. #5
    W0utR's schermafbeelding
    Lid sinds
    16/04/08
    Locatie
    Hong Kong
    Berichten
    1.914
    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
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.822
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.822
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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
    W0utR's schermafbeelding
    Lid sinds
    16/04/08
    Locatie
    Hong Kong
    Berichten
    1.914
    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

    Lid sinds
    22/06/10
    Locatie
    Muizen (Mechelen)
    Berichten
    286
    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
    Zero Grav's schermafbeelding
    Lid sinds
    6/06/04
    Locatie
    Bilzen
    Berichten
    8.822
    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
    W0utR's schermafbeelding
    Lid sinds
    16/04/08
    Locatie
    Hong Kong
    Berichten
    1.914
    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.

Pagina 1 van 2 12 Laatste

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
  •  

Inloggen

Inloggen