jquery.instagramFeedは簡単便利。

こんにちは。ペーターパンです。

皆さんは、自分のホームページやブログにインスタの投稿画像をそのまま表示した経験がありますか？

WordPressならプラグインでインスタのIDさえ分かれば、そのIDを入力して簡単に表示させる事も出来ると思いますが、通常のホームページなどでインスタの投稿画像を表示させるには、APIを取得する必要があったり、facebookと連携させたりと少々面倒な作業が多かったりします。

そんな複雑な作業がなく簡単にインスタの投稿を埋め込み表示出来るのが、jquery.instagramFeed というもの。

下記のスクリプト周りのコードとInstagramFeed.min.jsなどをコピーして使えば、簡単に投稿画像を表示出来ます。

<script src="dist/InstagramFeed.min.js"></script>
<script>
    (function(){
        new InstagramFeed({
            'username': 'instagram',
            'container': document.getElementById("instagram-feed1"),
            'display_profile': true,
            'display_biography': true,
            'display_gallery': true,
            'display_captions': true,
            'max_tries': 8,
            'callback': null,
            'styling': true,
            'items': 8,
            'items_per_row': 4,
            'margin': 1,
            'lazy_load': true,
            'on_error': console.error
        });
    })();
</script>

「username」の部分に、インスタのアカウント名を入れれば、どんな投稿画像でも表示出来ます。

「items」の部分で何枚表示するか、「items_per_row」の部分で1行に何枚表示するか等、自由にカスタム出来ます。

自由度も高く、設置も簡単で大変便利なので今後も重宝すると思います。

ただ注意点として、インスタ側のアップデートや仕様変更(？)などの影響で、いつの間にかインスタの部分だけ見られなくなっている事が最近ありました。開発元から最新のInstagramFeed.min.js を持って来たら復活しましたが、また同じように非表示になる場合もあるという事を頭に入れておく必要がありますね。

参考サイト

https://www.sowecms.com/demos/InstagramFeed/

関連記事