【悩み】
- インスタグラムでよく写真を撮るけれど、何かに生かせないか
- ギャラリーページが作りたいけれど写真のアップロードとか大変そう
- Instagram Feedを利用したいのだが、日本語化がされていないので諦めた
【解決】
Instagram Feedというプラグインを利用する
最初に設定さえすれば、後はInstagramに写真を投稿するだけで簡単にギャラリーページが作成できます。
日本語化はされていませんが、インストールから表示まで、迷わずできるように、このページで解説します。
【こんな人におすすめです】
- Instagramによく写真を投稿していて、ブログを読んでいる人達にも見せたい
- 写真のアップロードの面倒なく、ギャラリーページを作成したい
- ブログの記事とは別に、見栄えがいいページを作成したい
Instagram FeedとはWordPressと連携してギャラリーページを作れるプラグイン
WordPressに連携させるSNSは、TritterやFacebook等がありますが、最近利用が増えているのがInstagram(インスタグラム)です。
写真を共有するのが主な目的で使われていますので、それをWordPress上でもギャラリー風に設置するのが、Instagram Feedです。
「Instagram Feed」の使い方。ギャラリーページを設置するまでの手順
１．「Instagram Feed」のインストール
WordPressの管理画面から「１プラグイン→２新規追加」をクリックします。
「Instagram Feed」と入力します
「今すぐインストール」をクリック
その後の「有効化」もクリックします。
これでインストールは完了です。
２．Instagramアカウントとの連携設定
管理画面のインストールして出てきた「Instagram Feed」をクリックします。
タブのConfigureをクリックします。
で、アカウントと連携をさせる青いボタンをクリックします。
Instagramのログイン画面が出てきます
A ユーザーネームかメールアドレスでログインするか
B FacebookのIDを利用してログインするか
C 登録していなければSign upからアカウントを作成します
「Instagram Feed」との連携でアクセス事項への承認を要求してきますので、ＯＫでしたら、「Authorize」をクリックします。
管理画面に戻って、青いボタンの横の「Button not working?」をクリックします。
アクセストークンを取得します。
Instagramと接続するたびにログインIDとパスワードのやり取りをするにはセキュリティーの問題があります
最初に認証することでアクセストークンを取得し、その後はアクセスを利用します。
一番下の青いボタンをクリックしてください。
アクセストークンが表示されますので、コピーをします。
管理画面に戻ります。
- 白いボタンをクリックします。アクセストークンを入力するボタンが出てきます
- コピーしたアクセストークンを張り付けて、青いボタンをクリックします。
ショートコードをコピーする
①白いボタンをクリックすると、②ショートコードが出てきますので、[から}までをコピーしておきます。
このショートコードとは、ページにInstagramを表示させるためのコードです。
３．Instagramを表示させるページを作って公開する
管理画面の
- 固定ボタンをクリック
- 新規追加をクリックします。
- タイトルを入力します。
- 〇＋をクリックします。ブロックのメニューが出てきますので、その中の
- ウィジェットをクリックします。その中のブロック
- ショートコードをクリックします。
- 出てきた入力欄に、さきほどコピーしたショートコードを貼りつけます。
- プレビューをクリックします。
Instagramに投稿した写真が表示されました。
レイアウトはテーマによって若干違ってきます。
今後は、Instagramに投稿した写真が自動的に表示されるようになります。
４．表示のカスタマイズ設定
- タブの「Customize」をクリックします。
- 表示する領域の横幅
- 表示する領域の縦幅を%かピクセル(px)で指定します。
- 背景色 ページ上の色との兼ね合いを考えて決めましょう。
- 一覧で表示する写真の数を指定します。
- 一行に表示する写真の数(カラム数)を指定します。
- 写真ごとの隙間のサイズをピクセル(px)で指定します。
- カラム数をスマホ等でも⑥で指定する数にする場合はチェックを入れます。チェックを入れないと、画面幅にしたがってカラム数が減ります。
- 変更をした場合は、「変更を保存」をクリックします。
- 写真の並び順 新しい順かランダムが選択できます。
- 写真解像度 Auto-detectが推奨です。
- ヘッダー(アカウント名、プロフィール写真、自己紹介文等)を表示させるか チェック
- ヘッダーのサイズ 選択
- 自己紹介文を表示させるか チェック
- ヘッダー文の色 選択
- 変更をした場合は「変更を保存」をクリック
- もっと見るボタンを表示させるか チェック
- もっと見るボタンの背景色 選択
- もっと見るボタンの文の色 選択
- もっと見るボタンの内容 入力
- フォローボタンを表示させるか チェック
- フォローボタンの背景色 選択
- フォローボタンの文の色 選択
- フォローボタンの内容 入力
- 変更をした場合は「変更を保存」をクリック
Enable Backup Cachingのチェックは必ず入れます。
結論 Instagram Feed は無料版でも十分使えます
以上で表示関係の設定は完了です。
有料版のみの設定及び必要がないと思われる部分は省略しました。
Instagramと連携させて、画像たっぷりのブログ記事にすると、読者の満足度も上がってきます
基本は、文字のみの記事ではなく、画像をふんだんに使った記事を作っていきましょう。
以上、wordpressでinstagramと連携してgalleryを作る方法。プラグインInstagram Feedの設定方法でした
感想・コメントをお気軽にどうぞ