ウェブサイト・ECサイトにInstagramフィードを表示する5つの方法

Instagram(インスタグラム)の月間アクティブアカウントはグローバルで20億、日本では3300万超えといわれ、年々増加しています。

店舗やECサイト、サービスサイトを運営していて既にアカウントを持っている方も多いかと思いますが、そのアカウントの投稿画像、自社サイトに表示させていますか？

インスタグラムは写真や動画を中心に情報発信として活用されていますが、BtoC企業を中心に、多くのサイトでインスタグラム投稿を埋め込んだコンテンツ作成が行われています。

サイト制作にWordpressを利用している場合は「Instagramフィード」などの設置が簡単なプラグインが豊富ですが、一般的なウェブサイト向けのツールは機能面では充実しているものの、月額2万円～と個人や中小企業には負担になる金額。

そこで今回は無料の物を中心に、Instagramのフィードをサイトに表示できる方法をご紹介いたします。

• Instagramフィードをサイトに表示させるメリット
• ウィジェットを無料でサイトに設置する3つの方法
• SnapWidget(スナップウィジェット)
• Instagram API　＋　instafeed.js
• Snapppt(スナップト)
• まとめ

既にInstagramのアカウントがあり運用してる場合、Instagram→自社サイトへの流入はある程度あるかと思いますが、自社サイトにウィジェットを設置する事で逆の流入も期待でき、ファンやいいねの獲得のチャンスが増えます。 また、直接自社サイトにアクセスしてくるユーザーは自社のコンテンツや商品に比較的興味・関心がある場合が多く、サイトからInstagramへの動線を広く用意していればInstagramアカウントをPRでき、より興味をもってもらう事が出来ます。

ミニマム、シンプルなサイトでもスクエアで同じサイズのインスタ画像を並んでいるとセンス良く見えます。 シンプルなサイトほど視覚的に際立って訴える事ができるのでおすすめできます。 また、季節感のある投稿画像を取り入れることでブログなどよりも手軽に更新感を出す事ができます。

サイトに表示する事で自社サイトのデザインやイメージと統一した世界観を意識した画像を投稿するようになり、自然なブランディング効果アップが見込めます。 基本モバイルデバイスで閲覧するユーザーが多いインスタですが、普段より大きなモニターで投稿画像を見ることにより映え方やインスタの基本「投稿画像に統一感を出す」事を意識するようになり撮影スキルの向上や投稿画像が洗礼されていく…事もあるかもしれません。

それではフィード表示に使えるサービスを紹介していきましょう。

1.Instafeed

https://apps.shopify.com/instafeed?locale=ja

手軽さ★★★
カスタマイズ性★★☆
レスポンシブ○

【プラン料金】

• Free：無料
• Pro：6 $/月
• Plus：20 $/月

ShopifyでECサイトを運用されている方におすすめのフィードアプリです。
（Shopifyを利用していないという方はお手数ですがスキップください！）
フィードアプリがいくつかある中で、こちらは基本機能は無料で、簡単に実装が可能です。
まずは自社アカウントを連携して表示したいというニーズには問題なく答えられる内容になっています。

ちなみに弊社のコーポレートサイトもShopifyで構築しており、このアプリを使用してフィードを表示しております。

有料プランが二種類用意されており、デフォルトからレイアウトを変更したり、特定のハッシュタグで投稿をフィルタリングしたり、機能拡張の必要性に応じてアップグレードすることも可能です。

https://snapwidget.com/

手軽さ★★★
カスタマイズ性★★★
レスポンシブ◎

【プラン料金】

• Free Plan：無料
• Lite Plan：6.60 $/月
• Pro Plan：11 $/月
• Developer Plan：55 $/月

世界的にメジャーな埋め込み型ウィジェット。
Instagramに限らずTwitter、Facebookで投稿した写真を自動で表示するウィジェットを生成できるツールです。
使い勝手はFacebookの公式ウィジェットのような感じで素早くウィジェットを作成できます。
作成、カスタマイズも簡単で設置もコードをペーストするだけと無料・早い・とにかく簡単。

SnapWidgetの問題点
SnapWidgetは無料で利用できますが、読み込まれた画像のリンク先がInstagramではなく、SnapWidgetで用意されたページになります。
有料登録すれば月$6～直接Instagramに飛ばす事も可能で、$10～のプランを利用すればハッシュタグ毎に取得することも可能。
無料の範囲では仕方ない点ではありますが、企業やブランドなどイメージが大事なサイトにはあまりよろしくないですね。

そこで別の方法も併せてご紹介します。
少し難易度は上がりますが画像クリックしても直接Instagramへ移動、広告もありません。

手軽さ★☆☆
カスタマイズ性★★☆
レスポンシブ△

【プラン料金】

• Instagram API利用料：無料
• instafeed.js プラグイン利用料：無料

「Instagram API」をjavascriptプラグインの「instafeed.js」と連携させてサイトに表示させる方法。
HTML、jsの知識が多少無いと少し難しく感じるかもしれませんが、ステップ通りに進めば設置できます。
Javascriptが使えるECプラットフォーム（※）なら設置可能なので、実質ほとんどのECサイトに導入可能。
※モール型（楽天、Yahoo!ショッピング）、ショッピングカートASP型（Makeshop、ショップサーブ）、オープンソース型(Wordpress、EC CUBE)など 実際MakeshopにはPC、モバイル表示共に問題なく実装する事が出来ました。
レスポンシブ化、カスタマイズはHTML、CSSの知識があれば色々と変更できますが、表示させる画像のサイズ、数などは設置するコードを少しいじるだけで簡単に設定できます。

手順は以下のとおり。

1. InstagramにログインしてAPI取得用のクライアントを作成
2. InstagramのユーザーIDを取得する
3. アクセストークンを取得する
4. instafeed.jsを使用してウェブサイトに設置

Instagram API利用時の注意
※Instagram APIは2016年6月から承認制となりました。
通常の使用では制限のあるテストモード「Sandbox Mode」を使用する事になります。 制限といってもウェブサイトへのウィジェットの設置という目的ではまず通らず、アプリの動作説明動画を提出する必要があるなどかなり厳しい審査のようです。

Sandbox Modeでの制限のうち主要な内容は以下の通り ・表示できるデータは最新20件まで
・呼び出しは1時間に500回まで
・他のユーザーのデータ取得することはできない
今後も一般的な規模のウェブサイト、ECサイトでは問題なく使用できそうです。

手軽さ★★★
カスタマイズ性★★☆
レスポンシブ◎

【プラン料金】

• Essentials：50 $/月
• Standard：200 $/月
• Prime：600 $/月
• Enterprise：2,000 $/月

SnapWidgetと同じ埋め込み型ウェジットですが、Sauceはウィジェットから商品の購入が可能にさせるECサイト向けのツール。
Sauceと連携し、インスタグラムに投稿した画像からサイトに表示させたい画像を選択し、プロファイルページ（Instagram Shop）を作成してインスタグラムとECサイトの動線をつなぐ事ができます。 コーディネート画像を沢山アップすれば直接購入できるカタログのようにも使えます。

手軽さ★★★
カスタマイズ性★★☆
レスポンシブ◎

【プラン料金】

• 費用はプランによって異なる
  料金詳細は確認が必要→ お問い合わせはこちら 

Instagramと連携できるUGC（ユーザー生成コンテンツ）活用ツールとして国内シェアを伸ばしているサービスで、弊社でも導入実績がございます。
費用は有料で非公開となっておりお問い合わせが必要ですが、実装までをサポートしてもらえるメリットもあります。
単純なフィード表示サービスではなく、UGCを収集して活用していくことができるため、売り上げの最大化やユーザーのファン化を目指す事業者様におすすめです。

自社ストアでInstagramを大きくアピールすることにより、サイトやショップに訪れたユーザーがInstagramをフォローしてくれたりファンが増えるもしれません。 単なるフィードとしての表示から、ギャラリーやカタログなど使い方は多様です。 こういった接点をつくることでショップの世界観を伝えたり再来訪してもらうつながりを強化することができますよ。 今までInstagramをいまいち活用できていなかった方も、この機会にぜひお試しください！

GO RIDE ではECサイト制作・運用を行っております。 是非お気軽にお問い合わせください。 お問い合わせはこちら