ウェブサイトにInstagramを表示させたり、投稿を連動させるベストな方法
InstagramをウェブサイトやWordPressに表示させたり、WordPressの記事を自動的にInstagramにも投稿させる方法など、Instagramの連携方法をご紹介します。
「ホームページにインスタグラムの写真を表示したい」
「ブログを投稿すると、インスタグラムにも自動で投稿したい」
と言ったケースは多いと思います。
ホームページとインスタグラムの連動についてベストな方法をご紹介いたします。
ホームページとインスタグラムの連動させる事前確認
SEOの影響
表示する枚数やキャッシュ機能、LazyLoadなどを利用することで、素早く表示させることができます。
instagramの写真を表示させることで、ホームページの表示速度が遅くなり、SEOへの影響を気にされる方もいますが、当社の事例や、海外の事例をみても影響はありません。
ただし、サイトスピードテストには影響するため、点数が低くなります。
導入方法の確認
インスタグラムの写真を表示させるにはFeed、またはAPIを利用することになります。
この場合「アクセストークン」や「認証」などの手続きが必要となります。最も手間がかからないのは認証による同期です。
アクセストークン、認証を必要としない方法もあります。
ただし、読み込みエラーの回数が若干多くなります。
いずれの方法もAPIやFeedなどを利用するため、インスタグラムの仕様が変われば、再設定が必要となる場合があります。
設置方法、運用方法も事前に確認する方が良いでしょう。
ハッシュによる表示はエラーが出やすい
インスタグラムのアカウントではなく、ハッシュが付いた写真を表示させる方法がありますが、表示エラーが出やすいです。
WordPressにInstagramを表示させる方法
WordPressにインスタグラムを表示させるには、プラグインを利用するのが手っ取り早いでしょう。
プラグインそれぞれに特徴があるので、実装したい要件にマッチしたプラグインを選ぶ必要があります。
ギャラリーページに向いているプラグイン
ストリートファッションなどの写真だけが並べられたギャラリーページや、固定ページにインスタグラムの写真を少し表示させたい時などに利用しやすいプラグインです。
10Web Social Photo Feed
設置にはアクセストークンが必要なります。複数アカウントの登録ができ、無料版でもレイアウトの選択や、lightboxによる表示などの機能が利用できます。
キャッシュ機能もありますが若干もっさりする場合もあります。
Instagram Journal
有料（20ドル）になります。グリッドレイアウトとスライダーの表示ができます。
LightBoxとGrid Wiewの機能があり、写真をサクサク表示させることができます。
複数のアカウントを利用できるマルチアカウント機能、ハッシュも複数設定が可能です。場所によるフィードによる表示も可能です。
Instagram Theatre
有料（16ドル）になります。キャッシュ機能も優れており、アカウント（複数アカウント可能）、ハッシュ、場所によるフィードによる画像を表示できます。LightBoxの機能もあり、写真をサクサク表示させることができます。
フッターなど全ページにインスタグラムを表示させたい時のプラグイン
全ページに表示させるためキャッシュ機能の性能が高く、表示速度が早いプラグインが最適です。
Instagram Feed
人気のあるプラグインで、アカウントの画像を表示する場合は、アカウントの認証をするだけで設定も簡単です。また、ハッシュの画像を表示するもことができます。
優れたキャッシュ機能で表示も早く、フッターやサイドバー等に表示させるには最適なプラグインです。
Social Slider Widget
こちらも高い人気のプラグインです。アカウントの画像（複数アカウント可能）や、ハッシュの画像を表示させることができます。アクセストークン不要のアカウント認証で簡単に設置できます。
レイアウトや、キャッシュ機能の他、リンク先のURLも設定できるため、画像から商品ページの誘導も可能になります。
WPZOOM Social Feed Widget
「CSSでレイアウトをカスタマイズしやすいシンプルなものでいいんだよ」というケースにお薦めのプラグインです。キャッシュ機能で表示も早いです。
設置にはアクセストークンの取得が必要となります。
GitHubでもコードが公開されており、フロントエンドの方には使いやすいプラグインです。
Insta Show
有料（49ドル）になります。codecanyouでもナンバー1のプラグインです。
レイアウトやキャッシュ、LazyLoadなどの機能も豊富です。
複数のSNSを表示させる事ができるプラグイン
インスタグラムの他に、複数のSNSを表示させたい時にはお奨めのプラグインです。
Feed Them Social
Facebook、Twitter、Instagram、Youtube、Pinterestなどの投稿表示を一つのプラグインで叶えてくれます。Woocommerceとの連携もできます。
JavaScriptでInstagramを表示させる方法
InstagramのFeedをJavaScriptで読み取って表示させる方法があります。
Instagram Feed masterを利用するのが良いでしょう。
JavaScript版 Instagram Feed master
Instagramのアクセストークンが必要になるためFacebookアカウントが必要になります。
オプションなどの説明は下記でご覧いただけます。
WordPressの投稿をInstagramにも投稿させる
記事を投稿すると、インタグラムにも写真と記事が投稿させたいことがあります。
記事とSNSを連動するプラグインを使います。
Blog2Social
設定や操作のクセが強いプラグインですが、無料でインスタグラムへの自動投稿が利用できます。
アクセストークンなども不要で、簡単にインスタグラムと連携して自動投稿できます。
無料版でもそれなりに使えますが、予約投稿などの豊富な機能を使う場合は有料版に移行する必要があります。
Nelio
このプラグインも無料でインスタグラムへの自動投稿を利用できます。
後発のSNS連動プラグインで機能も豊富です。
NextScripts
人気のあるNextScriptsは、有料（年間約4,000円）のサードパーティAPIを利用することで、インスタグラムへの自動投稿ができます。
Social Networks Auto-Posterの設定メニューまとめ
Revive Old Posts
SNS連動プラグインとして人気にあるRevive Old Postsも有料版（年間約9,000円）にすることでインスタグラムへの自動投稿ができます。
SNSを運用するリソースが不足している場合、自動投稿はかなり助かります。
自動投稿だけではなく、手動によるインタグラム投稿と自動投稿を組み合わせることで、フォロワーとのエンゲージメントも高めることができます。
