【2020年11月】WordPressでインスタグラムのギャラリーを表示する方法

【2020年11月】WordPressでインスタグラムのギャラリーを表示する方法 WordPress

こんにちは、mickです。

WordPressでインスタ(Instagram)のギャラリーを表示する方法を紹介します。

ここで紹介する方法使えば、投稿や固定ページだけでなく、ウィジェットにも簡単にインスタのギャラリーを追加することができます。

WordPressにインスタのギャラリーを表示する方法

WordPressにインスタのギャラリーを表示するのは、プラグインを使うのが簡単。

プログラミングの知識がなくても簡単にできます。

ただひとつ、必要なスキルがあります。

それはーー

中学生レベルの英語力

理由は、これから紹介するプラグインが日本語に対応していないためです。

Google Photosの写真も表示する設定ができるような高性能なプラグインである分、日本語に対応していないのが残念。

プラグインの英語がわからなくても大丈夫 

プラグインの英語がわからなくても大丈夫です。

これから画像つきで、ウィジェットにインスタのギャラリーを表示する方法をここで紹介します。

具体的な方法:Photonic Gallery プラグインを使う

WordPressでインスタのギャラリーを表示するなら、Photo Galleryプラグインがオススメ。

正式には「Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others」という長い名前です。

理由は、インスタだけでなくフリッカーやGoogle Photosなどいろいろな画像サービスをWordPressに表示することができるようになるから。

ここでは、インスタを表示する機能に焦点を当てます。

Photonic Gallery プラグインの使い方

Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others
Galleries on steroids! A stylish lightbox & gallery plugin for WP, Flickr, SmugMug, Google Photos, Zenfolio & Instagram photos and videos.

早速、Photonic Gallery プラグインを使ってWordPressにインスタのギャラリーを表示していきます。

次の流れで作業は進みます。

  1. Photonic Gallery プラグインのインストールと有効化
  2. インスタを使うための認証トークンをゲット
  3. WordPressのウィジェットにインスタのギャラリーを表示

「トークン」というのは、いわゆる「鍵」だと思ってください。

Photonic Gallery プラグインは、この「鍵」を使ってインスタから画像を取ってきてくれます。

Photonic Gallery プラグインのインストールと有効化

まずはPhotonic Galleryをインストールして有効化します。

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

「プラグイン」 > 「新規追加」 > 「検索:Photonic」

「Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos & Others」を「インストール」クリックしてインストール開始。

Photonic Gallery をインストール
Photonic Gallery をインストール

プラグインを有効化

インストールが終わったら、そのまま「有効化」をクリックして有効化します。

Photonic Gallery を有効化
Photonic Gallery を有効化

これでPhotonic Galleryを使う準備ができました。

インスタを使うための認証トークンをゲット

早速、Photonic Galleryを使ってWordPressにインスタのギャラリーを表示していきます。

インスタの認証トークン

Photonic Galleryがインスタにアクセスするのに必要な「認証トークン」の設定が最初に必要です。

「WordPressメニュー」>「Photonic」>「Authentication」

項目「Instagram」にある「Login and get Access Token from Instagram」をクリック。

Login and get Access Token from Instagram から Instagram のトークンを取得しにいく
Login and get Access Token from Instagram から Instagram のトークンを取得しにいく

インスタにログイン

インスタにログインします。

Instagram にログインする
Instagram にログインする

場合によって「ログイン情報を保存しますか?」とメッセージがでます。
その場合、ここでは「後で」をクリック。

ログイン情報の保存は「後で」
ログイン情報の保存は「後で」

Photonic Galleryのアクセスを「承認」

Photonic Galleryがインスタにアクセスすることを「承認」します。

プラグインがInstagramにアクセスすることを承認する
プラグインがInstagramにアクセスすることを承認する

インスタからトークンを取得する

インスタからトークンを取得するステップが始まります。

「Obtain Tokens」をクリックしてトークンを取得です。

トークンを取得する
トークンを取得する

インスタから長期トークンを取得する

最初に取得したトークンは一時的なトークン(1時間程度で失効する)です。

これでは実際には使えない。

そこで、「Obtain Long-Lived Tokens」をクリックして長期で使えるトークンを取得です。

長期トークンを取得する
長期トークンを取得する

長期トークンが発行

インスタが長期トークンが発行しました。

長期トークンは、非常に長い文字列です。
私のときは「146文字」でした!

ここで注意!

必ず「this link」をクリックして次のページに行きます。

もしそうしなかったのなら、同じ手順でここまできて「this link」をクリックします。

私はここで「this link」をクリックしなかったので失敗した経験があります。

トークンを保存

WordPressのPhotonic Galleryの「Authentication」に戻ってきます。

「Save Token」をクリックしてトークンを保存・設定します。

「Authentication」に戻ってきてくるので「Save Token」をクリックしてトークンを保存・設定する
「Authentication」に戻ってきてくるので「Save Token」をクリックしてトークンを保存・設定する

Instagramの設定

画面が移動して「Instagram」の設定に移動します。

「Instagram Access Token」に文字が入っていることを確認します。

取得したトークンが設定してあることを確認する
取得したトークンが設定してあることを確認する

設定を保存

画面一番下にある「Save page “Instagram settings”」をクリックしておしまい。

これまでの設定を保存する
これまでの設定を保存する

おつかれさまでした。

WordPressのウィジェットにインスタのギャラリーを表示

さっそくインスタのギャラリーをウィジェットに追加していきます。

ウィジェットにPhotonic Galleryが追加

「WordPressメニュー」>「外観」>「ウィジェット」

ここに新しい項目「Photonic Gallery」が増えています。

ウィジェットに「Photonic Gallery」が増えている
ウィジェットに「Photonic Gallery」が増えている

フッター右に追加

今回は、フッターの右側に追加したいので「フッター右」を選択します。

Photonic Galleryをウィジェットとして追加
Photonic Galleryをウィジェットとして追加

ギャラリーの設定

ウィジェットの「フッター右」に「Photonic Gallery」ができているのでここから設定をします。

Photonic Gallery の設定を開始する
Photonic Gallery の設定を開始する

「Choose Gallery Source」で「Instagram」を選択

「Choose Gallery Source」で「Instagram」を選択します。

Instagram を選んで Next
Instagram を選んで Next

「Next >」をクリックして次へ。

「Choose Type of Gallery」で表示の仕方を選択

表示方法には、次の3つがあります。

  1. Single Photo
    • 「画像を1枚選んで表示」
  2. Photo in a Post
    • 「複数投稿の写真を選んで表示」
  3. Multiple Photos
    • 「ギャラリーを表示」

「Photo in a Post」は少しわかりにくいですね。
インスタで1回の投稿で複数の写真を選んだ投稿を選ぶときに使います。

今回は、ギャラリーを表示するので「Multiple Photos」を選択します。

Multiple Photos を選んで Next
Multiple Photos を選んで Next

「Next >」をクリックして次へ。

「All your Photos」で複数投稿の写真の表示の仕方を選択

さらに、複数投稿の写真の表示について設定します。

  1. Show first photo
    • 「複数写真は最初の1枚だけ表示」
  2. Show all photos
    • 「すべての写真を表示」

今回は、すべての写真をみせたいので「Show all photos」を選択します。

Show all photos を選んで Next
Show all photos を選んで Next

「Next >」をクリックして次へ。

「Pick your Layout」で写真の表示レイアウトを決定

写真の表示レイアウトは6つから選べます。

  • Square Grid
  • Circular Icon Grid
  • Justified Grid
  • Masonry
  • Mosaic
  • Slideshow

今回は、一番シンプルは「Square Grid」を選択します。

Square Grid を選んで Next
Square Grid を選んで Next

「Next >」をクリックして次へ。

「Configure Your Layout」で詳細を決定

最後に表示のさらに細かい設定を決定しておしまいです。

  1. Number of columns in output
    • 「1行に表示する画像の枚数」
  2. How do you want the title?
    • 「タイトルの取得方法」
  3. Number of photos to show
    • 「一度に表示する画像の数」
  4. “More” button text
    • 「Moreボタンのテキストを変更」
  5. “Show Gallery” button text
    • 「Show Galleryボタンのテキスト変更」
  6. Media to Show
    • 「画像または動画またはその両方の表示を選択」

今回は、1行に表示する画像を「3」枚。

残りはデフォルトのままにしています。

各種設定をして Next
各種設定をして Next

「Next >」をクリックして次へ。

「Your shortcode」で準備が完了

WordPressにインスタのギャラリーを表示する設定が完了です。

Insert Gallery で設定が完了
Insert Gallery で設定が完了

「Insert Gallery」で設定が終わります。

最後は「保存」しておしまい
最後は「保存」しておしまい

最後に「保存」しておしまいです。

表示を確認

WordPressでインスタのギャラリーが表示できていたらOK。

Photonic Gallery プラグインでWordPressにインスタグラムのギャラリーを表示した
Photonic Gallery プラグインでWordPressにインスタグラムのギャラリーを表示した

おつかれさまでした。

トークン(認証)を削除する方法

最後に取得したトークン(認証)を削除する方法を紹介します。

Photonic Gallery プラグインを使わなくなったときやWordPressとインスタグラムの連携の調子が悪いときに使います。
設定をやり直したいときなどですね。

Webブラウザのインスタグラムから削除する

インスタグラムにChromeなどのWebブラウザでログインしてトークンを削除します。

「設定」>「アプリとウェブサイト」

「Photonic WordPress Plugin」の項目にある「削除」をクリックすればOK。

Webブラウザのインスタグラムからトークンを削除する
Webブラウザのインスタグラムからトークンを削除する

インスタグラムのアプリから削除する

インスタグラムのアプリからトークンを削除します。

「設定」>「セキュリティ」>「アプリとウェブサイト」>「アクティブ」

「Photonic WordPress Plugin」の項目にある「Remove」(削除)をクリックすればOK。

インスタグラムのアプリからトークンを削除する
インスタグラムのアプリからトークンを削除する

まとめ。

WordPressでインスタグラムのギャラリーを表示する方法を紹介しました。

WordPressからインスタグラム。
インスタグラムからWordPress。

双方向から集客を狙うことできるようになりました。

WordPressにインスタのギャラリーを表示するのは簡単。
Photonic Gallery プラグインを使えばプログラミングの知識がなくてもできます。

これで表示が日本語に対応していれば、もっとたくさんの人が利用しやすくなるんですが。
Photonic Gallery プラグインは更新が続いています。日本語化、期待したいです。

では、みなさんの助けになれば嬉しいです。

初稿 2020/11/17

タイトルとURLをコピーしました