インスタグラム（Instagram）をウェブサイトに埋め込みしてみよう！

インスタグラム（Instagram）については
過去にいくつか記事をご紹介させて頂きました。

インスタグラム（Instagram）の基本的な使い方など
初心者の方に役に立つ情報だと思います。

気になる方はこちらでチェックしてみて下さいね。

⇒ http://k-tsubo.com/tag/instagram/

インスタグラム（Instagram）のお気に入りの写真を
ご自身のウェブサイトやブログに貼り付けたいなと
思っている方もいると思います。

そんなあなたに、今回はインスタグラム（Instagram）を
ウェブサイトに埋め込む方法について解説して行きたいと思います。

良かったらご参考になさって下さい。

インスタグラム（Instagram）をウェブサイトに埋め込むには

まずは、インスタグラムのアプリではなく、
ブラウザからページを開きます。

https://www.instagram.com/ユーザID/
ユーザIDの部分にご自身のIDを打ち込んで頂けると開けると思います。

今回は例として、芸能人で国内でのフォロワー数が現段階で１位の
渡辺直美さんのアカウントを使わせて頂きます。

渡辺直美さんのページはこちらです

⇒ https://www.instagram.com/watanabenaomi703/

そして、埋め込みたい画像をクリックしてみます。

画像の右下にあるアイコンをクリックします。

そうすると、このように表示されるので、
「埋め込み」をクリックします。

そして「埋め込みコードをコピー」の部分をクリックして
コードをコピーします。

あとは、表示させたい場所にコードを貼り付ければ
画像が表示されるようになります。

渡辺直美さん(@watanabenaomi703)が投稿した写真 – 2016 10月 4 1:32午前 PDT

貼り付けると、この様な感じで表示されます。

ウィジェットを使ってインスタグラム（Instagram）の表示を行う

最初にご紹介した方法は、好きな画像を選択して
ウェブサイトに表示させる方法でした。

今回はインスタグラム（Instagram）が更新されたら、ウェブサイトにも
更新された画像が表示されるように連動することが可能なウィジェットを
使った方法をご紹介します。

「SnapWidget」というサービスなのですが、
無料でも利用することが可能ですが、アカウント登録が必要なので
登録してみて下さい。

⇒ http://snapwidget.com/

こちらの方法では、ご自身のインスタグラム（Instagram）のアカウントの写真を
ウェブサイトで表示させることができます。

表示させたいFREEで使えるインスタグラム（Instagram）の
表示方法を選択します。

例えば、こちらはスライドショーで画像を見せていく形のタイプの
ウィジェットになります。

インスタグラム（Instagram）のユーザーネームなどを打ち込み、
サイズや背景色など選択したら、下にある「PREVIEW」ボタンをクリックすると
プレビューされるのでどんな感じになるか確認することができます。

問題なければ、右下にある「GET WIDGET」をクリックします。

そうすると、ウィジェットのコードが表示されるので
コピーして、表示させたい場所に貼り付けます。

これでウェブサイトにご自身のインスタグラム（Instagram）を
貼り付けることができました。

まとめ

今回はインスタグラム（Instagram）の写真を
ウェブサイトに埋め込む方法について解説させて頂きました。

２つの方法をご紹介させて頂きましたが、
実はAPIを使って行う方法もあるのですが、
初心者の方にはちょっと難易度が高いかと思います。

ですので、まずは気軽に設定できる今回ご紹介させて頂いた方法で
チャレンジしてみて頂けたらと思います。

• Tweet
• 
• 

• 
• 
•