Sambushi編集部です！
「Instagramのフィード投稿をコンテンツにも使いたい」
Webサイトを運営していると、Instagram（インスタグラム）のフィード投稿を活用して、コンテンツを充実できたらいいな、と思う方もいるのではないでしょうか？
WordPress（ワードプレス）でWebサイトを運営している場合、フィード投稿の埋め込みは「プラグインを使う方法」と「APIを使う方法」の2パターンがあります。
今回はそれぞれのフィードの埋め込み方と、おすすめのプラグインについて解説していきます。
WordPressのプラグインで埋め込む方法
WordPressのプラグインを使って埋め込む方法は、手軽にかつ簡単にできるため、IT初心者の方におすすめです。
最初に、プラグインを使うメリットとデメリットを確認しておきましょう。
プラグインを使用するメリット
プラグインを使用することのメリットは、難易度の高いプログラミングの知識がなくても埋め込むことができるということでしょう。
WordPressに使用したい機能を追加するとなると、HTML・PHP・JavaScriptなどのプログラミングの知識が必要です。
必要な機能が備わっているプラグインを導入すると、プログラミングの知識がない方でも簡単な操作でフィード投稿の埋め込みができます。
プラグインの種類によって異なりますが、ショートコードを書き込むだけでフィード投稿を追加できるものもあるため、コンテンツ編集時の時間短縮にも繋がるでしょう。
プラグインを使用するデメリット
プラグインを使用することのデメリットは、WordPressにプラグインをインストールすることによってサイトの表示スピードが落ちる可能性があることがあげられます。
その他にも、複数のプラグインをインストールしている場合は、プラグイン同士が干渉するケースもあります。
フィード投稿でプラグインを使用する際は、不要なプラグインは事前に削除することがおすすめです。
埋め込む方法
プラグインの種類によって設定の細かな流れは異なりますが、おおまかな流れは次のとおりです。
- プラグインをインストールする
- Instagramアカウントの連携などを設定する
- レイアウトを調整する
- 投稿ページにショートコードを貼り付ける
なお、おすすめのプラグインは記事の後半で紹介します。
プラグインの種類によってそれぞれ特徴があるため、自分の使いやすいプラグインを選ぶ際の参考にしてみてください。
APIを使って埋め込む方法
続いてAPIを使って埋め込む方法をご紹介していきます。
Application Programming InterfaceInstagram（アプリケーション・プログラミング・インターフェース）の略語です。アプリケーションやソフトウェアらを複数つなぎあわせるインターフェース（異なる接点をつなぐ）のことを指しています。
APIを使って埋め込む方法は、Facebook社から用意されている「Instagram Graph（インスタグラムグラフ）API」か「Instagram基本表示API（Instagram Basic Display API）」の2種類のどちらかを使用して埋め込みます。
「Instagram Graph API」は、表示の設定だけ簡単に行えるものです。もう一つの「Instagram基本表示API（Instagram Basic Display API）」は、複雑な表示が可能となります。
APIを使用するメリット
APIを使って埋め込むことのメリットは、Webサイトの表示スピードに影響が出にくいことがあげられます。
また、複数の投稿を一括で埋め込むことも可能です。
APIを使用するデメリット
APIを使うデメリットは、設定が難しいことがあげられます。
アクセストークンと呼ばれるコードを取得したり、WordPressへ反映するためにコードをいじったりする必要があります。
HTMLやPHPなどのプログラミングの知識がない方にとっては、難易度が高く、設定に時間がかかる可能性も高いでしょう。
埋め込む方法
それでは、APIを使ってフィード投稿を埋め込む手順を解説します。
今回は、アクセストークン取得の処理に便利な無料ツール「API Query Maker」を活用した方法をご紹介します。
Facebookページの連携
APIを使用する際は、InstagramアカウントとFacebookページを連携させる必要があります。
まずは、Facebookページ側から設定していきましょう。
Facebookページの管理画面の「設定」→「Instagram」を選択し「アカウントをリンク」をクリックします。
連携させたいアカウントであることを確認してInstagramにログインします。
画面が切り替われば連携完了です。
Facebookアプリを作成する
続いて、Facebookアプリ「Facebook for Developers」にアクセスします。
右上にある「マイアプリ」をクリックして「アプリの作成」を選択しましょう。
「ビジネス統合の管理」を選択して「アプリ表示名」「メールアドレス」「アプリの目的」をそれぞれ設定したら「アプリを作成」をクリックしてください。
これでアプリの作成が完了しました。
アクセストークンを取得する
次は、フィード投稿の埋め込みをするために必要となるアクセストークンを取得しましょう。
Facebookアプリの管理画面の上部にある「ツール」から「グラフAPIエクスプローラー」をクリックしてください。
表示された画面の「アクセストークン」の下にある「Facebookアプリ」のアプリ名を確認し、「トークンの取得」から「ユーザーアクセストークンを取得」を選びます。
「許可を追加」の欄から「Events Groups Pages」と「Other」で次の9つを選択しましょう。
【Events Groups Pages】
- business_management
- pages_read_engagement
- pages_read_user_content
- pages_show_list
- pages_manage_ads
- pages_manage_metadata
【Other】
- instagram_basic
- instagram_manage_insights
- instagram_manage_comments
上部にある「Generate Access Token」をクリックすると、英数字で生成されたアクセストークンが表示されるため、コピーしてメモに残しておきます。
アプリの情報を取得する
先ほど表示されたアクセストークンの画面右上にある「マイアプリ」をクリックしてください。
画面左側にある「設定」→「ベーシック」を選択すると「アプリID」「app secret」が表示されます。
こちらの「アプリID」「app secret」の情報もメモに残しておきましょう。なお、「app secret」はデフォルトでは非表示となっているため「表示」をクリックしてください。
API Query MakerでInstagramのアクセストークンを取得
このあとの設定はアクセストークンを入力して取得する作業の繰り返しとなるため、作業の負担を減らすための無料ツール「API Query Maker」を使用します。
API Query Makerにアクセスして「ユーザーネーム」「Facebookページ名」「アプリID」「app secret」「ユーザーアクセストークン」を入力しましょう。
すべて入力できたら「InstagramプロアカウントID」と「アクセストークン」の2つのコードが表示されます。
取得したコードをWordPressのPHPやJavaScriptにコードを追加することで、Instagramのフィード投稿の埋め込みが完了します。
おすすめプラグイン4選
ここからは、Instagramのフィード投稿の埋め込みにおすすめなプラグインを4つ紹介します。
1. 10Web Social Feed for Instagram
「10Web Social Feed for Instagram」は、Instagramアカウントを複数登録できます。インストール数やレビュー数は多く人気のあるプラグインの一つです。
専門的なスキルは必要なく、WordPressを使うことができれば簡単に利用できます。
無料版でもレイアウトの変更はできますが、有料版の方がレイアウトのバリエーションが豊富です。
2. Feed Them Social
「Feed Them Social」は、Instagramだけでなく、Facebook・YouTube・Pinterestなど複数のSNSを埋め込むことが可能。
さまざまなSNSをWebサイトに活用したい方におすすめできる便利なプラグインです。ショートコードを使用してInstagramのフィード投稿を表示させるため、使い方もシンプルでわかりやすくなっています。
リンクボタンなども表示させたい箇所に設置でき、レイアウトやデザインも美しいことが特徴です。
3. InstaShow
「InstaShow」はプラグインではありませんが、InstaShowの公式サイトにアクセスして、変換したコードを埋め込むだけで簡単にInstagramのフィード投稿ができます。
WordPressに導入しない分、サイトが重くなるなどのデメリットを避けることが可能。プラグインを複数入れたくない方におすすめのツールです。
なお、使用する際はサイトのアカウント作成が必要となります。
4. Smash Balloon Social Photo Feed
「Smash Balloon Social Photo Feed」は、WordPressにインストールしてアカウント設定を行えばすぐに使えます。
使い方は、ショートコードを取得して貼り付けるだけのため、専門的な知識は必要ありません。
表示する画像の枚数やサイズ、ボタンやレイアウトなどはカスタマイズすることも可能なため、Webサイトの雰囲気にあわせることも可能です。
まとめ
以上、WordPressへInstagramのフィード投稿を表示する方法を「プラグインを使う方法」と「APIを使う方法」の2種類に分けて紹介しました。
APIを使って表示させるには設定に時間がかかり手間がかかります。PHPやJavaScriptなどのプログラミング知識も必要となるため、IT初心者にはハードルが高いといえるでしょう。
一方で、プラグインを導入すれば、専門的な知識がなくてもWordPressのWebサイトへ簡単にInstagramの投稿を表示できます。
短時間で手軽に手軽に表示させたいのであれば、プラグインを使う方法がおすすめです。
今回紹介した4つのプラグインを参考にして、目的や使い勝手などを踏まえた上で最適なプラグインを導入し、Instagramのフィード投稿を実現しましょう。
「Instagramの運用について知りたい」という方はこちらの記事をどうぞ
【成功事例紹介】企業Instagram運用7つのポイント