ブログなどにInstagramの写真を埋め込む方法

ページ

 

ブログなどにInstagramの写真を埋め込む方法

2015年5月28日木曜日
Instagramをブログに埋め込む

ブログをやっている人なら、自分が撮影したInstagramをブログで紹介したいと思いませんかね?「え?画像を保存していてそれをアップロードしている?」いやいや、Instagramには「埋め込み」という機能がついていて、それを貼り付けるだけでInstagramの写真を紹介できるんですよー!

めっちゃ簡単ですよー。

ということで、ブログ等にInstagramを埋め込む方法をご紹介します。

Instagramを埋め込む

Instagramの埋め込みとは?

喫茶店さん(@kiss_a_ten)が投稿した写真 -


写真のようにInstagramを貼り付けることが出来ちゃいます。「いいね」や「コメント」の数が表示されることがわかります。これはInstagramから「埋め込みコード」を取得してブログに貼り付けただけです。

「埋め込み」コードを手に入れる

Instagramの写真を見る

埋め込みたいInstagramの写真をPCブラウザで開き、右下に有る「…」を押すと「埋め込み」とでます。

埋め込みコードが出る

すると「埋め込み」という小さいウインドウが立ち上がり、埋め込みようのコードがでます。それをコピペするだけです。

埋め込みコードはこんな感じ

<blockquote class="instagram-media" data-instgrm-captioned="" data-instgrm-version="4" style="background: #FFF; border-radius: 3px; border: 0; 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: -webkit-calc(100% - 2px); width: 99.375%; width: calc(100% - 2px);">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50% 0; text-align: center; width: 100%;">
<div style="background: url(data:image/png; display: block; height: 44px; margin: 0 auto -44px; position: relative; top: -22px; width: 44px;">
</div>
</div>
<div style="margin: 8px 0 0 0; padding: 0 4px;">
<a href="https://instagram.com/p/○○○(写真のURL)/" style="color: black; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none; word-wrap: break-word;" target="_top">エイリアン</a></div>
<div style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">
喫茶店さん(@kiss_a_ten)が投稿した写真 - <time datetime="2015-05-24T10:12:16+00:00" style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;">2015 5月 24 3:12午前 PDT</time></div>
</div>
</blockquote>

<script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>

埋め込みコードはこんな感じです。このままでは左寄せなので赤文字の「 margin: 1px; 」を「 margin: 0 auto;」に変えてあげると真ん中寄りになります。

また、このコードは「キャプションあり」(説明アリ)でしたが、キャプションは以下のような感じです。

<blockquote class="instagram-media" data-instgrm-version="4" style="background: #FFF; border-radius: 3px; border: 0; 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: -webkit-calc(100% - 2px); width: 99.375%; width: calc(100% - 2px);">
<div style="padding: 8px;">
<div style="background: #F8F8F8; line-height: 0; margin-top: 40px; padding: 50% 0; text-align: center; width: 100%;">
<div style="background: url(data:image/png; display: block; height: 44px; margin: 0 auto -44px; position: relative; top: -22px; width: 44px;">
</div>
</div>
<div style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; line-height: 17px; margin-bottom: 0; margin-top: 8px; overflow: hidden; padding: 8px 0 7px; text-align: center; text-overflow: ellipsis; white-space: nowrap;">
<a href="https://instagram.com/p/○○○(写真のURL)" style="color: #c9c8cd; font-family: Arial,sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 17px; text-decoration: none;" target="_top">喫茶店さん(@kiss_a_ten)が投稿した写真</a> - <time datetime="2015-05-24T10:12:16+00:00" style="font-family: Arial,sans-serif; font-size: 14px; line-height: 17px;">2015 5月 24 3:12午前 PDT</time></div>
</div>
</blockquote>
<script async="" defer="" src="//platform.instagram.com/en_US/embeds.js"></script>


また、太字「https://instagram.com/p/○○○(写真のURL)」とあるように、ここのリンクを変えてあげれば写真を換えることが出来ます。そのほかにも「max-width: 658px;」を変えてあげれば写真のサイズ変更も可能です。

以下埋め込み例です。

喫茶店さん(@kiss_a_ten)が投稿した写真 -


400px


喫茶店さん(@kiss_a_ten)が投稿した写真 -


500px



200px

全てのInstagram埋め込みに「margin:0 auto;」を適応させてそれぞれ違う「max-width」を与えました。max-widthは「横幅の最大値」なので、モバイル表示になってもちゃんと表示されます。

Instagramを見せてくれ

「Instagramの写真は画像でアップしているよ!」って人ならいいのですが、Instagramにあげているだけで、ブログに公開していない人は、是非とも公開して欲しい。僕に見せてください。たくさんのInstagramの素晴らしい写真が見たいのです。




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事