WebサイトにInstagramの投稿を簡単に表示する方法

こんにちは。

今年最後の投稿となります。今年は８３投稿出来ました。マニアック＆限定的な記事が多かったとは思いますが、去年に比べるとかなり沢山の人にサイトにお越し頂きました。本当にありがとうございました！

さて、今日はマニアックでも限定的でもなく、色々な人に使って頂ける記事を書こうと思います。すごいライブラリを使用して、WebサイトにInstagramの投稿を簡単に表示する方法をご紹介します。

2021/3/12補足こちらのライブラリを使っていましたが、表示されない事が度々あったので、APIで取得する方法もご紹介しています。以下リンクからご覧いただけます。

WebサイトにInstagramの投稿を表示する方法 Instagram Graph API（v10.0）

DjangoのCMSであるWagtailを使ったWebサイトを作成しておりますが、Instagramの投稿を表示したら、オシャレなサイトになる（インスタの投稿写真次第ですが…）ので、すぐに取り掛かりましたが、Instagram用のAPI(InstagramBasicDisplayAPI、InstagramGraphAPI）を使えるようにするのに、とーっても複雑な工程をしないといけない事がわかりました。ビジネスアカウントがいるとか、、Facebook連携しないといけないとか、、アクセストークンは１時間やら６０日で切れるやら。。無理…

面倒な事はあっさり諦めます。とは言っても、オシャレなサイトにはしたいので、別の方法を探していたところ、「jquery.instagramFeed」が面倒な事を一切省いて、やりたい事を実現してくれる超素晴らしいライブラリだったのでご紹介します。

jquery.instagramFeed使い方

jquery.instagramFeed よりソースを取得します。

ドキュメントには「Instagram Feed without access token. We like Instagram but hate his API」（アクセストークンのないInstagramのフィード。私たちはInstagramが好きだが、彼のAPIが嫌い）とあります。

まさしく、求めていたもの！！

適切な場所にjquery.instagramFeed.min.jsを配置し、表示したいhtmlに以下を追加します。 ※usernameは変更してください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<head>
    <script
        src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
        crossorigin="anonymous"></script>
</head>

<body>
<div style="display:none" id="instagram-feed1"></div>
<script>
    (function($){
        $(window).on('load', function(){
            $.instagramFeed({
                'username': 'instagram',
                'container': "#instagram-feed1",
                'display_profile': true,
                'display_biography': true,
                'display_gallery': true,
                'display_captions': true,
                'callback': null,
                'styling': true,
                'items': 8,
                'items_per_row': 4,
                'margin': 1,
                'lazy_load': true,
                'on_error': console.error
            });
        });
    })(jQuery);
</script>
</body>

これだけで表示されます！すごい簡単！

Webサイト用のインスタアカウントをまだ作っていないので、著作権フリーの写真を上げていらっしゃる@free.photo123さんを例にさせて頂きました。