Ticker

6/recent/ticker-posts

Header Ads Widget

Cara menampilkan postingan foto, video instagram responsive di halaman web

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Cara menampilkan postingan foto, video instagram responsive di halaman web, untuk menampilkan foto, video instagram dihalaman web dengan layout responsive disini saya menggunkan plugins pongstagram, plugins tersebut dapat menampilkan profile dan post foto yang ada di instagram sobat, serta ada modal popup untuk melihat keterangan dan komentar yang ada di foto sobat. untuk dapat menggunkan pongstagram dihalaman website sobat ikutin langkah-langkah dibawah ini.



Langkah Pertama
Sobat download terlebih dahulu plugins pongstagram disini.

Langkah Kedua
Sobat extract hasil download di folder root aplikasi sobat

Langkah Ketiga
Dapat access token dan userid dari instagram miliki sobat, caranya sobat login terdahulu ke instagram kemudian generate access token disini, jika sudah di generate kemudian sobat akan melihat userid dan access token instagram milik sobat, sepuluh angkah yang pertama adalah userid, dan seluruh angka adalah access token.

Langkah Kelima
Untuk menggunkan pongstagram sobat ketik kode dibawah ini, masukkan userid & acces token sesuai dengan milik sobat.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Pongstagr.am</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="pongstagram.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="pongstagram.js"></script>
<script src="plugins.js"></script>
<style>
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
 padding-left:0px;
 padding-right:0px;
}
</style>
</head>
<body>
  <div class="container">
  <h1>instagram</h1>
   <div id="myprofile"></div>
   <div id="all-news"></div>
  </div>
<script type='text/javascript'>  
    $(document).ready(function () { 

      //Untuk menampilkan Profile instagram
      $('#myprofile').pongstgrm({
      accessId:     'disni userid',
      accessToken:  'disini accessToken',
      show:             'profile',
      picture_size:     '64',                  
      profile_bg_img: '',
      profile_bg_color: '#002366'   
      });
 
   //Untuk menampilkan Post instagram  
      $('#all-news').pongstgrm({
      accessId:     'disni userid',
      accessToken:  'disini accessToken',
      count:100,
      show: 'recent'
      });
  
    });
  </script>
</body>
</html>

Langkah Keenam
Sobat jalankan / eksekusi script diatas maka jika semua dilakukan dengan benar sobat akan melihat instagram tampil dihalaman website milik sobat, untuk dokumentasi lengkapnya silahkan menuju halaman webnya disini.

Sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri, untuk download source dan demo dari code diatas bisa klik link dibawah ini.

Post a Comment

3 Comments

Berkomentarlah dengan baik dan sopan

Rekomendasi Untuk Anda × +