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

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

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

SEOの影響

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

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

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

導入方法の確認

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

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

API仕様変更による表示エラー

インスタグラムのAPIに不具合がある場合は、画像は表示されずにエラーとなります。

また、API仕様は定期的に変更され、新しい仕様に対応するまで1週間ほどエラー表示が続く場合があります。

いずれの不具合もプラグインがアップデードされるまで待つしかありませんので、この点も事前に確認を取った上で、導入された方が良いでしょう。

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

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

WordPressにInstagramを表示させる方法

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

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

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

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

下記の2つは有料になりますが、インスタグラムのAPIアップデートにも対応し続けている点でもお薦めです。

Instagram Journal

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

Demo

Instagram Theatre

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

Demo

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

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

Smash Balloon Social Photo Feed

人気のあるプラグインです。写真の表示も安定していて、設定もとても簡単。
定番のインスタグラム用のプラグインでしょう。
アカウントとの紐づけもアカウントの認証をするだけで簡単です。
キャッシュ機能も優れており表示も早く、フッターやサイドバーに表示させるには最適なプラグインです。
複数アカウントで登録できるマルチアカウント機能や、カスタムリンク機能もあるので、ECサイトの運営にも最適です。
プロ版ではインスタグラム側のドラブルやAPI変更でも画像エラーにならないダウンタイム機能もあるので、ビジネスでもオススメのプラグインです。プロ版は1年98ドルとやや高めです。

Demo

WPZOOM Social Feed Widget

このプラグインも人気のあるプラグインです。初期の頃からかなり進化していて「Smash Balloon Social Photo Feed」とほぼ同じ機能を備えてて、プロ版は1年49ドルからとリーズナブルな価格です。
設定も簡単で、インスタグラムとの紐づけもアカウント認証で簡単にできます。
Smash Balloon Social Photo Feedと比べて、出力されるHTMLが素直な感じです。コーダーにはこちらの方が優しいです。
インスタグラムのAPI仕様変更にも対応が早かったので、ビジネスでもオススメのプラグインです。

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

有料（月約1,000円）でインスタグラムへの自動投稿を利用できます。
後発のSNS連動プラグインで機能も豊富。操作性も良いです。

NextScripts

人気のあるNextScriptsは、有料（年間約4,000円）のサードパーティAPIを利用することで、インスタグラムへの自動投稿ができます。

Social Networks Auto-Posterの設定メニューまとめ

Revive Old Posts

SNS連動プラグインとして人気にあるRevive Old Postsも有料版（年間約9,000円）にすることでインスタグラムへの自動投稿ができます。

SNSを運用するリソースが不足している場合、自動投稿はかなり助かります。

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