دریافت آخرین فیلم و تصاویر Instagram با استفاده از Jquery

در این مقاله قصد داریم در مورد دریافت آخرین فیلم و تصاویر در صفحه ی instagram خود با استفاده از تابع جی کوئری استفاده نماییم.

دریافت آخرین فیلم و تصاویر Instagram با استفاده از Jquery

یکی از رسانه های اجتماعی امروزه Instagram است ، که در این مقاله قصد داریم فیلم و تصویر مربوط به صفحات اینستاگرام که عضو هستیم را با استفاده از tag های html  جی کوئری دریافت نماییم و در صفحه خود به عنوان یک hashtag دریافت نماییم.

مراحل به صورت زیر خواهد بود:

ابتدا داخل صفحه ی html خود قطعه کد زیر را بنویسید:

<head runat="server">  
    <title>Get Instagram Data</title>  
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>  
    <script src="Script/CustomScript.js"></script>  
</head>  
<body>  
    <form id="form1" runat="server">  
        <div class="instagram">  
              
        </div>  
    </form>  
</body> 

فایل css به صورت زیر خواهد بود:

body {  
    background: #f4f4f4;  
    : Arial,sans-serif;  
    : 14px;  
    color: #666;  
}  
#instagram {  
    width: 800px;  
    height: auto;  
    overflow: auto;  
    background: #fff;  
    padding: 15px;  
}

ما برای نمایش عکس ها و فیلم ها از یک div استفاده می نماییم.

حتما شما باید در instagram عضو باشید تا بتوانید از آخرین عکس ها و فیلم ها با خبر شوید.

وقتی وارد سایت instagram رفتید به این بخش بروید به صورت زیر:

سپس به قسمت Manage Clients بروید و گزینه ی Register a New Client را بزنید صفحه ی زیر باز خواهد شد.

پس از آن به شما اطلاعاتی در مورد client خواهد داد به صورت زیر:

در حال حاضر برای بررسی سایت مورد نظر به شما یک access token می دهد که با زدن این لینک دسترسی به شما می دهد و اطلاعات مورد نیاز در یک taghash می آورد.

با استفاده از script زیر می توانیم تمام اطلاعات را با استفاده از token مورد نظر داخل یک div قرار دهیم

$(document).ready(function () {  
    var hashtag = 'dilwale'  
    var accessToken = '16741082.1b07669.121a338d0cbe4ff6a5e04543158a4f82' //Write your access token  
    $.ajax({  
        url: 'https://api.instagram.com/v1/tags/' + hashtag + '/media/recent?count=33&access_token='+ accessToken +'',  
        dataType: 'jsonp',  
        type: 'GET',  
        success: function (data) {  
            console.log(data);  
            for (x in data.data) {  
                if (data.data[x].type == 'video') {  
                    //console.log("Video" + data.data[x].videos.standard_resolution.url);  
                    //See the browser console and add data as per requirements  
                    $('.instagram').append('<div style="border:1px solid orange"><video controls><source src="' + data.data[x].videos.standard_resolution.url + '" type="video/mp4"></video><span style="border:1px solid orange; dislay:block">Test1</span></div>');  
                } else if (data.data[x].type == 'image') {  
                    $('.instagram').append('<div style="border:1px solid orange"><img src="' + data.data[x].images.standard_resolution.url + '" ><span style="border:1px solid orange; display:block">"' + data.data[x].caption.text + '"</span><span style="border:1px solid orange; dislay:block">Test1</span></div>');  
                    //console.log("Image");  
                    //See the browser console and add data as per requirements  
                }  
            }  
        },  
        error: function (data) {  
            console.log(data);  
        }  
    })  
}); 

 

دانلود فایل های ضمیمه مخصوص اعضای سایت می باشد !
کاربر مهمان! جهت دانلود و استفاده از امکانات سایت لطفا وارد سایت شوید و یا ثبت نام کنید
دانلود نسخه ی PDF این مطلب