ブログをやっていると、ツイッターやインスタグラムの投稿を載せている人がいますよね。
その時埋め込みコードをコピーして使うと思うのですが、あれってめちゃくちゃ長いんですよ。
今日はインスタグラムを埋め込む人のために短いコードを作ったので、コピペしてご利用ください。
インスタの埋め込みコード【簡略版】
キャプションなし
>||
〜ここから下〜
<blockquote class="instagram-media" data-instgrm-version="5" 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);">
<a href=“ここにリンクを入れる” target="_blank"></a>
</blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
〜ここまで〜
||<
こちらがインスタに埋め込む時のコードです。
「ここにリンクを入れる」と書いてあるところに、投稿のリンクを入れてHTMLモードで貼り付けるだけなので簡単だと思います。
こちらはキャプションという文字が出てこないようになっています。
キャプションあり
>||
〜ここから下〜
<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="5" 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);">
<a href="ここにリンクを入れる" target="_blank"></a>
</blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
〜ここまで〜
||<
こちらは埋め込みの際に文字が出てくるキャプションありのバージョンです。
どちらのバージョンでも使いやすい方をお使いください。
インスタグラムの埋め込みコードまとめ
実際にインスタの埋め込みを使ってみるとわかるのですが、どうしてあんなに長く書いてしまうのか不思議なくらい長いコードです。
こちらのコードをコピペするだけで、スッキリするのでぜひご使用ください。
こちらのnoteはおすすめです。↓
note.mu
