クリエイター：コーディング備忘録ブログ

RSS

コーディング

インスタキーのみでインスタグラムをサイトに表示

2018.08.31

インスタグラムをサイトに埋め込む方法は、ウィジェットを使用したり、埋め込み用のコードを入力することで表示させたりといろいろな方法がありますが、
インスタキーのみで簡単に表示させる方法があります。

<script type="text/javascript">
<!--
var instaKey = "***********";
//var instaKey = "************";
var imgCnt = 6;

$(function(){
  $.getJSON("https://api.instagram.com/v1/users/self/media/recent/?access_token="+instaKey, function(data) {
    for(var i = 0; i < imgCnt; i++) {
      var imgurl = data['data'][i]['images']['standard_resolution']['url'];
      if(imgurl){
        $('#insuta_area').append('<li><img src="' + imgurl + '"><span>' + data['data'][i]['likes']['count'] + '</span></li>');
      }
    }
  });
});
-->
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<script type="text/javascript">

<!--

var instaKey = "***********";

//var instaKey = "************";

var imgCnt = 6;

$(function(){

$.getJSON("https://api.instagram.com/v1/users/self/media/recent/?access_token="+instaKey, function(data) {

for(var i = 0; i < imgCnt; i++) {

var imgurl = data['data'][i]['images']['standard_resolution']['url'];

if(imgurl){

$('#insuta_area').append('<li><img src="' + imgurl + '"><span>' + data['data'][i]['likes']['count'] + '</span></li>');

}

}

});

});

-->

</script>

上記のコードのvar instaKeyにインスタキーを入力し、var imgCntで表示させたい写真の枚数を指定できます。

<ul id="insuta_area"></ul>

1	<ul id="insuta_area"></ul>

指定したID（今回はinsuta_area）の要素内にリスト形式で表示されます。

この記事を見た人は次の記事も見ています。

WordPressで固定ページのパーマリンクを変更

前の記事

.wrap()

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

WP:投稿画面のカテゴリー階層

2017.04.26

コーディング

WEBサイトを作る目的の話

2021.02.17

コーディング

Chrome Canary

2017.10.05

コーディング

IEでposition:absolute;が崩れる場合

2018.11.08

コーディング

wpの使いやすい管理画面をつくるヒント

2018.07.06

コーディング

WordPress の固定ページのリビジョン機能

2018.11.14