Reading time: 6 minutes

Instagram Basic Display API pavyzdys | Arba kaip gauti keturis naujausius įrašus iš savo Instagram paskyros



newpost instagram basic display api gauti keturis irasus



Taip jau yra, kad mėgstu dalintis programiniu kodu, kuris man yra padėjęs išspręsti vieną ar kitą rimtesnę bėdą administuojamuose WEB puslapiuose. Tad šįkart dalinuosi Javascript kodo pavyzdžiu padėsiančiu ištraukti keturis naujausius įrašus iš asmeninės Instagram verslo tipo paskyros.

Ką reikia turėti tam, kad būtų galima pritaikyti kodą?

  1. Bootstrap stiliaus failo nuorodą savo svetainėje (Nes kodas veikia tik su Bootstrap)
  2. Facebook aplikaciją (Susikurti galima developers.facebook.com)
  3. Reikia būti pridėjus savo Instagram paskyrą prie savo aplikacijos Instagram Basic Display API testuotojų
  4. Instagram Basic Display API leidimus bei nautotojo ID ir prieigos raktą prie API

Kodas

  • Užkrovus būtinuosius svetainės resursus, suveikus ‘load’ event’ui, sukuriama klasė. Šiai klasei priskirtas vienas metodas, kuris pavadintas getInsta vardu.
  • getInsta metodas sukonstruoja galutinę URL nuorodą (cnt kintamojo reikšmė naudojama įrašų ribojimui nustatyti, šiuo atveju gaunami keturi įrašai)
  • Sėkmingai įvykdžius užklausą gaunamas JSON formato srautas (arba vienas didelis masyvas, jei taip patogiau)
  • Sutikrinamas kiekvieno elemento tipas (paveiksliukas - “IMAGE” arba vaizdo įrašas = “VIDEO”)
  • Priklausomai nuo elemento tipo, į div HTML elementą () sugeneruotas kodas (Bootstrap Card su paveikslėliu, arba su vaizdo įrašu). Kiekvienam vaizdo įrašui priskiriamas poster’is, kurį apibūdina kintamasis let poster=“poster.png”. 65 kintamąjį reikėtų pasikeisti pagal save.
 window.addEventListener('load',()=>{
    class insta{
        constructor(uid,tokenizer){
            this.iId = uid;
            this.passedTokenizer = tokenizer;
        }

        getInsta=()=>{
            let url = 'https://graph.instagram.com/'+this.iId+'/media?fields=media_type,permalink,username,caption,thumbnail_url,media_url,timestamp&access_token=';
            let acc = this.passedTokenizer;
            let cnt = '&limit=4';
            let newurl = url+acc+cnt;
            let sel = document.querySelectorAll('.instarow')[0];
            fetch(newurl).then((r)=>r.json()).then((d)=>{
            d.data.forEach(element => {
                if (element.media_type=="IMAGE") {
                    if (element.caption!=undefined) {
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto h-100" style="width: 95%;">\
                <img class="card-img-top" src="'+element.media_url+'" alt="AltiusImage">\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <p class="card-text">'+element.caption+'</p>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                }
        
                else{
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto h-100" style="width: 95%;">\
                <img class="card-img-top" src="'+element.media_url+'" alt="AltiusImage">\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                } 
                }
                else if(element.media_type=="VIDEO"){
                     let poster="poster.png";
                    if (element.caption!=undefined) {
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto" style="width: 95%;">\
                <video class="card-img-top" alt="AltiusVideo" controls preload="none" poster="'+poster+'"><source src='+element.media_url+' type="video/mp4"/></video>\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <p class="card-text">'+element.caption+'</p>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                }
        
                else{
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto" style="width: 95%;">\
                <video class="card-img-top" alt="AltiusVideo" controls preload="none" poster="'+poster+'"><source src='+element.media_url+' type="video/mp4"/></video>\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                } 
                }
               
               
            });
            });
        }
    }
    let d = document.querySelector(".post-heading > .meta > a").innerText;
	if(d == "Altius"){
        let inS = new insta('youruserid','youraccesstoken');
        inS.getInsta();
    }
})

Ką reiškia kintamasis d?

 let d = document.querySelector(".post-heading > .meta > a").innerText;
	if(d == "Altius"){
        let inS = new insta('youruserid','youraccesstoken');
        inS.getInsta();
    }

Šios eilutės tinklaraštyje altiusday.lt aptinka konkretaus įrašo autorių ir leidžia atvaizduoti skirtingų autorių Instagram įrašus, priklausomai nuo to koks autorius juos parašė. (Bet tai tinka tik mano svetainei, tad norint aptikti savo autorių derėtų let d = document.querySelector(“Keisti selectoriu’s čia”).innerText;)

Jei kodą norima panaudoti tik sau, šias eilutes reikėtų pakeisti šitaip:

 let inS = new insta('youruserid','youraccesstoken');
 inS.getInsta();

Tiesiog panaikinti IF sąlygą. Ir kodas pavirs į:

 window.addEventListener('load',()=>{
    class insta{
        constructor(uid,tokenizer){
            this.iId = uid;
            this.passedTokenizer = tokenizer;
        }

        getInsta=()=>{
            let url = 'https://graph.instagram.com/'+this.iId+'/media?fields=media_type,permalink,username,caption,thumbnail_url,media_url,timestamp&access_token=';
            let acc = this.passedTokenizer;
            let cnt = '&limit=4';
            let newurl = url+acc+cnt;
            let sel = document.querySelectorAll('.instarow')[0];
            fetch(newurl).then((r)=>r.json()).then((d)=>{
            d.data.forEach(element => {
                if (element.media_type=="IMAGE") {
                    if (element.caption!=undefined) {
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto h-100" style="width: 95%;">\
                <img class="card-img-top" src="'+element.media_url+'" alt="AltiusImage">\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <p class="card-text">'+element.caption+'</p>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                }
        
                else{
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto h-100" style="width: 95%;">\
                <img class="card-img-top" src="'+element.media_url+'" alt="AltiusImage">\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                } 
                }
                else if(element.media_type=="VIDEO"){
                     let poster="poster.png";
                    if (element.caption!=undefined) {
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto" style="width: 95%;">\
                <video class="card-img-top" alt="AltiusVideo" controls preload="none" poster="'+poster+'"><source src='+element.media_url+' type="video/mp4"/></video>\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <p class="card-text">'+element.caption+'</p>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                }
        
                else{
                    sel.innerHTML+='<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-2 mb-2"><div class="card mx-auto" style="width: 95%;">\
                <video class="card-img-top" alt="AltiusVideo" controls preload="none" poster="'+poster+'"><source src='+element.media_url+' type="video/mp4"/></video>\
                <div class="card-body">\
                    <h5 class="card-title">@'+element.username+'</h5>\
                    <a href="'+element.permalink+'" class="btn btn-md btn-dark">Aplankyti šį įrašą</a>\
                </div>\
                </div></div>';
                } 
                }
               
               
            });
            });
        }
    }
    let d = document.querySelector(".post-heading > .meta > a").innerText;
        let inS = new insta('youruserid','youraccesstoken');
        inS.getInsta();
})

Gero naudojimo.

Visa pateikiama informacija - asmeninė autoriaus nuomonė. Kilus naiškumams rekomenduojama susisiekti elektroniniu paštu: admin@artefaktas.eu

Comments

comments powered by Disqus