「ホームページにインスタグラムの写真を表示したい」
「ブログを投稿すると、インスタグラムにも自動で投稿したい」
と言ったケースは多いと思います。

ホームページとインスタグラムの連動についてベストな方法をご紹介いたします。

ホームページとインスタグラムの連動させる事前確認

SEOの影響

表示する枚数やキャッシュ機能、LazyLoadなどを利用することで、素早く表示させることができます。

instagramの写真を表示させることで、ホームページの表示速度が遅くなり、SEOへの影響を気にされる方もいますが、当社の事例や、海外の事例をみても影響はありません。

ただし、サイトスピードテストには影響するため、点数が低くなります。

導入方法の確認

インスタグラムの写真を表示させるにはFeed、またはAPIを利用することになります。
この場合「アクセストークン」や「ユーザー認証」などの手続きが必要となります。最も手間がかからないのはユーザー認証による同期です。

いずれの方法もAPIやFeedなどを利用するため、インスタグラムの仕様が変われば再設定が必要となる場合があります。

設置方法、運用方法も事前に確認する方が良いでしょう。

ハッシュによる表示はエラーが出やすい

インスタグラムのアカウントではなく、ハッシュが付いた写真を表示させる方法がありますが、表示エラーが出やすいです。

WordPressにInstagramを表示させる方法

WordPressにインスタグラムを表示させるには、プラグインを利用するのが手っ取り早いでしょう。

プラグインそれぞれに特徴があるので、実装したい要件にマッチしたプラグインを選ぶ必要があります。

ギャラリーページに向いているプラグイン

ストリートファッションなど写真だけが並べられたギャラリーページや、固定ページにインスタグラムの写真を表示させたい時などに利用しやすいプラグインです。

10Web Social Photo Feed

設置にはアクセストークンが必要なります。複数アカウントの登録ができ、無料版でもレイアウトの選択や、lightboxによる表示などの機能が利用できます。
キャッシュ機能もありますが若干もっさりする場合もあります。

Demo

Instagram Journal

有料（20ドル）になります。グリッドレイアウトとスライダーの表示ができます。
LightBoxとGrid Wiewの機能があり、写真をサクサク表示させることができます。
複数のアカウントを利用できるマルチアカウント機能、ハッシュも複数設定が可能です。場所指定によるフィードによる表示も可能です。

Demo

Instagram Theatre

有料（16ドル）になります。キャッシュ機能も優れており、アカウント（複数アカウント可能）、ハッシュ、場所によるフィードによる画像を表示できます。LightBoxの機能もあり、写真をサクサク表示させることができます。

Demo

フッターなど全ページにインスタグラムを表示させたい時のプラグイン

全ページにインスタグラムの画像を表示させる場合は、キャッシュ機能の性能が高く、表示速度が早いプラグインが最適です。

Instagram Feed

人気のあるプラグインです。アカウントの画像を表示する設定もアカウントの認証をするだけで簡単です。また、ハッシュの画像を表示するもことができます。
キャッシュ機能も優れており表示も早く、フッターやサイドバーに表示させるには最適なプラグインです。

Demo

Social Slider Widget

こちらも高い人気のプラグインです。アカウントの画像（複数アカウント可能）や、ハッシュの画像を表示させることができます。アクセストークン不要のアカウント認証で簡単に設置できます。
レイアウトや、キャッシュ機能の他、リンク先のURLも設定できるため画像から商品ページの誘導も可能になります。

Demo

WPZOOM Social Feed Widget

「CSSでレイアウトをカスタマイズしやすいシンプルなものでいいんだよ」というケースにお薦めのプラグインです。キャッシュ機能で表示も早いです。
設置にはアクセストークンの取得が必要となります。
GitHubでもコードが公開されており、フロントエンドの方には使いやすいプラグインです。

Demo

Insta Show

有料（49ドル）になります。codecanyouでもナンバー1のプラグインです。
レイアウトやキャッシュ、LazyLoadなどの機能も豊富です。

複数のSNSを表示させる事ができるプラグイン

インスタグラムの他に、複数のSNSを表示させたい時にはお奨めのプラグインです。

Feed Them Social

Facebook、Twitter、Instagram、Youtube、Pinterestなどの投稿表示を一つのプラグインで叶えてくれます。Woocommerceとの連携もできます。

Demo

 

JavaScriptでInstagramを表示させる方法

JavaScriptを使ってInstagramの画像を表示させるにはInstafeed.jsを利用するのが良いでしょう。

Instafeed.js

新しいインスタグラムのAPIにも対応しています。

Instagramのアクセストークンが必要になるためFacebookビジネスマネージャーアカウントが必要になります。

Instafeedを使ってウェブページに画像を表示させる方法

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を運用するリソースが不足している場合、自動投稿はかなり助かります。

自動投稿だけではなく、手動によるインタグラム投稿と自動投稿を組み合わせることで、フォロワーとのエンゲージメントも高めることができます。