簡単!インスタグラム(Instagram)の投稿をウェブサイト上に表示してみる

こんにちは!

ワードプレスなどを使ってブログ記事を書いている時に、「インスタグラムのこの投稿をブログの中に表示したいなぁ…」なんて瞬間があったりしませんか?

今回はウェブサイト上に簡単にインスタの投稿を表示する方法を紹介していきたいと思います!

インスタグラムにログインして埋め込みコードを取得する

まず、PCでインスタにログインします。

埋め込みたい投稿を選択し、

インスタの埋め込みたい投稿を選択する

右下のメニューボタンをクリックします。

右下のメニューをクリック

そして、メニューの中から『埋め込み』をクリックします。

メニューの中の埋め込みをクリック

『埋め込みコードをコピー』をクリックすると、埋め込み用のコードがコピーされます!

埋め込みコードをコピーを押すと、コードがコピーされる

HTMLを理解されている方であれば、このコードを任意の場所に貼り付けるだけでOKです!

HTMLはさっぱりだけど、ワードプレスでブログ記事を書いている方でも、このコードを使って投稿を表示することができます!

次項でその方法を紹介していきたいと思います!

ワードプレスでインスタの投稿を表示する

まずは、ワードプレスの記事投稿ページを表示します。

ワードプレスの本文の記述方式には『ビジュアル』と『テキスト』がありますが、ソースコードを使用できるのは『テキスト』です。

ここを読んでいる方はおそらく、HTMLの記述が必要ない『ビジュアル』で普段記事を書いている方が多いかと思いますので、まずは『テキスト』を選択しましょう

テキストを選択

そして、任意の場所に先ほどコピーしたソースコードを貼り付けます。

インスタグラムの埋め込みコードを貼り付け

貼り付け後は『ビジュアル』に戻します。(もちろん、『テキスト』で普段記事を書いている方はそのままでOKです)

こんな感じで画像以外の要素が表示されていると思います。

インスタグラムの投稿の画像以外が表示される

この画面でインスタの投稿の写真が出ていないのは仕様です。ワードプレスのプレビューで確認する、もしくは記事を公開するとしっかり写真が表示されているはずです!

この記事にも実際に貼り付けてみました。こんな感じで表示されます。

#yamasan #yoshio

tanaka TipDipさん(@tanaka_tipdip)がシェアした投稿 –

まとめ

いかがだったでしょうか?

インスタならスマホから簡単に画像加工ができるので、写真を加工してインスタにアップし、その投稿をブログ上に貼り付けるなどの使い方をしても面白いかもしれません。

過去にブログ(Instagram APIを使ってインスタグラムの画像をウェブサイト上に表示する)で紹介したInstagram APIのサービス終了がアナウンスされているので、今回の方法でインスタを活用していくのもアリかもしれないですね!

それでは、また。

イベントのご案内

ウェブマーケティング系最大級のイベントが2019年11月23日(土)グランフロント大阪で開催!
10月11日(金)までのお申込みの方は早割の特別料金でご参加いただけます!
詳細はバナーをクリック

ウェブ解析士会議 in Osaka

2018.08.31

Twitterでつぶやく

Facebookでシェアする

実験中→ いいね: 11 ツイート: 0

おすすめの記事

TOP