インスタグラムをWEBサイト内で表示させる手順

こんにちは、マツイです。

最近、WEBサイトにおける相談もSNSを活用したいという声が増えました。インスタグラムはブログよりスマホから手軽に投稿できイメージ訴求に強いため、より簡単に日常の活動を表示させる事ができます。

特に言葉では伝えづらい食を扱う現場や、商品を紹介するコンテンツやイベントなどに最適です。

今回は、webサイトにインスタグラムを表示させる手順を紹介します。

webサイトに表示させるまでの手順

  • ・InstaWidget or SnapWidgetにアクセスする
  • ・パーツをカスタマイズする。
  • ・コードを好きな位置にコピペで完了

これだけです。

InstaWidget or SnapWidgetにアクセスする

まずは、InstaWidgetもしくはSnapwidgetのこのどちらかのサイトにアクセスします。InstaWidgetは、ログインが不要のようですが、snapwidgetが必要です。ログインは、Facebookアカウントでもログインすることができます。

InstaWidget

snapWidget

パーツをカスタマイズする

ログイン後は、都合に合わせてインプットエリアに入力して行きます。ちなみに、Instawidgeは、日本語での表記ですが、snapWidgetは英語での表記なので、使いやす方を使いましょう。

snapWidgetの表記は下記の通りです。

Username:ユーザー名

インスタグラムで登録したアカウント名@から始まる名前を入力します。

Description:説明

表示させるコンテンツの説明を記入します。

Thumbnail Size:サムネイルのサイズ

画像の1ピースのサイズを設定します。

Layout (Columns X Rows):レイアウト(列×行)

画像のレイアウトを設定します。列と行を入力します。

Background Color:背景カラーの設定

背景カラーの設定が可能です。webサイトに合わせて自由に背景色を変更できます。

Hover Effect:ホバーエフェクト

サムネイルにホバーした際のエフェクトを選択できます。

Sharing Buttons:シェアボタン

シェアボタンの表示/非表示が選択できます。

Responsive:レスポンシブ

ブラウザ幅による可変設定、スマホへの対応の有無を選択できます。

コードを好きな位置にコピペで完了

カスタマイズが完了すれば、コードをコピーして、表示させたい位置に貼り付ければ完了です。念のため、スマホとPCでしっかり表示が反映されているかを確認しましょう。

下記画像のような形で表示されていればOKです。お疲れ様でした!

インスグラムのボタンバナーを作成してますのでwebサイトにバナーを張りたい方は無料でご利用可能です。クレジットも不要なので作成が面倒だと言う方はご利用ください。

インスグラムバナーのダウンロードはこちら

松井 貴史
顧問・パートナー型の受託専門WEBデザイナー兼ディベロッパー。UXUI改善運用からWEBシステム開発までワンストップで提供しています。自身でもデザイナー発!個人開発者として日々の気づき、アクション、考え、ノウハウをTwitterで発信中。オンラインゲームSAKETUMA開発

類似記事

フリーランスになって見つけた、デザイナーの価値の上げ方

webdesign

WEBデザイナーとしてご飯を食べれるようになるためにやった事

フリーランスを始めたら考えたい税金対策の話(文美国保承認までのステップ)

今更聞けないソースコードをブログに表示させる方法

今更聞けないソースコードをブログに表示させる方法