インスタグラムの投稿をブログに表示させる方法!

おはようございます!
インファクト京都オフィスの山井です。

インスタグラムを活用されている方で、インスタグラムに投稿している写真には拘っている方が多いと思います。

その中で、「せっかく拘った写真だからそのままブログにも載せたい・・」と思われた方はおられませんか?

実は、インスタグラムに投稿した写真を簡単にブログに埋め込ませて表示ができちゃいます。
今回は、インスタグラムの写真をブログへ簡単に表示できる方法をご紹介します!

インスタグラムをブログに表示させる方法

それでは、早速インスタグラムをブログに表示させる方法をご紹介します!
※今回はWordPressを使いご説明していきます。

①表示させたいアカウントを開く

まずは、ブログに表示させたいアカウントをブラウザ(ChromeやIE)で開いてください。
そして、ブログに表示させたい投稿を選択して「・・・」をタップします。

②ブログに貼り付けるソースをコピー

「・・・」をタップすると、下記のポップ画面が表示されますので「埋め込み」を選択します。

「埋め込み」を選択すると、「埋め込みコードをコピー」を選択できる画面が表示されますので、「埋め込みコードをコピー」をタップしてソースをコピーしてください。

※「キャプションを追加」は、投稿文の内容を表示させるかの有無を選択できますので、投稿内容を表示させたい場合は、チェックボックスにレ点を入れてください。

③ブログのテキスト画面に貼り付け

ソースをコピーした後は、ブログのテキストエディターのテキスト画面に貼り付けます。

※必ず入力画面を「テキスト」に切り替えてからソースを貼り付けてください。

これでプレビューをしてみると、

ブログにインスタグラムの投稿内容が表示されています!

実際に、下記へインスタグラムを表示させてみます。

この投稿をInstagramで見る

一保堂茶舗 Ippodo Teaさん(@ippodotea)がシェアした投稿

京都で有名なお茶屋「一保堂」さんの公式アカウントを表示させてみました。
インスタグラムの投稿内容がそのままブログに表示されており、プロフィールや投稿内容に遷移することができます。

表示サイズを変更したい場合

ソースをコピーしてブログに貼り付けた場合、上記のようにかなり大きいサイズでインスタグラムの投稿内容が表示されます。

サイズを小さくしたい方は、ソースを貼り付けた際にソースの上部にある下記の数値を変更してください。

max-width:    (横幅)
min-width: (縦幅)

max-width:300 min-width:400に修正してサイズを小さくしたものを下記に表示させてみました。

この投稿をInstagramで見る

一保堂茶舗 Ippodo Teaさん(@ippodotea)がシェアした投稿

先ほどよりも、サイズが小さくなりバランスが良くなったかと思います。
注意点として、数字以外のソースを修正すると表示が崩れますので、数字以外は修正しないように気をつけてください!

まとめ

いかがでしたでしょうか?
インスタグラムの投稿を簡単にブログへ表示させることができました。
インスタグラムとブログを連携することで、誘導や集客UPにも繋がりますので、ぜひご活用ください!

  • シェア
  • twitter
The following two tabs change content below.
山井海人

山井海人

INFACT 京都office 株式会社インファクト
京都生まれの株式会社インファクトのディレクターです。
京都を代表する観光地の嵐山に近い右京区で育ちました。
過去に広告会社で営業を経験し、ヘルス業界を中心にホームページやポータルサイトを介した集客のお手伝いをしていました。そこで、WEBマーケティングの有無や良し悪しで集客に大きく影響を受ける事を学びました。その経験を活かし、インファクトではお客様の課題に沿った最適なWEBサービスをお届けできるよう努めています。
http://www.infact1.co.jp/
  • twitter
  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP
LINE it!