インスタグラムをWEBサイト内で表示させる手順インスタグラムをWEBサイト内で表示させる手順2019/7/16ブログTweetPocketこんにちは、マツイです。最近、WEBサイトにおける相談もSNSを活用したいという声が増えました。インスタグラムはブログよりスマホから手軽に投稿できイメージ訴求に強いため、より簡単に日常の活動を表示させる事ができます。言葉では伝えづらい食を扱う現場や、商品を紹介するコンテンツやイベントなどに最適です。今回は、webサイトにインスタグラムを表示させる手順を紹介します。SnapWidgetにアクセスする・パーツをカスタマイズする。・コードを好きな位置にコピペで完了これだけです。SnapWidgetにアクセスするまずは、InstaWidgetもしくはSnapwidgetのこのどちらかのサイトにアクセスします。InstaWidgetは、ログインが不要のようですが、snapwidgetが必要です。ログインは、Facebookアカウントでもログインすることができます。InstaWidgetsnapWidgetパーツをカスタマイズするログイン後は、都合に合わせてインプットエリアに入力して行きます。ちなみに、Instawidgeは、日本語での表記ですが、snapWidgetは英語での表記なので、使いやす方を使いましょう。snapWidgetの表記は下記の通りです。Username:ユーザー名インスタグラムで登録したアカウント名@から始まる名前を入力します。表示させるコンテンツの説明を記入します。Size:サムネイルのサイズ画像の1ピースのサイズを設定します。Rows):レイアウト(列×行)画像のレイアウトを設定します。背景カラーの設定が可能です。webサイトに合わせて自由に背景色を変更できます。Effect:ホバーエフェクトサムネイルにホバーした際のエフェクトを選択できます。Buttons:シェアボタンシェアボタンの表示/非表示が選択できます。Responsive:レスポンシブブラウザ幅による可変設定、スマホへの対応の有無を選択できます。コードを好きな位置にコピペで完了カスタマイズが完了すれば、コードをコピーして、表示させたい位置に貼り付ければ完了です。念のため、スマホとPCでしっかり表示が反映されているかを確認しましょう。下記画像のような形で表示されていればOKです。お疲れ様でした!インスグラムのボタンバナーを作成してますのでwebサイトにバナーを張りたい方は無料でご利用可能です。クレジットも不要なので作成が面倒だと言う方はご利用ください。インスグラムバナーのダウンロードはこちらPROFILE松井貴史1984年熊本生まれ。RUBYDESIGN.代表プロダクトに関わるUI設計が得意です。デザインだけではなく、現在エンジニアリング部分などにも領域を広げています。物と物をsnsで繋ぐマッチングサービスmonocrewを運営。RERATION2018/8/6コミュニティを巻き込んで拡散力をゲットしよう!2015/9/15今年もそろそろやります!2019/5/19実践型プログラミング学習の始め方。小さなサービスができる...2020/1/18個人でもチームでも、プロダクトやサービス開発に使えるサービスまとめ2018/4/12筋肉痛3日目2018/8/16ノンデザイナーでも知るだけで使える便利なサイト!(アソート編)2014/12/25クリスマスツールをデザインしました。2019/7/28サービス開発時にやってよかった設計フロー2019/6/18GitHubを使ったプロジェクトの始め方CONTACTチームでのサービスデザインが得意です。ご相談は、お問い合わせフォームをご活用ください。