今回は、Instagramのタイムラインをサイトに表示させる方法をご紹介させていただきます。
プラグイン「Jetpack」を利用しての方法となりますので、誰での比較的簡単に表示させることができると思いますのでInstagramのタイムライン表示でお悩みの方はご一読ください。
プラグイン「Jetpack」とは

Jetpackは、WordPressサイトのセキュリティ、パフォーマンス、マーケティングなどを強化する総合的なツールキットです。
Jetpackには無料版と有料版があり、無料版でも基本的な機能が利用できます。有料版では自動バックアップやマルウェアスキャンなどの高度な機能が追加されます。
便利な機能が多数揃っていますが、サイトのパフォーマンスに影響を与える可能性もあるため、必要最小限の機能のみを有効にすることが推奨されています。
セキュリティ機能 | 自動バックアップ マルウェアスキャン スパム防止 二段階認証 ブルートフォース攻撃防止 |
---|---|
パフォーマンス改善機能 | コンテンツ配信ネットワーク(CDN)による高速化 画像の遅延ロード CSSとJavaScriptの最適化 |
マーケティング機能 | 投稿の自動SNS共有 投稿スケジューリング サイト統計情報 |
マーケティング機能 | 投稿の自動SNS共有 投稿スケジューリング サイト統計情報 |
その他の機能 | 連絡フォーム 関連記事表示 広告表示 |
インストール方法
プラグイン「Jetpack」のインストール方法は以下の通りです。
WordPressの管理画面から「プラグイン」>「新規追加」に進み、検索窓に「jetpack」と入力して検索します。
検索結果から「Jetpack」を選び、「今すぐインストール」ボタンをクリック。

インストールが完了したら「有効化」ボタンをクリック

有効化すると設定を求められるので、「Jetpack のセットアップを完了する」をクリックしWordPress.comのアカウントをサイトを連携してください。

Jetpackのインストールには、WordPress.comのアカウントが必須ですアカウントがない場合は作成する必要があります。
あとはWordPress.comアカウントでログインし、サイトを連携すればOKです。
Instagramの表示方法
「ブロックを追加」をクリックし「Instagram」を検索。
Jetpackをインストールしていると「Instagram」と「最新のInstagram投稿」と表示されますので、「最新のInstagram投稿」を選択します。

ブロックの「Instagramに連携」をクリックします。

別ウィンドウでインスタとの連携の承認画面が表示されますので問題なければ「許可する」をクリック。

無事連携が完了するとタイムラインが表示されます。

設定とサンプル
ブロック設定ができる項目は下記の4つとなります。
簡単に説明しましょう。

投稿数 | Instagramの投稿数を1〜30個まで設定することが可能。 |
---|---|
カラム数 | カラム数(横並び)を1〜6列に変更することが可能 |
画像間隔 (ピクセル) | 画像の感覚を0〜50まで変更することが可能 |
モバイルでは縦に並べる | オンにすると、モバイルのときは1列で表示。 オフの場合はカラム数に合わせて画像が縮小。 |
サンプル
下記は実際に各設定を施した、私のInstagramの最新情報を表示させていますので画像をクリックするとInstagramの各ページへ繊維されます。
投稿数 – 8 / カラム数 – 4 / 画像間隔 (ピクセル) – 10 / モバイルでは縦に並べる – オン
メリット・デメリット
メリット
- 簡単にInstagramの最新情報が表示できる
- 設定が簡単
デメリット
- 写真のみの掲載のため「いいね!」はできない
- 写真にマウスが重なってもロールオーバーの設定がないためそのまま
(カスタムCSSを利用すれば回避可能) - 「モバイルでは縦に並べる」は1列のみ
まとめ
いかがでしたか?
今回はプラグイン「Jetpack」を利用して、Instagramのタイムラインを表示させる方法をご紹介させていただきました。
設定することが、ほとんど無いため初心者の方でもかなり簡単にInstagramのタイムラインを表示できるようになると思います。
Instagramのタイムラインを表示させたいけどAPIなどわからないというかた、既に「Jetpack」を利用していてタイムラインを表示させてみたいと言う方は一度試してみてはいかがでしょうか?
その他
「Jetpack」に関しては以前も記事にしておりますので興味のある方は御覧ください。
またInstagramのタイムラインを表示させる方法は他の記事でも紹介しておりますので、こちらもぜひ!