نمایش اطلاعات حساب اینستاگرام با جاوااسکریپت

خیلی وقت بود میخواستم با API اینستاگرام کار کنم که ببینم چی داره چی نداره که توی این گشت و گذار با یه چیزی آشنا شدم که با استفاده از اون یه پروژه کوچیک زدم.

اگه به آخر آدرس اکانتتون /?__a=1 رو اضافه کنید میتونید اطلاعات ی راجع به صفحتون رو در قالب JSON ببینید، به این صورت:

instagram.com/USERNAME/?__a=1

این اطلاعات علاوه بر اون چیزایی که برا همه قابل مشاهده است یه سری چیز دیگه مثل پست ها ، پست های ذخیره شده و ... رو هم تو خودش جا داده.

خب توی این پروژه یه فرم داریم که کاربر یوزرنیم خودش رو وارده میکنه و ما با استفاده از جاوااسکریپت نام، عکس پروفایل، تعداد پست ها، فالوئر، فالوینگ و بیوگرافی رو نمایش میدیم.

اول از همه فرم رو طراحی میکنیم.

<div id=&quotpage&quot>
  <div id=&quotinput&quot>
  نام کاربری:
  <input type=&quottext&quot id=&quottxtUser&quot>
  <button =&quotgetData()&quot>نمایش</button>
  </div>
  <div id=&quotresult&quot>
    <div>
      <p id=&quotfullname&quot></p>
    </div>
    <div id=&quotdividpic&quot></div>
    <div id=&quotdata&quot></div>
    <div id=&quotdivBio&quot>
      <pre id=&quotbio&quot></pre>
    </div>
  </div>
</div>

خب تا اینجا یه همچین چیزی داریم:

الان باید بریم و تو کار قشنگ کردن با CSS، خب تو کدهای پایین چند تا کلاس و آی دی رو میبینید که توی HTML ننوشتیم. اونارو توی جاوااسکریپت اضافه کردم، نپرسید چرا که نمیگم :دی

@import url('https://cdn.fontcdn.ir/Font/Persian/Vazir/Vazir.css');
* {
direction: rtl;
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 16px;
font-family: Vazir;
}
body {
display: flex;
justify-content: center;
padding: 10px;
}
#page {
background: #ecf0f1;
width: 33%;
border-radius: 20px;
height: auto;
padding: 10px 0;
box-shadow: 0 0 5px rgba(0, 0, 0, .1);
display: flex;
flex-direction: column;
align-items: center;
}
#input, #result {
width: 85%;
}
#input {
width: 70%;
display: flex;
justify-content: space-around;
align-items: baseline;
}
input {
width: 40%;
background: transparent;
outline: none;
padding: 2px 10px;
border-radius: 5px;
border: 1px solid #555;
color: #333;
direction: ltr;
}
input:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}
button {
width: 30%;
outline: none;
padding: 2px 5px;
border-radius: 5px;
cursor: pointer;
border: 1px solid #555;
background: #3598db;
color: #fff;
}
#page>div {
margin: 10px 0;
}
#result {
display: flex;
flex-direction: column;
align-items: center;
}
#fullname {
font-size: 18px;
text-transform: uppercase;
}
#pic {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 10px 0;
transition: .2s;
}
#pic:hover {
box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}
#pic img {
width: 100%;
}
#data {
width: 100%;
display: flex;
justify-content: space-around;
text-align: center;
}
#divBio {
width: 100%;
}
#bio {
direction: ltr;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .3);
white-space: pre-wrap;
}

خب تا الان فرم ما این شکلی شده:

در آخر هم اصل کار رو انجام میدیم یعنی گرفتن اطلاعات با AJAX توی جاوااسکریپت که دو روش داره مختصر بگم با XHR و FETCH که من با استفاده از فِچ (واکشی) انجام دادم.

function getData() {
  var username = document.getElementById('txtUser').value;
  const url = 'https://instagram.com/' + username + '/?__a=1';
  fetch(url)
    .then(data => {
      return data.json()
    })
    .then(res => {
      var rgu = res.graphql.user;
      var fn = rgu.full_name;
      var post = rgu.edge_owner_to_timeline_media.count;
      var img = rgu.profile_pic_url_hd;
      var flwing = rgu.edge_follow.count;
      var flwer = rgu.edge_followed_by.count;
      var bio = rgu.biography;
      document.getElementById('dividpic') = &quot<div id='pic'><img src='' id='img'></div>&quot
      document.getElementById('data') = '<div><p>پست</p><span id=&quotpost&quot></span></div><div><p>دنبال شونده</p><span id=&quotflwing&quot></span></div><div><p>دنبال کننده</p><span id=&quotflwer&quot></span></div>';
      var bioStyle = document.getElementById('bio');
      bioStyle.style.background = '#eee';
      bioStyle.style.padding = '5px';
      bioStyle.style.marginTop = '15px';
      document.getElementById('fullname') = fn;
      document.getElementById('bio') = bio;
      document.getElementById('img').src = img;
      document.getElementById('post') = post;
      document.getElementById('flwing') = flwing;
      document.getElementById('flwer') = flwer;
  })
}

توی ایونت دکمهء نمایش، تابع بالا رو صدا میزنیم.

توضیحاتی هم نداره بنظرم واضحه :|

این پروژه رو میتونید از گیت هاب یا کدپن دریافت کنید (فورک و لایک یادتون نره) یا هر بلایی که دلتون خواست سرش بیارید.

برای اجرای پروژه کلیک کنید [+]