wordpressでinstagramと連携してgalleryを作る方法。プラグインInstagram Feedの設定方法

wordpressでinstagramと連携してgalleryを作る方法。プラグインInstagram Feedの設定方法 WordPressプラグインの設定や使い方

【悩み】

  • インスタグラムでよく写真を撮るけれど、何かに生かせないか
  • ギャラリーページが作りたいけれど写真のアップロードとか大変そう
  • Instagram Feedを利用したいのだが、日本語化がされていないので諦めた

 

【解決】

Instagram Feedというプラグインを利用する

最初に設定さえすれば、後はInstagramに写真を投稿するだけで簡単にギャラリーページが作成できます。

 

日本語化はされていませんが、インストールから表示まで、迷わずできるように、このページで解説します。

 

【こんな人におすすめです】

  • Instagramによく写真を投稿していて、ブログを読んでいる人達にも見せたい
  • 写真のアップロードの面倒なく、ギャラリーページを作成したい
  • ブログの記事とは別に、見栄えがいいページを作成したい

Instagram FeedとはWordPressと連携してギャラリーページを作れるプラグイン

WordPressに連携させるSNSは、TritterやFacebook等がありますが、最近利用が増えているのがInstagram(インスタグラム)です。

 

写真を共有するのが主な目的で使われていますので、それをWordPress上でもギャラリー風に設置するのが、Instagram Feedです。

 

「Instagram Feed」の使い方。ギャラリーページを設置するまでの手順

1.「Instagram Feed」のインストール

WordPressの管理画面から「1プラグイン→2新規追加」をクリックします。

 

「Instagram Feed」と入力します

「今すぐインストール」をクリック

その後の「有効化」もクリックします。

 

これでインストールは完了です。

2.Instagramアカウントとの連携設定

 

管理画面のインストールして出てきた「Instagram Feed」をクリックします。

 

タブのConfigureをクリックします。

で、アカウントと連携をさせる青いボタンをクリックします。

 

Instagramのログイン画面が出てきます

A ユーザーネームかメールアドレスでログインするか

B FacebookのIDを利用してログインするか

C 登録していなければSign upからアカウントを作成します

 

「Instagram Feed」との連携でアクセス事項への承認を要求してきますので、OKでしたら、「Authorize」をクリックします。

 

管理画面に戻って、青いボタンの横の「Button not working?」をクリックします。

 

アクセストークンを取得します。

 

Instagramと接続するたびにログインIDとパスワードのやり取りをするにはセキュリティーの問題があります

最初に認証することでアクセストークンを取得し、その後はアクセスを利用します。

 

一番下の青いボタンをクリックしてください。

 

アクセストークンが表示されますので、コピーをします。

管理画面に戻ります。

  1. 白いボタンをクリックします。アクセストークンを入力するボタンが出てきます
  2. コピーしたアクセストークンを張り付けて、青いボタンをクリックします。

 

ショートコードをコピーする

①白いボタンをクリックすると、②ショートコードが出てきますので、[から}までをコピーしておきます。

このショートコードとは、ページにInstagramを表示させるためのコードです。

 

3.Instagramを表示させるページを作って公開する

管理画面の

  1. 固定ボタンをクリック
  2. 新規追加をクリックします。

 

 

  1. タイトルを入力します。
  2. 〇+をクリックします。ブロックのメニューが出てきますので、その中の
  3. ウィジェットをクリックします。その中のブロック
  4. ショートコードをクリックします。

 

  1. 出てきた入力欄に、さきほどコピーしたショートコードを貼りつけます。
  2. プレビューをクリックします。

 

Instagramに投稿した写真が表示されました。

 

レイアウトはテーマによって若干違ってきます。

今後は、Instagramに投稿した写真が自動的に表示されるようになります。

4.表示のカスタマイズ設定

  1. タブの「Customize」をクリックします。
  2. 表示する領域の横幅
  3. 表示する領域の縦幅を%かピクセル(px)で指定します。
  4. 背景色 ページ上の色との兼ね合いを考えて決めましょう。
  5. 一覧で表示する写真の数を指定します。
  6. 一行に表示する写真の数(カラム数)を指定します。
  7. 写真ごとの隙間のサイズをピクセル(px)で指定します。
  8. カラム数をスマホ等でも⑥で指定する数にする場合はチェックを入れます。チェックを入れないと、画面幅にしたがってカラム数が減ります。
  9. 変更をした場合は、「変更を保存」をクリックします。

 

 

  1. 写真の並び順 新しい順かランダムが選択できます。
  2. 写真解像度 Auto-detectが推奨です。
  3. ヘッダー(アカウント名、プロフィール写真、自己紹介文等)を表示させるか チェック
  4. ヘッダーのサイズ 選択
  5. 自己紹介文を表示させるか チェック
  6. ヘッダー文の色 選択
  7. 変更をした場合は「変更を保存」をクリック

 

 

  1. もっと見るボタンを表示させるか チェック
  2. もっと見るボタンの背景色 選択
  3. もっと見るボタンの文の色 選択
  4. もっと見るボタンの内容 入力
  5. フォローボタンを表示させるか チェック
  6. フォローボタンの背景色 選択
  7. フォローボタンの文の色 選択
  8. フォローボタンの内容 入力
  9. 変更をした場合は「変更を保存」をクリック

 

 

Enable Backup Cachingのチェックは必ず入れます。

 

結論 Instagram Feed は無料版でも十分使えます

以上で表示関係の設定は完了です。

有料版のみの設定及び必要がないと思われる部分は省略しました。

 

Instagramと連携させて、画像たっぷりのブログ記事にすると、読者の満足度も上がってきます

 

基本は、文字のみの記事ではなく、画像をふんだんに使った記事を作っていきましょう。

 

以上、wordpressでinstagramと連携してgalleryを作る方法。プラグインInstagram Feedの設定方法でした

 

感想・コメントをお気軽にどうぞ