【インスタグラム連携】サムネイル表示でオシャレに連携する方法

インスタグラムの投稿をWordPressでサムネイル表示で連携したい場合に、

簡単に設定できるプラグイン「Smash Balloon Social Photo Feed」を紹介します。

プラグイン「Smash Balloon Social Photo Feed」

WordPressのサイト内にインスタグラムフィードを表示することができるプラグインです。

この界隈では一番有名で安定感のあるプラグインになります。

特徴
・インスタグラムアカウントとの連携が簡単
・ショートコードを入力で任意の場所にインスタグラムの投稿が表示可能
・サムネイル表示でレイアウトの調整も簡単

インストールからの手順

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

新規追加画面の画面右上の「プラグイン検索」の枠に、

Smash Balloon Social Photo Feed

と入力またはコピーして貼り付けてください。

すると下記枠に出てくるので、「今すぐインストール」をクリックしてインストールします。
※似た名称でSmash Balloon Social Post Feed とは違うので注意ください。

「今すぐインストール」をクリックするとインストール後、
「有効化」に表示が変わりますので「有効化」をクリックします。

インスタグラムアカウントと連携する

今操作されているパソコンで、

表示させたい対象のインスタグラムアカウントに、事前にログインしておく必要があります。

インスタグラムログイン画面:https://www.instagram.com

ログインが完了しましたら、

再びWordPressの管理画面から、「Instagram Feed」をクリックします。

そして表示された画面の「青いボタン」をクリックすると、
インスタグラムアカウントとの連携設定画面へのウィンドウが開きます。

基本英語表記のプラグインですが、環境次第では日本語に変換(翻訳機能)して表示する事も可能です。

アカウントタイプを選択し、「Login with Instaguram」をクリックします。
※ほとんどの方は「Personal」で良いです。

下記が同じ画面の日本語訳です。

インスタグラムのログイン画面が表示されたらログインします。

接続を「許可します」をクリックします。

「このアカウントを接続する」をクリックします。
(英語表示の場合は「Connect This Account」をクリックします。)

紐付けしたいインスタグラムのアカウント名が表示されているかを確認して下さい。
(赤ラインの部分に表示されます)

ここまでの設定でインスタグラムアカウントの接続は完了です。

これでサイト内にインスタグラムのフィードを表示する準備が出来ました。

次にインスタグラムのフィードを表示させる方法をご紹介していきます。

インスタグラムフィードを表示させる方法

サイト内に表示する設定をします。

「Instagram Feed」内の「3.フィードの表示(英語:3.Display Your Feed)」のタブを開き、

下記の画像のオレンジ枠で囲ったショートコードをコピーします。

ショートコード: [instagram-feed]

先程のコピーしたショートコードを任意の箇所(投稿内や固定ページ内)に貼り付けると、
インスタグラムのサムネイル投稿が表示されるという仕組みです。

上記のように固定ページや投稿にべたっとコードを貼ると、

公開ページでは下記のようにサムネイル表示されています。
※編集画面では表示されないため、プレビュー表示して確認ください。

フィードの表示枚数や表示列など調整方法

初期設定での表示される「写真の数」や「列の数」を変更したい場合、

「ダッシュボード」→「Instagram Feed」内の「2.カスタマイズ(英語:2.Customize)」タブより変更可能です。

「レイアウト」の「写真の数」や「列の数」で表示枚数を調整することが出来ます。
変更した場合は必ず変更完了後に「変更を保存」するをクリックして下さい。

トップページのメイン画面、サイドバー、フッターエリアなど
横への表示枚数や縦列の数は、表示されたい画面幅によって調整ください。

その他にも調整出来る細かい機能がありますので慣れてきたら色々と試してみて下さい。

※下記の例ですと横に4枚の写真(4列表示)が並び、5行分(全20数/4列=5行)表示されるといったイメージです。

 

以上がインスタグラムとWordPressのよりオシャレに魅せる連携方法でした。

 

いつでも無料相談が可能 in 名古屋栄

当社が運営する名古屋栄のコワーキングスペースへご来社頂く形で随時HPに関する無料相談が可能です。
当社ではネット環境やパソコンはじめ、各種ご説明資料や制作実積を整えており、お客様の大切な時間を無駄にしないよう、迅速な対応を心がけております。
そのためご来店時にはHPに関するご不明点やご要望だけお持ちいただければ大丈夫です。まずは気軽にお問い合わせください。