簡単！自力でInstagramのハッシュタグ投稿一覧を埋め込む方法

WebサイトにInstagramの特定のハッシュタグ投稿一覧を埋め込む方法を教えます。

2016年以降、特定の#ハッシュタグの付いた写真を一覧表示する事が、難易度高くなってしまい、有料のサービスを使うなどしなければならなくなってしまいました。

Instagran apiの規約変更に関して、詳しくはこちらhttps://arrown-blog.com/instagram-api-policy-changed/

特定のハッシュタグの付いた写真を一覧表示する方法は、いろいろ探しましたが、無料では出来ないです(2018年5月現在)。
※ブログを見ていただいた方から、複眼feedというWEBサービスを教えていただきました。こちらのサービスでもインスタのハッシュタグ一覧埋め込みが出来るようです。

有料のサービスはどれも高額で、月額が3万円ほどかかるサービスばかりで、導入の敷居が非常に高いのが現状です。
よくある、インスタハッシュタグキャンペーンページは、このような業者に委託して作っているようです。
https://tagplus.jp/
http://hash.smartpr.jp/

今回は、Instagram Feedを使用して、自力で特定の#ハッシュタグの付いた写真を一覧表示する方法を教えます。
この方法であればプラグインの購入費30ドル程で実現が可能です。

Instagram Feedとは

スマートフォン向けの写真・動画共有アプリのインスタグラムに投稿した写真や動画をWordPressの記事やサイドバーなどに表示できるプラグインです。 このプラグインは、Instagramの利用者向けのプラグインです。 ショートコードを利用して自分のアカウントの写真や動画も表示できます。

wordpressのプラグインという事ですが、wordpressで構築してないサイトでも使用することが出来ます。

CMSを特に使っていない、静的なHTMLのページでも使えるのが特徴です。

Instagram Feedで実現できること

特定の#ハッシュタグの付いた写真を一覧で表示したり、特定のユーザーの写真を一覧で表示したりすることが出来ます。

デモページはこちら。
https://smashballoon.com/instagram-feed/demo/

ライセンス購入

こちらのページにてプラグインを購入します。
https://smashballoon.com/instagram-feed/pricing
wordpress以外の静的HTMLのサイトに組み込む時は、「Standalone Version」を選択します。
「Standalone Version」を選択した場合、なぜか請求額が70ドルに増えます。

インストール手順

①ファイルのダウンロード

Instagram Feed Standaloneバージョンを購入すると、ライセンスキーとプラグインをダウンロードするためのリンクが表示された購入確認画面が表示されます。この情報は、チェックアウト時に指定した住所でも電子メールで送信されます。ライセンスキーをメモし、ダウンロードリンクをクリックしてプラグインのzipファイルをダウンロードします。

②プラグインのフォルダを開く。

プラグインのzipファイルをダウンロードして解凍すると、次のファイル構造が表示されます。

スタンドアロンファイル構造の構造は、このようになっています。

2つのメインファイルはexample.htmlで、フィードをウェブサイトに統合する方法の例と、同じページに複数のフィードを表示する方法の例を含むmultiple.htmlです。

③htmlを開く

個々のフィード設定を行うには、example.htmlをテキストエディタで開いた後に次のように表示されます。

④アクセストークンとInstagramユーザーIDを入力

以下のように、指示された場所にアクセストークンとInstagramユーザーIDを入力します。

このツールを使用してアクセストークンを取得する：スタンドアロンアクセストークンツール
このツールを使用して、ユーザーID：ユーザーIDツール

⑤htmlの組み込み

HTMLページを受け入れるWebページ、ページエディタ、ウィジェット/モジュール、またはサイトやCMSのどこにでもexample.htmlファイルの内容全体をコピーして貼り付ける（コメントを除外することができます）。

⑥ファイルのアップロード

FTPクライアントを使用してプラグインソースファイルに付属の “instagram-feed”フォルダをWebサーバーにアップロードします。

重要：
ページ内のファイルを含むコード内のファイルパスを変更して、サイト上のファイルの場所を反映させます。

⑦表示確認

ブラウザーでページを表示し、表示されているフィードを表示します。以下は、デフォルトのデモページ ‘13460080’ InstagramフィードIDを使用してどのように表示されるかの例です：

⑧カスタマイズオプション

フィードオプションオブジェクトにカスタマイズオプションを追加することで、プラグインをカスタマイズすることができます。利用可能なカスタマイズオプションの完全なリストはInstagram Feed Standalone Settingsページで利用できます。

⑧ハッシュタグ一覧表示のHTML例

<!-- 1. Define the settings for your Instagram feed: -->
<script>
    var feed1 = {
        "accesstoken": "トークンを入力", 
        "type": "hashtag", 
        "hashtag": "#柴犬", 
        "cols": 3, 
        "num" : "9",
        "sortby" : "date",
        'showfollow' : 'false',
    'buttontext' : 'もっと見る'
    };

</script>

<!-- 2. Copy and paste the following line wherever you want to display the Instagram feed: -->
<div id="sb_instagram" class="sbi" data-settings="feed1"></div>

<!-- 3. If your site doesn't already include jQuery then add a link to it: -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

<!-- 4. Add the links to the plugin files to your site, make sure the path to the CSS and Javascript files are correct relative to your actual site: -->
<link href='/assets/instagram-feed/css/sb-instagram-standalone-2.7.min.css' rel='stylesheet' id='sb_instagram_standalone_styles-css' type='text/css' media='all' />
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css?ver=4.6.3' rel='stylesheet' id='sbi-font-awesome-css' type='text/css' media='all' />
<script src='/assets/instagram-feed/js/sb-instagram-standalone-2.7.min.js' id='sb_instagram_standalone_scripts-js' type='text/javascript'></script>