2019年02月08日更新
インスタグラムの画像/投稿をWebサイトに埋め込み表示する方法と注意点
Webサイト上にインスタグラム画像一覧を埋め込み表示させることができるのはご存知でしょうか?ここではあなたが運用しているブログ、ホームページなどのWebサイトにインスタグラムのリンク一覧を埋め込みする方法を紹介していきます。
目次
インスタグラムの埋め込みとは?
外部アプリやツール、サービスで使用している画像リンクをホームページやブログなどのWebサイトに載せることを埋め込みといいます。では、インスタグラムでの埋め込みとは一体どのようなことなのかこれから紹介していきます。
インスタの投稿をwebページなどに表示すること
インスタグラムでのコミュニケーションとは、自分が興味のある写真画像を投稿しているユーザーをフォローし、あるいは自分が興味のある写真画像を投稿して興味を持ってくれたユーザーにフォローしてもらうことで成り立っています。
インスタグラムでの応用の一つとして、自分が公開しているインスタグラム画像、または他人が公開しているインスタグラム画像は埋め込むことでホームページやブログなどのWebサイトにインスタグラム画像を表示させることができます。
表示されたインスタグラムのサムネイルはタイムラインとしてのリンクとなるためブログを通してあなたのインスタグラムの観覧を効率よく増やしていくことも可能となります。
どんな時に使う?
例えば、インスタグラムでの集客を図るものの思うように客数を伸ばすことができないといったときにインスタグラム埋め込み一覧リンクを使用します。
そうすることでホームページやブログなどのWebサイトでインスタグラムタイムライン一覧のリンクから辿り、インスタグラムへの観覧へと誘導させることができます。人は最初は中身からは判断できないと言われています。
中身よりも目で見るもので良いものは評価でき、悪いものをは評価できないなどの判断をする傾向があるため、画像や写真で人を惹きつけるようなものがあればインスタグラムタイムライン一覧のリンクをクリックしてくれるものだと思います。
このようにWebサイトを利用して埋め込まれたインスタグラムタイムライン一覧のリンクから、インスタグラムの観覧してもらうことでインスタグラムのフォロワーを増やすなどといったことにも有効な手段となります。
インスタグラムをWebサイトに埋め込み表示する方法
それでは実際にインスタグラムの投稿画像をホームページやブログといったWebサイトに埋め込みをしていきますのでその方法をこれから紹介していきます。
間違った方法でWebサイトにインスタグラムの埋め込みができないなどといったことがないよう説明していきますので、是非あなたのWebサイトで実践してみてください。
PCでweb版インスタグラムから行う
PCからWebサイトを使ってインスタグラムの埋め込みをする方法を紹介します。まずはPCでブラウザを立上げ、インスタグラムのWebサイトを開きログインしていきます。
ログインすると、インスタグラムユーザーの方ならWebサイトトップページにタイムラインが流れてくるので、インスタグラムの投稿された画像をみてみます。すると、インスタグラム画像コメントの右下に〇があるのでこれをクリックしてみます。
このように、インスタグラムに投稿された画像をどのようにするのか選択一覧が出てきます。インスタグラム画像をWebサイトに載せるのが目的ですので、ここでは〇「埋め込み」をクリックしてみます。
HTMLコードが作成される
インスタグラム画面に何やら一見意味がわからない呪文のような文字がたくさん出てきますが、これはインスタグラムの埋め込みコードと呼ばれ、Webサイトなどからのインスタグラムへのリンクになるものです。
インスタグラムの埋め込みコードは〇の「埋め込みコードをコピー」をクリックすることでコピーすることができます。
上のインスタグラム画像の〇のように「埋め込みコードがコピーされました。」と表示されればコピーの完了となります。
このインスタグラム埋め込みコードはHTMLコードであるため、Webサイトの編集画面でペーストをすることでインスタグラムのWebサイトへの埋め込みが完了となります。
Webサイトへのインスタグラム埋め込みが完了したら、Webサイト上のインスタグラムのサムネイルはリンクとなっています。
そのためインスタグラムのサムネイルをクリックするとインスタグラムへとリンクされ、インスタグラムのWebページに移動することができます。
InstaWidgetを使って埋め込むこともできる
InstaWidgetとは、Webサイトやブログなどにインスタグラムの写真一覧を気軽に追加することができるブログパーツ(ウィジット)です。InstaWidgetを使うことで誰でも簡単にWebサイトにインスタグラムの投稿画像を埋め込みできます。
InstaWidgetの特徴として、完全無料で利用できるうえにインスタグラムとは別に新規ユーザー登録のようなものもないので気軽に利用できるメリットがあります。
完全無料というとWebサイトに広告が入るデメリットがあると思われがちですが、このインスタグラムサービスにはWebサイトへの広告表示は一切ありません。
このようにInstaWidgetはシンプルかつ完全無料で利用できるインスタグラムWebサイト埋め込みサービスなので、是非うまく利用してみなさんのWebサイトやブログにもインスタグラムの埋め込みリンクを作成してみてください。
インスタグラムをWebサイトに埋め込む方法〜ハッシュタグ〜
では実際にInstaWidgetを使ってインスタグラムの埋め込みをするために、インスタグラムタイムライン一覧の埋め込みコードを生成していきましょう。まずはInstaWidgetのWebサイトトップから〇をクリックします。
クリックして先へすすむとこの画面になります。InstaWidgetはシンプルに誰でも手軽に使え定評があるだけに、早速インスタグラムブログパーツの条件の一覧画面になります。
InstaWidgetではこのようにインスタグラム画像条件一覧を設定し、埋め込みコードが生成できることがわかったと思いますので条件を何か設定して表示させていきます。
例えばWebサイトにインスタグラムの「ラーメン」のハッシュタグで、インスタグラム埋め込みコードを表示させたいと思ったときは、〇のインスタグラムハッシュタグに「ラーメン」と入力します。
インスタグラムのInstaWidgetでの生成一覧からインスタグラムハッシュタグに「ラーメン」と入力し、下にスクロールさせていきますと〇「プレビュー」があるのでクリックします。
プレビューをクリックすると、実際にWebサイトやブログに表示されるインスタグラムプレビュー画面が①に表示されます。①には画像のようにインスタグラムのハッシュタグ「ラーメン」での一覧が表示されています。
それと同時に②「コード」ではインスタグラムのハッシュタグ「ラーメン」でのインスタグラムの埋め込みコードが書かれています。
①「埋め込みコードを取得」でインスタグラムの埋め込みコードが生成されます。その後、②の枠をクリックすると自動で全選択になりますので、windowならctrl+c、macならcommand+Cでコピーのショートカットになりますのでコピーします。
コピーしたらあとは自分の持つブログやホームページなどのWebサイト編集画面からペーストするだけで「プレビュー」のようなインスタグラムの画面一覧を埋め込みすることができます。
ここでの例ではインスタグラムのユーザーを指定しないため、多数のインスタグラムユーザーのインスタグラムハッシュタグ「ラーメン」一覧をWebサイトに埋め込みすることができるといった形です。
インスタグラムの画像/投稿をWebサイトに埋め込む時の注意点
誰でも簡単にインスタグラムタイムライン一覧を簡単にWebサイトへ埋め込みすることができるため、あなたのインスタグラムライフの可能性が広がることと思います。しかし、ただ闇雲に好きなインスタグラム画像を埋め込みすることはできないのです。
ここでは、Webサイトにインスタグラム画像を埋め込み時に何に対して注意をすればよいのか紹介していきます。
著作権に気をつける
インスタグラムでの写真画像のWebサイト埋め込みでは注意すべき点に著作権の問題があります。小説、論文、音楽、絵画、映画、写真など著作物を作成した作成者に発生する権利を著作権と言います。
今回紹介したまとめサイトなどでのインスタグラムの埋め込みコードでリンク作成する行為は、引用の範囲と判断される可能性が高く、インスタグラムでの利用規約上問題とはならないと考えられています。
ただし基本的にはホームページやブログなどのWebサイトでは、自分で作成した著作物であるインスタグラム画像以外のものは使用しないことがインスタグラム埋め込みでの大前提という認識を持つように心掛けてください。
どうしても自分のWebサイトで自分のインスタグラム画像だけでは紹介できないなどがあるため、他人のインスタグラムのタイムライン一覧などを紹介したいときには、著作者から許可を取り掲載することが最適な方法と思われます。
いかがでしょうか?一例ですが、インスタグラム単体では集客できない、売り上げを上げることができないなどといった方は多いと思います。
このようにWebサイト用にインスタグラム埋め込みコードを生成することでインスタグラムへのリンク作成をすることができ、インスタグラムハッシュタグでもインスタグラムの埋め込みする方法があるため、うまく利用してみることをおすすめします。