ソーシャルメディアの中で、Instagram（インスタグラム）ユーザーはかなり増えていますね。
写真メインの投稿でインスタ映えするフォトジェニックな写真は、世界観を伝える方法として人気なSNSの1つです。
最新トレンドを知る1つの情報手段として、Instagramを使われることも多くなり、Instagramにアップされた写真をもとに休日の出かける場所を決めるなんてことも当たり前になってきました。
今日は、WordPressとInstagramを連携する方法をご紹介したいと思います。
WordPressと連携することで、ブログ・サイト経由でフォロワーを増やすことも可能になるので、知っておきたい設定方法です。
目次
InstagramのフィードをWordPressに反映させる
今回は、Instagramで投稿した写真や動画が表示されるフィードをWordPressに連携させる方法をご紹介します。
Instagramのフィードとは運用しているアカウントのプロフィールページのところで、プロフィールと最新の写真のギャラリーが表示されている箇所のことを言います。
画像はPC版のInstagramの表示ですが、このフィードをWordPressサイトに埋め込み反映させることができます。WordPressとInstagramを連携したい方におすすめの機能です。
WordPressプラグイン「Instagram Feed」
今回利用するプラグインは「Instagram Feed」です。複数のインスタグラムアカウントの連携設定が可能なほかに、カスタマイズ制も優れいて使いやすいプラグインの1つです。
プラグインの新規追加から「Instagram Feed」と検索しましょう。
※検索ヒットしたプラグインは「Instagram フィード」となっていますがこれで検索するとでてこないので、「Instagram Feed」と検索しましょう。
Instagram Feedと書いているプラグインは複数あるので、間違わないようにインストールして、プラグインを有効化させましょう。
Instagramからの認証設定
プラグインがインストールされていると、左メニューの下部に「Instagram Feed」のプラグインが追加されています。
Instagram Feedのプラグインを開いたらまず設定するのが、InstagramからWordPressで利用することの認証を取る必要があります。
「Log in and get my Access Token and User ID」と表示されている箇所をクリックし、Instagramの認証をします。
Instagramのメディア情報とプロフィール情報のアクセス許可をWordPressのプラグインが受け取るとのことが書かれているので、問題がなければ「Authorize（認証）」を選択します。
認証が完了するとAccess IDとTokenが作られます。
この情報を、コピーしてInstagram Feedの入力欄にペーストします。完了したら情報を保存してInstagramとWordPressの連携は完了します。
プラグイン「Instagram Feed」の設定
認証が完了したら次に行うのが、Instagram Feedのプラグイン設定です。細かに表示方法の設定ができるようになっているので、その設定方法を見ていきましょう。
まずは、Customize機能に移動して表示の設定を行っていきます。
カスタマイズ設定
まずは、読み込まれたInstagramのフィードが表示される横幅・縦幅をしていすることができます。
特にこだわりがなければ、「1Width of Feed」を「100%」にしておけばいいでしょう。背景色はBackground Colorで変更することができます。
Instagram Feedの写真の表示設定
Photosでは、Instagram Feedの写真の表示設定ができます。
Sort Photos By：写真の上からの並び順（表示順）を指定できます。
Number of Photos：表示させる写真の数を指定できます。
Number of Columns：コラムの数を指定できます。4と指定すると上から4行写真が並びます。
Image Resolution：写真が表示されるサイズを指定できます。
Padding around Images：写真の間のピクセル数を指定できます。
好みに合わせて後から変更することができるので、表示させながら調整させてみましょう。
ヘッダーの設定
読み込んだInstagramのフィードでヘッダーを表示させうかを指定でき、テキストカラーの変更が可能です。
ヘッダーを表示させるにチェックをいれるとInstagramアカウントのプロフィール箇所が表示されるようになります。
もっと見るボタンの設置
Instagram Feedは写真の表示設定で、指定した数の写真のみが表示されますが、Load More Buttonの設定をオンにしておくことで、ユーザーが他の写真を閲覧したい時にWordPressブログ・サイト上で他の写真を読み込むことができます。
Button Textで、表示のテキスト名を決めることができます。
設定すると画像のようなボタンが表示されます。
Instagramのフォローボタンの設置
WordPressで運用しているブログやサイト経由で、Instagramのサイトを閲覧しフォローをしてくれるユーザーがいるかもしれません。
Instagram Feedでは、Instagramのフォローボタンを設置ができます。
Show the Follow buttonにチェックをいれて、背景色・テキスト色・テキストボタンの文字を指定して設定ができます。
WordPress上には画像のように表示されます。
CSSやJavaScriptの設定も可能。
これは上級者向けのせっていになりますが、CSSやJavaScriptの設定もプラグイン上でできるのでデザインの変更もできます。
もともとの機能で、綺麗にInstagramのフィードを表示させることがないので特別編集する必要はないかなと思います。
これでひと通りの表示設定は完了です。
WordPressに設定したInstagram Feedを表示。
設定したInstagramフィードを表示させるのは、簡単でショートコードを該当の記事や投稿に埋め込むだけです。
プラグイン設定の「Disyplay Your Feed」を選択するとショートコードが表示されています。
このショートコードをWordPressの記事や固定ページに設定します。
設定が完了して、投稿ページを見てみるとInstagram Feedで設定した内容が表示されてくれます。
一度表示をさせてみて、変更したい箇所があればカスタマイズ設定で修正ができます。Instagramに写真や動画を投稿すればこのプラグインで表示されるフィードも自動的にアップデートされていきます。
まとめ：ブロガーやプロモーションへの利用にInstagram Feedを使うのはあり。
Instagramを活用してフォロワーや読者を増やしたいというブロガーやInstagramでプロモーションをしながらWordPressサイトを使ってマーケティングをしている企業アカウントなんかはWordPressとInstagramを連携させるのはありでしょう。
全ての業種に効果的かというとそうではないですが、Instagramは写真1枚で世界観を伝えることができるメリットがあるのでInstagramを活用していきたい人はWordPressとの連携を試してみることをおすすめします。
