ブログ運営

WPのサイドバーや記事内にInstagramの埋め込みをする方法

wpにインスタの埋め込み

そもそも私はInstagramにハマってインスタからこのブログが始まりインスタの使い方などを日々綴っているわけですが、肝心のことを後回しにしてしまっていました。

インスタのハウツーを書いていながらお前は何者よって感じよね、リンクがどこにも貼っていないという・・・こういう方法があるよ⇒ココを見てみてね!ってリンクがあるといいと思うのよね。ということでいってみましょう。

WPにインスの記事やプロフィールを貼り付ける方法

先日、記事内にTwitterの埋め込みをする方法を書きましたが

WordPressにTwitterの記事を埋め込む方法
WordPressにTwitterの記事を埋め込む方法WordPressにTwitterの記事を埋め込む方法が知りたいのです。 よくブログの記事にTwitterの投稿を貼り付けている人がい...

TwitterやInstagramをしているなら記事と連携して情報発信していくのが露出も増えますよね。調べてみるとワードプレスにインスタを貼る方法はとても簡単でした。

簡単にできたのは『InstaWidge』を使ったからだと思います。その解説をしていきます。

『InstaWidge』とは?

InstaWidget」というのは、wordpressにインスタグラムの埋め込みコードを発行してくれる無料サービスでプロフィール画面を追加することができる(ウィジェット)です。

その場でプレビューしながら作っていくことができるので初心者にもやさしいのです。表示を確認したら、作成したコードを張り付けるだけ、簡単にインスタグラムをWpの記事内にもサイドバーにもに埋め込む事ができます。

InstaWidgeへアクセスして『早速使ってみる』をクリックしてみましょう。

WordPressにInstagramを埋め込む

InstaWidgetの使い方

各項目を入力してプレビューを見ながらボタンをクリックして、表示内容を確認してください。

WordPressにInstagramを埋め込む

プレビューを確認しながら、思った通りの表示になるまで調整します。


基本編

ユーザー名入力画面

ハッシュタグでパーツを作成することもできますが今回は空欄にします。

レイアウトの指定
WordPressにInstagramを埋め込む

左側が横に表示する枚数、右側が縦に表示する枚数横3✕縦2に設定してみるとこんなふうになります。

WordPressにInstagramを埋め込む
プレビューで確認する

プレビューボタンをクリックして表示内容を確認しながら、思った通りの表示になるまで調整します。

WPのサイドバーにInstagramを埋め込む

プレビューボタンで直観的に簡単に設定することができました。

WPのサイドバーにInstagramを埋め込む方法
コードを取得する
WPのサイドバーにインスタの埋め込み

最後にコードを取得します。コードのところで右クリック→コピーします。「InstaWidget」を表示させたいホームページやブログにペーストします。

 

コードをコピーしてサイトに張り付ける

「InstaWidget」を表示させたいwpの記事内かサイドバーに生成されたコードを張り付けます。

記事に埋め込む方法

そのまま記事の「テキストエディタ」に貼り付けると記事に埋め込みも可能です。

wpにInstagramの埋め込み

サイドバーに埋め込む方法

私がしたかったのはサイトのサイドバーに自分のInstagramを埋め込むことでした。なのでこちらの方法

wpのサイドバーにインスタを埋め込む

WordPressのウィジェットを編集します。「外観」→「ウィジェット」

「カスタムHTML」を選択し、表示したいエリアへ追加します。

wpのサイドバーにインスタ埋め込み

追加した「カスタムHTML」内にコピーしたコードを貼り付けます。タイトルは好きなものを入れてもいいですし、入れなくても大丈夫。

最後は「保存」を押して終了です。

まとめ

思いの外簡単すぎて拍子抜けしましたプラグインを入れずにカンタンにできる「InstaWidget」でした。 

wpにインスタを埋め込み

ウィジット幅を「700」、レイアウトは「5×2」にしてみました。横幅いっぱいになるので記事の下に固定したり、記事にそのまま貼りつけてもいいですね。