KUHAKU
no
MEMOCHO

ワードプレスでインスタグラムの投稿を表示するプラグイン『Instagram Feed』の使い方

ワードプレスでインスタグラムの投稿を表示するプラグイン『Instagram Feed』の使い方のサムネイル

僕はブログではWEB系の記事を書いていますが、インスタグラムでは主に行ったお店や気になるお店を中心にグルメ、お出かけスポットを投稿しています。

インスタグラムで僕を知った方は当ブログにちょくちょく来ていただいていますが、当ブログから僕を知った方はInstagramの存在をほぼ知らないと思います。

そこでInstagram APIを使ってサイドバーにインスタグラムのフィードを埋め込もうと思ったのですが、現在インスタのAPIは審査が厳しいうえにサンドボックスモードだと利用制限がいろいろあるのでAPIでしっかり組むのは後日にしてとりあえずプラグインでサクッと実装することにしました。

実はめんどくさかっただけっていうのは察してください。笑

ということで実装しつつ使い方をご紹介していきます。

Instagram Feedプラグイン

ワードプレスでインスタグラムのフィードを表示するプラグインはいくつかあるのですが、今回はその中でも設定がシンプルな『Instagram Feed』を使用することにしました。
ちなみに今回は使いませんがこちらのプラグインは複数アカウントのフィードを纏めて表示することが可能プラグインです。

プラグインのインストール

それではまずプラグインのインストールをしていきましょう。
管理画面にあるプラグインの新規追加から「Instagram Feed」を検索ですぐ見つかります。

上記画像のプラグインが出てきますので「今すぐインストール」を押してインストールを始めます。

ダウンロードして使用したい方は下記リンクからダウンロード可能です。

Instagram フィード
ja.wordpress.org

インストールが完了したらすぐに「有効化」ボタンを押して有効化しましょう。

インスタグラムの連携

有効化が完了したら管理画面のサイドバーにInstagram Feedという項目が出ているのでそちらをクリックします。

こちらを押すと上記画像のような英語ばかりの訳のわからんページが出てきます。
そしたら一番上にConfigureという項目でいかにもなボタンがあるのでそちらをポチッと押します。

ボタンを押すとインスタグラムに飛びますのでログインされていない方はインスタグラムアカウントでログインをします。

ログインが完了すると下記画像のようなページが出てくるので有無を言わさずAuthorizeをクリック。

クリックをするとアクセストークンとユーザーIDが表示されています。
そしたら表示するインスタグラムアカウントのユーザーIDをShow Photos FromのUser ID(s)欄に入力します。

表示するアカウントが一つの場合はすぐ上にユーザーIDが表示されているのでそちらをそのままコピペすれば大丈夫です。

こちらの入力が終わったらひとまず変更を保存ボタンを押して保存します。

表示フィードの設定

インスタグラムの連携が終わったので次は表示の設定をしていきます。

ページ上部のタブからCustomizeをクリックします。ここでは表示する枚数や表示順などの設定が可能です。
各項目を上から順に説明していきます。

表示するサイズの設定

まずは一番上のGeneralですが、こちらは表示するフィードの幅や高さ、背景色を設定できます。
初期設定では横幅が100%の設定で他は未設定ですが、こちらはCSSでいじればいいので特に触る必要はないかと思います。

表示件数の設定

次の項目Layoutでは表示する件数とレイアウトが設定できます。

「Number of Photos」は初期表示する件数です。最高で33件まで表示可能みたいですね。
今回はサイドバーへの表示なので6件にしておきました。

次は「Number of Columns」ですがこちらは1列に何枚並べるかの設定です。
現在のサイドバーが約300pxほどしかないので2枚で設定しました。

表示画像の設定

次の項目はPhotosです。こちらは表示する画像の並び順やサイズを指定できます。
今回は初期設定の新規投稿の表示でいいので表示順はこのまま触らずに行きます。

ランダムに表示したい場合は「Sort Photos By」という項目でrandomを選択すればOKです。

その他表示項目の設定

さらに下に行くとヘッダーやLoad Moreボタン、フォローボタン等の表示設定が可能です。

こちらでは項目自体の表示の可否、背景色、文字色、表示文字等が設定できます。

無料版で設定できるのはこれくらいですが、有料版にアップグレードするとマウスホバー時の設定やキャプションが設定可能なようです。

ショートコードを使用して表示

さて、設定が終わったのでショートコードを使って表示していきたいと思います。

サイト上部のタブから「Display Your Feed」を選択するとショートコードが出てきますのでこちらで表示が可能です。
ちなみにこちらのショートコードでも引数で上記でした設定を変更することができます。

今回はサイドバーに表示したいのでテーマファイルに直接書き込みます。
テーマファイルからショートコードを実装するコードは下記のようになります。

これでインスタグラムのフィードを表示することができました。
とっても簡単でしたね!

ずっと読み込み状態で表示されない場合の対処法

ここまでちゃんと記事通りやったのにずっとぐるぐるしてて表示されないんだけどサイアク。という方、安心してください。

おそらく表示されない原因はAjaxを使っているテーマを使用しているかワードプレス標準のJQueryの読み込みを停止してオリジナル又は外部JQueryを読み込んでいる場合です。
そんなときはConfigureタブから下記画像の項目を探してチェックを付けて保存してください。

きっと表示ができるようになっているかと思います。

以上、Instagram Feedプラグインの使い方のご紹介でした。

FB Comment