Instagramをサイトに埋め込む方法
【SnapWidget(スナップウィジェット)】の使い方

Instagramをホームページの中に埋め込む方法として、【SnapWidget(スナップウィジェット)】を使った方法を解説します。

*他社の提供するシステムとなりますため、急な仕様の変更や利用ができなくなることがございます。

SnapWidget(スナップウィジェット)の登録方法

【SnapWidget】のサイトへ移動

*クリックすると画像が拡大します

下記URLをクリックしてInstaWidgetのサイトを開きます。

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

利用登録

*クリックすると画像が拡大します

Facebook利用中の方

Facebookのアカウントをお持ちであればFacebookからログインすることが出来ます。

右上の【log in】をクリックしてください。

★Facebook利用中・すでに利用登録がお済の方はSTEP3に進んでください。

Facebook利用していない方

利用するために登録が必要です。

右上から【SIGN UP】選択して、登録画面へ移動してください。

Facebook利用していない方の方はSTEP4に進んでください。

Facebook利用中の方のログイン方法

STEP3は、Facebook利用中の方のログイン方法のご案内になります。

*クリックすると画像が拡大します

  1. 【SIGN IN WITH FACEBOOK】をクリック
  2. Facebookのログイン画面が出ますので、ログインをしてください。

★認証のためのボタンが表示されることがございますが、YES・ログインなど選択してください。

Facebook利用していない方の登録方法

STEP4は、Facebook利用していない方の登録方法のご案内になります。

*クリックすると画像が拡大します

  • 名前
  • メールアドレス
    利用する際に使用しますので、普段お使いのメールアドレスがお勧めです。
  • パスワード

の3つの項目を設定し【SIGN UP】をクリックしてください。

これで利用登録は完了です。
次は、実際にウィジェットを設定するための方法をご案内いたします。

利用するサービスを選択する

*クリックすると画像が拡大します

利用登録が済み、実際の操作画面に入ったら、

まずは利用する機能を選びます。

今回は、Instagram用ウィジェットを作るので、

  1. 【CHOOSE A SERVICE】をクリック
  2. 選択肢から「Instagram」をクリック

表示させたい形を選択する

*クリックすると画像が拡大します

ホームページ上で表示させたい形を、選んでください。

表示形式を選んだら、【CONFIGURE WIDGET】をクリックして、詳細設定へ進みましょう。

基本的な項目を設定する

*クリックすると画像が拡大します

設定画面の左側に、詳細設定ができる項目が用意されています。

利用目的に合わせて、項目を設定することで細かい設定が可能となっております。

次の項目で、基本的な設定方法をご紹介させていただきます。

ウィジェットの基本的な設定方法

Instagramのアカウントを読み込む

*クリックすると画像が拡大します

【Username】の項目をクリックしてください。

紐づけるアカウントを選択する画面が出ますので、Instagramを選択し、Instagramのアカウントにログインしてください。

基本設定

*クリックすると画像が拡大します

表示方法について細かく設定することができますが、まずは下記の項目を設定して、試してみてください。

  1. Layout・・・
    表示したいレイアウトの設定です。
    横【3】×縦【2】で表示されます。
    *上記の場合、横が3つで縦が2つということになります。
  2. Hover Effect・・・
    エフェクトの設定です。
    画像にマウスを合わせた時に画像に対して動きを付けれたりします。
    不要のときは、【None】を選択します。
  3. Sharing Buttons・・・
    シェアボタンの設定です。
    必要か不要かを選択します。
  4. Responsive・・・
    レスポンシブの設定です。
    携帯とかスマホでも対応したサイズに変更させたいときは、【Yes】を選択して下さい。

ホームページへ設定するコードを取得

*クリックすると画像が拡大します

設定が完了したら、ホームページに設定するための、コードを取得しましょう。

  1. 【GET WIDGET】をクリック
  2. 【COPY TO CLIPBOARD】をクリック

これでコードを、コピーすることができました。

ホームページに設定する

*クリックすると画像が拡大します

編集画面を開いていただき、ウィジェットを設置したいページを表示させてください。

  1. 表示させたい場所に【部品:HTML】を設置してください。
  2. HTMLの要素設定 > HTMLの欄に、STEP3でコピーしたコードを、「ctrl+v」で貼り付けてください。

設置完了

*クリックすると画像が拡大します

これで設置は完了となります。

  • プレビュー
  • 公開中のページを見る

​で、正しく表示されているかを確認してください。

各種ダウンロード資料

ホームページ更新画面の
基本操作(印刷版PDF資料)

A4カラー印刷用

印刷版PDFはこちらをクリック