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

こんにちは。

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

mami
本当にありがとうございました!

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

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

mami
無理…

面倒な事はあっさり諦めます。とは言っても、オシャレなサイトにはしたいので、別の方法を探していたところ、「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は変更してください。

<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さんを例にさせて頂きました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)