インスタグラムを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サービスや最新テクノロジーが大好きです。事業会社様のWeb改善運用などの外部パートナーとして活動しつつ、クリエイター向けのマッチングシステムをつくったりしてます。夢中になれるもので生きる!をテーマに、その過程や日々の学びを発信します。受託は鑑定士ベンチャー・リユース業のパートナー様が多めです

類似記事

簡単・無料で毎月250通まで遅れるhtmlメール(Benchmark Email)が凄かった!

見栄えのあるプレゼン資料をつくるためのTips

フリーランスこそ顧問エンジニア・顧問デザイナーという働き方

フリーランスこそ顧問エンジニア・顧問デザイナーという働き方

制作時間を短縮できるwebサービスパレット(打ち合わせ〜進行やりとり編)

制作時間を短縮できるwebサービスパレット(打ち合わせ〜進行やりとり編)