WordPressでサイドバーにInstagramを表示させるプラグインの「Smash Balloon Social Photo Feed」を紹介します。
下記のように私は運営しているブログでWordPressのサイドバーにInstagramを表示しております。ご紹介するプラグインを使うことで簡単にInstagramのタイムラインを表示することができます。
実際にInstagramを表示しているブログを確認したい方はこちらよりアクセスできます。
スマートフォンでご覧の方はスクロールすると画面の下部にInstagramが表示されていると思います。
このようにプラグインを使うことで自分の表示させたい部分にInstagramを表示させることができます。
プラグインのインストール
まずは、プラグインをインストールするためにWordPressの管理画面にログインします。
プラグインのインストールはとても簡単です。手順は以下の通りです。
- WordPressの管理画面のプラグインページから新規追加へ
- プラグイン名「Smash Balloon Social Photo Feed」を検索
- プラグインのインストールと有効化
インストールした後に「有効化」にすることを忘れないでください！
プラグインの初期設定
管理画面のタスクバーに「Instagram Feed」が追加されますので、こちらからプラグインの設定を行います。
管理画面の「Instagram Feed」→「すべてのフィード」を選択します。
「新規追加」をクリック
Select Feed TypeからUser Timelineを選択し「次へ」をクリック
「Login with Instagram」をクリックし、Instagramのアカウントでログインを行う。
下記の表示が現れたら「許可する」をクリックします。
ログインしたInstagramのアカウントが表示されていれば、プラグインの初期設定は完了です。
先ほど追加したInstagramアカウントを選択して「次へ」をクリックします。
次はプラグインのカスタマイズを行います。
プラグインのカスタマイズ
インストールしたプラグインのカスタマイズ方法を紹介します。今回は無料版で試せるカスタマイズを紹介します。有料版にすることでカスタマイズの幅が広がります。
アイコン画像の変更
「カスタマイズ」→「ヘッダー」をクリック
「カスタムアバターを使う」からアイコン画像をアップロードする
「保存」をクリック
レイアウトの変更
「カスタマイズ」→「フィードレイアウト」をクリック
サイトを訪れた端末によって表示するレイアウトの設定を変えることができます。
変更後は「保存」をクリック
Instagramをサイドバーに表示
ブログのサイドバーにInstagramを表示する方法を紹介します。
管理画面から「外観」→「ウィジェット」をクリック
「Instagram Feed」を「サイドバー」に追加
たったのこれだけでサイドバーにInstagramを表示することができます！！
実際に設定が反映されていることを確認してみましょう！
おまけ
スマートフォンからはサイドバーをクリックしないと見ることができません。
いちいちサイドバーをクリックしてInstagramを見ようと思う人なんて早々いません。
そのために、スマートフォンからの閲覧用にフッター（モバイル用）のウィジェットを使ってInstagram Feedを追加します。
今回はサイドバーやスマートフォン向けにフッターにInstagramを表示させる方法を紹介しました。
ウィジェットで簡単に設定できるのでサイドバー以外にもお好みの場所にInstagramを表示させることができますので、試してみてください。
コメント