「Jetpack」を利用してInstagramのタイムラインをサイトに表示させてみた。

WordPress

今回は、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に連携」をクリックします。

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

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

私の場合何度やってもうまく連携することが出来ずに進行途中で「400 Session Invalid」と表示されることがありましたが、一度「Jetpack」を無効化してから、もう一度 有効化することで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のタイムラインを表示させる方法は他の記事でも紹介しておりますので、こちらもぜひ!

タイトルとURLをコピーしました