[SNS] インスタグラム写真をホームページやブログに貼り付ける(埋め込みする)
スマホ・PC対応！インスタグラム写真をホームページやブログに貼り付ける(埋め込みする)方法
企業アカウント運用の基本
使い方
スマホ・PC対応！インスタグラム写真をホームページやブログに貼り付ける(埋め込みする)方法
2018.09.10
気軽に写真を投稿して楽しめるインスタグラムは、今もっとも人気があるSNSの一つです。そんなインスタグラムの投稿をブログやホームページに載せたいと思っている方も多いのではないでしょうか。インスタグラムに投稿されている素敵な画像をブログやホームページに表示させることで、記事の質もグンとアップします。
そこで今回は、インスタグラムの投稿をブログやホームページに埋め込む方法を詳しく紹介していきます。インスタグラムの埋込方法を知りたい方は、ぜひ参考にしてみてくださいね。
インスタグラムには投稿された写真をウェブサイトに埋め込む機能があります
インスタグラムの投稿をブログやホームページに表示させるとなると、単にURLを載せる方法しかないと思っていませんか？ 実は、インスタグラムには便利な写真埋め込み機能が備わっており、埋込コードを利用することでブログやホームページに簡単に画像を表示させることができるのです。
もちろん、URLを利用してブログ内に張り付けすることもできますが、画像が表示されなかったり、キャプション（説明文）を非表示にできなかったりと、不便が多いのも事実。それに対して埋め込みコードを使う方法だと、キャプションの表示・非表示の設定も簡単にできるのでおすすめです。
■他人の投稿を埋め込むこともできる
インスタグラムには思わず目を惹かれてしまうような素敵な写真が毎日たくさんアップロードされています。インスタグラムの埋め込み機能を使えば、他人の投稿も自分のブログやホームページに表示させることができるのです。素敵な写真を自分のページに埋め込んだら、見た目のクオリティがアップし、一気に華やかになります。
でも、他人の投稿を自分のページに勝手に貼り付けるのは利用規約違反や著作権侵害になるのでは？と心配な方も多いかと思います。インスタグラムの利用規約を見てみると、他の人が共有または公開したコンテンツ（投稿）は再共有することができると書かれています。そもそも、埋め込みという機能がある時点で他人の投稿を使用するのに同意したものと捉えられるため、特に問題はないでしょう。
ただし、「インスタグラムが指定する方法を使用していること」が条件になっているため、URLの貼り付けや埋め込みなどの公開されている方法ではなく、スクリーンキャプチャで画像保存したものを自分のページに張り付けることはNGです。これを無視すると利用規約違反になりますので、必ず埋め込みコードを使って貼り付けるようにしましょう。
■キャプションの有無も選ぶことができる
インスタグラムの埋め込み機能を使えば、キャプションの有無も選択することができます。キャプションとは、インスタグラム画像の説明文のことを意味します。このキャプションを外すことで、説明文がなくなり画像や動画だけが表示されるのでスッキリとした見た目になります。
■インスタグラムの埋め込みコードをコピーしてホームページやブログに張り付ける方法（PCの場合）
それでは、実際に自分のブログやホームページにインスタグラムの画像を埋め込んでみましょう。
PCで操作する場合とスマートフォンで操作する場合で少し手順が違うので、それぞれで説明していきます。
PCで操作する場合はとてもシンプルで簡単です。埋め込みの手順は以下のようになります。
[手順]
▽ブログやホームページに埋め込みたい画像を見つける
▽埋め込みコードを取得する
▽自分のブログやホームページに貼り付ける
.....
[詳細手順]
▽まずは、インスタグラムを開き、自分のページに載せたい画像を探します。お気に入りの画像が見つかったら、コメントを追加する欄の横にある「…」のボタンをクリック。
▽すると、埋め込みというボタンが表示されるので、そちらをクリックし、「埋め込みコードをコピー」をクリックします。
▽コピーしたものを自分のページに張り付けしたら、埋め込み完了です。
キャプションの有無は、埋め込みボタンを押したときに表示される「キャプションを追加」の横にあるチェックボックスで簡単に設定できます。キャプションを付けたい場合はチェックを入れ、キャプションが必要ない場合はチェックを外しましょう。
ブログやホームページに貼り付ける際の注意
ブログやホームページに埋め込みコードを貼り付ける際は、一点注意が必要です。
ブログやホームページにインスタグラムの画像を埋め込む際は、「html形式の編集画面」でコードを貼り付けてください。普通の編集画面に埋め込みコードを貼り付けても、以下の画像のようにただの文字列が並ぶだけで画像は表示されません。注意しましょう。html形式で貼り付ければ、以下のようにインスタグラム画像が表示されて埋め込みが完了します。
■インスタグラムの埋め込みコードをコピーしてホームページやブログに張り付ける方法（スマホの場合）
インスタグラムの画像をスマホを使ってブログやホームページに埋め込む方法を紹介します。現在、インスタグラムのスマホアプリでは写真の埋め込みコードを取得することができません。そこで、ブラウザ版のインスタグラムを活用して埋め込みを行います。
[手順]
▽スマホアプリのインスタグラムで、ブログやホームページに埋め込みたい画像を見つける
▽埋め込みたい画像のURLをコピーする
▽ブラウザ版インスタグラムで目的の画像を表示する
▽埋め込みコードを取得する
▽自分のブログやホームページに貼り付ける
......
[詳細手順]
▽まずは、埋め込みたい画像のURLリンクをコピーする作業です。スマホアプリのインスタグラムで気に入った画像を見つけたら、右上にある「…」マークをタップします。すると右写真のような画面になるので「シェアする」ボタンをタップしてください。
▽次に、シェア画面の下にある「リンクをコピー」をタップしましょう。すると、画像のURLがコピーされます。コピーされたURLをブラウザ（Google Chrome や Safari など）に貼り付けすると、右写真のようにブラウザ版インスタグラムの画像ページを表示することができます。
▽うまく目的の画像が表示されたら、画像の右上にある「…」ボタンをタップしましょう。
▽すると、メニューが表示されるので「埋め込み」ボタンをタップ。「埋め込みコードをコピー」ボタンをタップして、埋め込みコードをコピーしたら、ブログやホームページに貼り付けましょう。キャプションの有無は、PC版と同様に埋め込みボタンを押したときに表示される「キャプションを追加」の横にあるチェックボックスで簡単に設定できます。キャプションを付けたい場合はチェックを入れ、キャプションが必要ない場合はチェックを外しましょう。また、ブログやホームページに貼り付ける際もPC版と同じように、「html形式の編集画面」に埋め込みコードを貼り付けるようにしましょう。（普通の編集画面だとただの文字列だけが並んでしまいます。）
■インスタグラムの投稿写真を埋め込み引用するときに注意すべきポイント
インスタグラムの埋め込み機能を使うことで、自分のブログやホームページをより華やかに魅せることができます。ただし、便利な埋め込み機能を使用する際は注意しておきたいポイントもいくつかあります。投稿写真を自分のブログやホームページに張り付ける場合、どのような点に注意すればよいのか詳しく見ていきましょう。
■投稿者のアカウント名が変わってもOK
ブログやホームページでインスタグラムの埋め込み機能を使用している場合、埋め込まれている画像をクリックすればすぐにインスタグラムの投稿ページへ移動することができます。つまり、埋め込み機能は、リンクを送って参照している状態になっているので、元の投稿の内容が変更された場合もすぐに埋め込んだ画像に反映されます。もちろん、アカウント名が変更になった場合も即座に反映されます。
埋め込み機能は、「複製」ではなくあくまでも「リンクを送信して参照」なので、著作権侵害に当たる可能性もほとんどありません。これは埋め込み機能を使用するメリットですが、もしもアカウント名で投稿画像を選んでいた場合は自分のブログの内容と投稿画像の間にズレが生じてしまう可能性があります。
さらに、説明文が変更された場合も埋め込み先に反映されるため、説明文に対して何かコメントしている場合は、変更されていないか定期的に確認する必要があります。埋め込んだ画像の説明文の変更を自分のページに反映させたくない方は、最初からキャプションを非表示にしておくとよいでしょう。
■投稿者が写真を削除すると見えなくなってしまう
インスタグラムの埋め込み機能を使うと、アカウント情報が変更された場合もそのまま埋め込み先に反映されることを説明しましたが、投稿が削除された際もそのまま反映されてしまい、画像が見れなくなってしまいます。
インスタグラムは、芸能人から一般人まで多くの人が利用しているSNSです。毎日多くの人が画像を投稿している一方で、「投稿した画像が気に入らなかった」「思った以上に拡散されて嫌だ」などの理由で日々多くの投稿が削除されています。一度、画像を埋め込んだからと言って、自分のページにその画像がずっと残るとは限りません。埋め込んだ画像の投稿者がいつ画像やアカウントを削除するか分かりません。そのため、インスタグラムで埋め込んだ画像が削除されていないか、定期的に確認する必要があります。「削除されました」という文字が多く並ぶページは魅力的ではなく、見た目 的にも美しくないので、一度埋め込んだ投稿をそのまま放置しないように気を付けましょう。
■スクリーンキャプチャは著作権侵害に当たる可能性が！
アカウント名の変更が反映されたり、画像が削除されて見れなくなるのが嫌だからと言って、スクリーンキャプチャをして記事に張り付けるのはインスタグラムの利用規約違反になります。さらに、他の人の投稿をスクリーンキャプチャしたり再加工してブログに乗せたりすると、「複製」したことになるため著作権侵害に当たる可能性もあります。そのため、他の人の投稿を使用する場合は、かならずスクリーンキャプチャではなく埋め込み機能を使うようにしましょう。
■まとめ
いかがでしたか。
インスタグラムの華やかな画像を自身のブログやホームページに埋め込むことで、訪問者の視覚的な興味を高め、回遊率や滞在時間を延ばすことにつながります。画像の埋め込み自体は簡単にできますから、自身のブログやホームページの一つの要素として積極的に活用していきましょう。
インスタラボ
https://find-model.jp/insta-lab/instagram-embed-smartphone-and-pc/
▲インスタ垢yesterdaytownです。
昭和ネタ,bokete脱力ネタが中心です。。
yhhjjjj pc
インスタグラムをブログの記事に貼り付ける！横幅や画像だけ表示の指定方法や埋め込みコード、ショートコードの利用法
Updated：2017-11-19
簡単に写真や動画をシェアできるインスタグラムは今や大人気！ワードプレスなどブログで記事を書く時も、ブログ内にインスタグラムを貼り付けたりすれば記事の質も上がってとても楽しくなりますね。
ここでインスタグラムを記事に貼り付ける場合、スクリーンキャプチャで画像に保存してそれを貼り付ける、という記事も見かけますが、これは実はインスタグラムの利用規約違反にもなるようです。（詳しくはこの記事の下方を見てみてください）
■インスタグラムの貼り付け方
ブログの記事にインスタグラムの投稿を貼り付けるには、以下の３種類があります。
１）インスタグラムのURLを単純に貼る
２）埋め込みコードを貼る
３）ショートコードを利用する
最も簡単なのが、１）のURLの利用。
この場合、インスタグラムの投稿は記事の横幅一杯に表示されて結構大きい！となる場合もあり、横幅を指定したい場合には、２）か３）を、また更に画像だけの表示にしたい（説明文であるキャプションを非表示にしたい）という場合には、やっぱり２）か３）を活用する、となります。
ただ２）の埋め込みコードを使う場合は、記事投稿画面でテキストに切り替えたり、また貼り付けるコード（文字列）が異様に長くなったりで、これがどうもイヤ、という場合には３）を使う、という感じ。
改めてまとめてみると以下のようになりますね。
１）インスタグラムのURLを単純に貼る
もっとも単純。ただし、横幅が非常に大きい場合がある
２）埋め込みコードを貼る
横幅を指定したい場合
画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
（「テキスト」モードで貼り付ける必要あり）
３）ショートコードを利用する
横幅を指定したい場合
■画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
貼り付けるコードをすっきりさせたい場合
（「ビジュアル」モードでも「テキスト」モードでもどちらでも貼り付けOK）
２）の「埋め込みコード」と３）の「ショートコード」では、２）の埋め込みコードが異様に長いので、３）のショートコードの方が非常にスッキリする、という違いになります。
３）のショートコードは、実際に記事を書いている時に、あれ？どうやって書けば良かったっけ？となることも多いので、辞書などに登録して簡単にその形式を引っ張り出せるのが良いですね。（登録したものそれ自体を忘れたりすることも良くありますが（それは私です笑））
では、ここでは報知スポーツのインスタグラムからフィギュアスケート本田真凛さんの以下の投稿を例にとって、まずはURLの確認の仕方、その後１）から３）について各々見て行きましょう。
（この投稿のURLは以下
https://www.instagram.com/p/Ba2J3gJBsRc/?taken-by=hochi_photo）
URLの確認の仕方
まずはインスタグラムの投稿のURLの取得です。
投稿のURLの確認は簡単で、投稿をクリックして、表示されたページのURLを見ればよいですね。
インスタグラムの投稿を適当なところでクリック！
↓↓↓↓↓↓
ブラウザの一番上あたり（アドレスバー）にURLが表示される
あとはこのURLをコピーすれば、インスタグラムの投稿のURLは取得できます。
１）URLで貼り付ける
上の例で取得したインスタグラムの投稿のURLは、
https://www.instagram.com/p/Ba2J3gJBsRc/?taken-by=hochi_photo
これを普通にワードプレスの記事に貼り付けます。
インスタグラムの投稿を貼り付けたい場所を1行空けておく
↓↓↓↓↓↓
記事にURLを普通に貼り付けます
↓↓↓↓↓↓
自動でインスタグラムの投稿が表示される
URLを貼り付ければインスタグラムの投稿が表示されるので、最も簡単な貼り付け方です。
（画像が表示されなかったり、貼り付け方によってはそもそもこういった表示にならない場合もありますが、プレビューで確認してみるとしっかり表示されてます）
ただこの場合、インスタグラムの投稿が横幅いっぱいに表示され結構巨大！となる時もあったりで、横幅を小さくしたい場合には、以下の埋め込みコードを使います。
２）埋め込みコードで貼り付ける
「埋め込みコード」とは、インスタグラムに用意されているもので、以下の手順で簡単に取得できます。
インスタグラムの投稿を適当なところでクリック！
↓↓↓↓↓↓
インスタグラムの投稿を表示されるので、下にある「・・・」をクリック！
↓↓↓↓↓↓
「埋め込み」をクリック！
↓↓↓↓↓↓
埋め込みコードが表示されるので「埋め込みコードをコピー」をクリック
↓↓↓↓↓↓
「埋め込みコードがコピーされました」と表示され、埋め込みコードのコピー完了
↓↓↓↓↓↓
続いてワードプレスのブログの記事作成画面に戻ります。
まず「テキスト」モードに変更します。
「テキスト」をクリック！
↓↓↓↓↓↓
インスタグラムの投稿を表示したいところを1行空ける
↓↓↓↓↓↓
インスタグラムの投稿を表示したいところにコピーした埋め込みコードを貼り付け
後はプレビューなどで確認してみると．．．
はい、しっかり表示されました。
手数が多いように見えますが、実際やって見れば非常に簡単ですね。
■横幅を調整したい
続いて、横幅を少し小さくしたい！という場合はどうするか。実際にコピーして貼り付けた埋め込みコードは以下ですが、
<blockquote class=”instagram-media” data-instgrm-captioned data-instgrm-version=”7″ style=” background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”><div style=”padding:8px;”>......
（以下省略）
横幅を調整するにはこの中にある「max-width:658px;」の「658」を変えればOK。
例えば、少し狭めたいなどで「400」ぐらいにすると、実際のコードは以下のようになりますね。
<blockquote class=”instagram-media” data-instgrm-captioned data-instgrm-version=”7″ style=” background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:400px; padding:0; width:99.375%; width:-webkit-calc(100% – 2px); width:calc(100% – 2px);”><div style=”padding:8px;”>......
（以下省略）
これをワードプレスの記事に貼り付けて見てみると以下のようになります。
「max-width:400px;」に変更して貼り付けた
横幅が狭まってますね！おさまりが良い感じです。
キャプションを消して画像だけにする
画像の下に「いいね」「コメント」「説明」がありますが、これを非表示にすることもできます。
埋め込みコードを取得する時の画面が以下ですが、ここで「キャプションを追加」のチェックを外して「埋め込みコードをコピー」をクリック。その後、コピーされたコードを記事に貼り付ければOKです。
３）ショートコードで貼り付ける
最後にショートコードの利用です。
上で見た「埋め込みコード」でも良いですが、貼り付ける文字列がやたらに長くて「なにか嫌」（笑）という場合には、ショートコードを使えばOK. ショートコードとは、行ってみれば”簡単な形式を使うとそれ用に表示される”というもので、インスタグラムの場合、以下の形式になります。
[instagram url=LINK]
参考：Instagram – Embedding （英語）
LINKはインスタグラムの投稿のURLで、本田真凛さんの投稿の例ではそのURLを入れると、以下になりますね。
[instagram url=https://www.instagram.com/p/Ba2J3gJBsRc/?taken-by=hochi_photo]
貼り付けるのは、ワードプレスの記事投稿で「ビジュアル」でも「テキスト」でもどちらでもOK。実際貼り付けると以下のような感じです。
ショートコードを貼り付けてみた（普通にビジュアルモードで貼り付けてます）
プレビューで見てみると、しっかり表示されているのが分かります。
☆横幅の調整の仕方
ここで横幅を小さくしたい、という場合には、以下のように「width=xxx」（xxxは指定したい横幅の数値）を半角スペース後に入れればOK
[instagram url=LINK width=400]
（ここでは横幅を400ぐらいに、ということで400としています）
実際には以下を同様に貼り付ければ良いですね。
[instagram url=https://www.instagram.com/p/Ba2J3gJBsRc/?taken-by=hochi_photo width=400]
☆キャプションを消す
更にキャプション（説明文）を非表示にして画像だけ表示したい！という場合には、「hidecaption=true」を半角スペース後に追加して以下の形式になります。
[instagram url=LINK width=xxx hidecaption=true]
実際には以下のような感じです。
[instagram url=https://www.instagram.com/p/Ba2J3gJBsRc/?taken-by=hochi_photo width=400 hidecaption=true]
（横幅を400にして、更にキャプションを非表示）
記事に貼り付けて表示させてみると、プレビューで見てみると、横幅もしっかり小さくなってるし画像だけの表示になってる！ショートコードは簡単な記述ですっきりしてて良いですね。^-^）
■スクリーンキャプチャについて
インスタグラムにある画像をブログに使いたい、貼り付けたい、ということで、ここで見てきたURLや埋め込みコード、ショートコードなどを使わずに、えい！とスクリーンキャプチャをして記事に貼り付けているものも見かけます。でもこれはどうやらNGのようです。
ツイッターでも同じことが言えますが、インスタグラムも利用規約を見ると以下のようになっています。
この利用規約にある「各種権利」では、
投稿したものは全世界を対象として利用ができる
共有範囲は設定できる
ということが書かれています。
Instagram – 利用規約 > 各種権利
Instagramは、利用者が本サービスに、またはこれを通じて投稿するいかなるユーザーコンテンツについても、その所有権を主張しません。ただし利用者は、利用者が本サービスに、またはこれを通じて投稿するユーザーコンテンツを、Instagramがhttp://instagram.com/legal/privacy/に掲載されている本サービスのプライバシーポリシー(第3条(「利用者情報の共有」)、第4条(「弊社による利用者情報の保存方法」)および第5条(「利用者情報に関する利用者の選択肢」)を含みますがこれに限りません)に従って利用する、非独占的かつ無料、譲渡可能かつ再許諾権可能な全世界を対象とした利用許諾を付与するものとします。利用者は、前述のプライバシーポリシーに記載されている方法で利用者のユーザーコンテンツおよびアクティビティ(利用者の写真を含みます)の共有範囲を選択することができます。
利用するにはプライバシーポリシーの内容に従って利用する、となっていて、そこでプライバシーポリシーにはどのように記載されているか見てみると、
3. 利用者の情報の共有 > 利用者自身のユーザーコンテンツの共有範囲
本サービスへの投稿を目的に利用者が自発的に開示したあらゆる情報またはコンテンツ(ユーザーコンテンツなど)は他の利用者に公開され、利用者のプライバシー設定に従って管理されます。なお本サービスのプライバシー設定を変更するには、プロフィール設定を変更してください。他の利用者は、利用者が共有または公開したユーザーコンテンツを再共有できます。
利用者が公開したユーザーコンテンツは、利用者のプロフィールおよびプライバシー設定に従い、他のユーザーがInstagramのAPIを使って検索できるコンテンツとなります。InstagramのAPIの利用については、本プライバシーポリシーの条項が組み込まれているAPI利用規約が適用されます。
利用者が本サービスに投稿した情報を削除した場合でも、その情報のコピーは本サービスのキャッシュおよびアーカイブページにて閲覧できる情報として残る場合があるほか、他のユーザーまたはサードパーティーがInstagramのAPIを使ってその情報をコピーまたは保存している場合があります。
利用者が公開したユーザーコンテンツ（投稿）は他の人が利用できるが、InstagramのAPI（利用に際してインスタグラムが指定する方法）を使うこと、とあります。
つまり、スクリーンキャプチャなどではなく、インスタグラムがブログなどに貼り付けるために公開している方法（この記事で紹介している方法）である、
１）URLの貼り付け
２）埋め込みコードの貼り付け
３）ショートコードの利用
を使う必要がある、ということになりますね。
■インスタグラムを貼り付ける！のまとめ
インスタグラムをブログの記事に貼り付ける方法は以下3つ
１）インスタグラムのURLを単純に貼る
もっとも単純。ただし、横幅が非常に大きい場合がある
２）埋め込みコードを貼る
横幅を指定したい場合
画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
３）ショートコードを利用する
横幅を指定したい場合
画像だけ表示したい（説明文であるキャプションを非表示にしたい）場合
貼り付けるコードをすっきりさせたい場合
一般にはこれらの方法を使わずにスクリーンキャプチャして、それを画像として保存してブログの記事に貼り付ける、というものも見かけますが、インスタグラムの利用規約からすると、上記3つのいずれかを使う必要がある、ということが分かります。
ツイッターでも同様の規約があり、ブログに貼り付けるときには同じような形になりますね。
今ではいろいろなサービスがありますが、何かシェアしたい、という場合には、そのサービスの利用規約をまず読んで、正しい利用方法をして行きましょう。
ブログでの収益化をはかりたい！というの場合には、以下のメルマガにも登録してみてくださいね。
ネットビジネスで自由に生きる！会社を辞めて海外にいながらブログで稼ぐJINのサイト
https://tabibitojin.com/instagram-blog-embedding-in-wordpress/
https://tabibitojin.com
0 件のコメント:
コメントを投稿