WordPressブログにインスタを埋め込む方法~プラグイン【Instagram Feed】のカスタマイズ詳細あり!

InstagramFeed

最近はブログの中にインスタやTwitterなどのSNSを入れている人が多いですね(^^)

いろいろな角度から自分を表現でき、もっと知りたいと思う読者の気持ちにお答えするためにもとてもオススメの方法だと思います(^^)

 

ここでは、WordPressにInstagramを埋め込む方法を解説していきます!

プラグインで簡単にできますよ~~

WordPressにInstagramを埋め込むとどんな感じ?

WordPressにInstagramを入れると、私のブログではこんな感じで表示されますね(^^)⏬

ブログも華やかになりますし、思わず『ポチッ』としたくなりませんか(^^)?

設定も簡単ですし、埋め込まない理由が見当たらない(^^)☆

Instagram Feedをインストール方法

私が今回使用したのは【Instagram Feed】というプラグインです。

では導入から設定方法まで解説していきますね!

 

Instagram Feedのインストール

① プラグイン ⇒ 新規追加 ⇒ プラグインの検索に【Instagram Feed】と入力

 

② 【有効化】ボタンをクリック

 

③ インストール済みプラグイン ⇒ Instagramフィードを見つけ⇒【settings】をクリック

 

Instagram Feedの設定

続いて設定に移ります(^^)☆

① Configureタグ【Instagram/Log in and get my Access Token and User ID】をクリック。

 

② ご自身のInstagramにログインするため、ユーザーネームパスワードを入力します。

※もしかすると一気に④までいく方もいるかもしれません。

 

ユーザーネームを忘れたかたはコチラをクリックして確認⏬

 

Instagram

 

右上の人のマークをクリックすると自分のページに飛ぶと思います。

そして【プロフィールを編集】をクリックするとユーザーネームが分かります。

 

③ 【Authorize】をクリック

 

④ Access TokenUser IDが表示されるので、それぞれをコピーして矢印の場所へ貼り付けます。

 

忘れず、【変更を保存】をクリック!

 

カスタマイズ

次は、どんな風に表示させたいかを決めていきます(^^)!

Cosutomizeタグをクリックしてお好きなようにカスタマイズしていきます。

General とLayout のカスタマイズ

 

 

 

1. 100%にしておくと、ページに合わせて自動で幅が決まります。

2. pxか%を選べるのですが、空欄でよいと思います。

3. 背景色が選べます。

4. 写真の表示枚数を決めることができます。

5. 縦に何枚表示するかを決めることができます。

6. 余白の幅を変更できます。

7. チェックを入れます。(携帯で表示する際にレイアウトが変更されないようにするため)

 

上記の通りに設定した場合、出来上がりはこんな感じです⏬

 

Photos~Heeder のカスタマイズ

Photosカスタマイズ

8. Sort Photos (新着順にしますか?それともランダム?)

 

Image Resolution

 9. このままで良いと思います。

 

Photo Hover Style

10. 有料です(^^)

 

Carousel

11. 有料です(^^)

 

Headerカスタマイズ

12. Show the Header(ヘッダーを表示する場合はチェック。)

13. Show Bio Text(ヘッダーに紹介文を入れる場合はチェック。)

14. Header Text Color (ヘッダーの文字色を変更できます。)

 

Caption~‘Load More’Buttoのカスタマイズ

Captionカスタマイズ

15. 有料です(^^)

 

Likes & Comments

16. 有料です(^^)

 

Lightbox Comments

17. 有料です(^^)

 

‘Load More’ Buttonカスタマイズ

18. Show the ‘Load More’ button(Load Moreボタンを表示する場合はチェック)

19. Button Background Color(ボタンの背景色の変更)

20. Button Text Color(ボタンの文字色を変更)

21. Button Text(Load Moreの表記を変更)

 

‘Follow Button’~Moderationまでのカスタマイズ

 

‘Follow’ Buttonカスタマイズ

22. Show the Follow button(Followボタンを表示する場合はチェック)

23. Button Background Color(ボタンの背景色の変更)

24. Button Text Color(ボタンの文字色の変更)

25. Button Text(Followの表記を変更)

26.  Post Filtering(このままで良いと思います)

 

Moderationカスタマイズ

27. Moderation(このままで良いと思います)

 

Miscのカスタマイズ

 

Miscカスタマイズ

このままで良いと思います。

忘れずに【変更と保存】をクリック。

 

Instagram Feedを埋め込む

カスタマイズお疲れ様でした(^^)!

では最後にInstagramをWordPressに埋め込みましょう!!

Cosutomizeタグの下の方にある、【Instagram – Feed】をコピーします。

そしてブログの好きな場所に貼り付けたらOK!

私のようにサイドバーに埋め込みたい方は、【ウィジェット】を開き、サイドバーにテキストを配置し、テキストの本文に【Instagram – Feed】を貼り付け、保存!

 

これで、サイドバーに表示することができます(^^)☆

Twitterの埋め込み方法はコチラ

⇒WordPressブログにTwitterを埋め込む方法【2018】Follow・Motionボタンの設まで

ただ今ブログ運営者を対象に、アクセスアップ・収益アップの無料ブログ添削を実施しています。

Rimの無料コンサルに興味がある方はコチラをCLICK↓↓

 

Rimのプロフィールはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です