Technology

[Technology] Instagramウィジェットを無料でサイトに設置する3つの方法

Instagram(インスタグラム)の月間アクティブユーザーがグローバルで8億、日本では2000万超えといわれ2016年から1年間で約2倍以上増加しています。

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

このような投稿画像一覧のギャラリーを自社サイトに表示させる事でより多くのユーザーを獲得できるなど多くのメリットがあります。

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

そこで今回は無料でInstagramのウィジェットをサイトに設置できる3つの方法をご紹介いたします。

海外製で日本語対応しているサービスはありませんが、Google翻訳だけでも十分理解できますのでご安心ください!

目次

 

Instagramのウィジェットをサイトに表示させるメリット

1.集客、ファンの獲得につながる

既にInstagramのアカウントがあり運用してる場合、Instagram→自社サイトへの流入はある程度あるかと思いますが、自社サイトにウィジェットを設置する事で逆の流入も期待でき、ファンやいいねの獲得のチャンスが増えます。

また、直接自社サイトにアクセスしてくるユーザーは自社のコンテンツや商品に比較的興味・関心がある場合が多く、サイトからInstagramへの動線を広く用意していればInstagramアカウントをPRでき、より興味をもってもらう事が出来ます。

2.ウィジェットを設置するだけでサイトがちょっとオシャレに

ミニマム、シンプルなサイトでもスクエアで同じサイズのインスタ画像を並んでいるとセンス良く見えます。
シンプルなサイトほど視覚的に際立って訴える事ができるのでおすすめできます。

また、季節感のある投稿画像を取り入れることでブログなどよりも手軽に更新感を出す事ができます。

3.自社サイトとInstagramに統一感が出る事による自然なブランディング効果UP

サイトに表示する事で自社サイトのデザインやイメージと統一した世界観を意識した画像を投稿するようになり、自然なブランディング効果アップが見込めます。

基本モバイルデバイスで閲覧するユーザーが多いインスタですが、普段より大きなモニターで投稿画像を見ることにより映え方やインスタの基本「投稿画像に統一感を出す」事を意識するようになり撮影スキルの向上や投稿画像が洗礼されていく…事もあるかもしれません。


それではウィジェット設置に使えるサービスを紹介していきましょう。

1.SnapWidget(スナップウィジェット)

https://snapwidget.com/

手軽さ★★★
カスタマイズ性★★★
レスポンシブ◎
日本語対応×

おそらく世界的に一番メジャーな埋め込み型ウィジェット。

Instagramに限らずTwitter、Facebookで投稿した写真を自動で表示するウィジェットを生成できるツールです。

使い勝手はFacebookの公式ウィジェットのような感じで素早くウィジェットを作成できます。
作成、カスタマイズも簡単で設置もコードをペーストするだけと無料・早い・とにかく簡単。

SnapWidgetの問題点

SnapWidgetは無料で利用できますが、読み込まれた画像のリンク先がInstagramではなく、SnapWidgetで用意されたページになります。

有料登録すれば月$6~直接Instagramに飛ばす事も可能で、$10~のプランを利用すればハッシュタグ毎に取得することも可能。

無料ですので仕方ない点ではありますが、企業やブランドなどイメージが大事なサイトにはあまりよろしくないですね。

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

2.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サイトでは問題なく使用できそうです。

3.Snapppt(スナップト)

http://www.getsnapppt.com/

手軽さ★★★
カスタマイズ性★★☆
レスポンシブ◎
日本語対応×

SnapWidgetと同じ埋め込み型ウェジットですが、Snappptはウィジェットから商品の購入が可能にさせるECサイト向けのツール。

Snappptと連携し、インスタグラムに投稿した画像からサイトに表示させたい画像を選択し、プロファイルページ(Instagram Shop)を作成してインスタグラムとECサイトの動線をつなぐ事ができます。
コーディネート画像を沢山アップすれば直接購入できるカタログのようにも使えます。

サイトにウィジェットを設置したイメージ

プロファイルページ(Instagram Shop)のイメージ

画像クリックで直接Instagramの画像を表示させるのではなく商品が購入できるプロファイルページ(Instagram Shop)に飛ぶ仕様のため、コーポレートやサービスサイトには不向きですが、日常的にコーディネート画像や商品入荷情報をアップするECサイト(ネットショップ)には使い方次第で購買率アップの手助けにもなるかもしれません。

WordPress、Shopifyでもプラグイン、アプリがリリースされています。

詳しい仕様はこちらも参考に

[Technology] インスタグラム投稿画像をECサイトに活用「Snapppt」と連携してCV率アップ!

まとめ

自社ストアでInstagramを大きくアピールすることにより、サイトやショップに訪れたユーザーがInstagramをフォローしてくれたりファンが増えるもしれません。

単なるフィードとしての表示から、ギャラリーやカタログなど使い方は多様です。

こういった接点をつくることでショップの世界観を伝えたり再来訪してもらうつながりを強化することができますよ。

今までInstagramをいまいち活用できていなかった方も、この機会にぜひお試しください!


GORIDEではECサイト制作・運用を行っております。

是非お気軽にお問い合わせください。

お問い合わせはこちら

About the author

Tomoe-GO RIDEデザイナー

Tomoe-GO RIDEデザイナー

GO RIDEウェブデザイナー。アパレルメーカーで ウェブサイト、ECサイトの開発及び運営を担当。二児の母となりGO RIDEで社会復帰。
ロードバイク、DIY、ライブ、旅行、映画、グルメ、ファッションが趣味。