ブログにインスタを埋め込むプラグインであるSmash Balloon Social Photo Feedの解説記事になります。
ブログにインスタのタイムラインが埋め込めない！と悩んでいる方は手段の一つとしてぜひ参考にしてみて下さい。
- InstaWidgetが使えなくてもできる。
- instagramAPIが使えなくてもできる。
- Smash Balloon Social Photo Feedでインスタの埋め込みができる。
他にもおススメなプラグインは沢山ありますので下記記事をぜひ参考にしてみて下さい↓
WordPressブログで稼ぐのにおすすめなプラグイン13選を紹介！
インスタのタイムライン埋め込みならSmash Balloon Social Photo Feed！
インスタのタイムラインをブログに埋め込むプラグイン・Smash Balloon Social Photo Feedの使い方を説明してきます。
①まずはSmash Balloon Social Photo Feedをインストール＆有効化します。
②ダッシュボード画面の「プラグイン」→「インストール済みプラグイン」と進み、Smash Balloon Social Photo Feedの「setttings」をクリック。
③settingsの画面では
- 1.Configure
- 2.Customize
- 3.Display your Feed
- 4.Support
と4つのタブがありますが、1～3が重要なので1～3について以下説明していきます。
1.Configure
まず、インスタグラムにログインしている状態で、1.Configureの上部の青いボタンを押します。
「personal」か「business」かを選択するようなポップアップが出てきますが、多くの人は「personal」を選択するので問題ないはず。
その後、英語の説明が出てきますが、要は「このプラグインが貴方のインスタグラムから情報をもらって良いですか？」という事なので、「Authorize」を押します。
この画面では他の設定は特にいじる必要はないです。
最後に「変更を保存」を押すのを忘れずに。
2.Customize
2.Customizeというタブを選択して、インスタグラムの埋め込みフィード（埋め込みゾーン）のカスタマイズをしていきます。
①まずGeneralの部分ですが、ここは基本的にはデフォルトのままでOKです。
フィードの幅は基本的には100％を選択しましょう。
フィードの高さは、フィードの幅が100％なら特に触る必要はないです。
背景色は色々試してみると面白いですが、デフォルトのままでも無難に表示されますよ。
②次にLayoutの部分ですが、ここはかなり重要です。
一番上のLayout Typeは有料版の機能です。
写真の数や列の数はお好みで調整しましょう。
埋め込む箇所によって適切な設定があるはずです。
写真の周りの余白は大きすぎても狭すぎても不自然です。
デフォルトのままでもいいと思いますが3～5pxくらいがオススメ。
③Photosでは埋め込みフィードに表示されるインスタの写真の順番や解像度を選択出来ます。
基本的にはデフォルトでOKです。
④続いてHeaderの設定です。
まず、ヘッダーが何なのかを下記に画像で示しておきますね。
矢印で示したのがヘッダーです。
Headerの設定では、ヘッダーを表示するかどうかやその大きさ（ちなみに上記画像ではヘッダーの大きさはLargeです）、プロフィール文や文字の色を変えられます。
お好みで設定してみましょう。
⑤’Follow’ Buttonの設定も結構重要です。
フォローボタンはぜひ表示させておきたいですね！
背景色や文字などはお好みで調整してみて下さい。
3.Display your Feed
最後に実際にインスタのタイムラインをブログに埋め込んでいきましょう。
3.Display your Feedというタブを選択しショートコードをコピーします。
それを任意の場所に貼り付ければ、そこにインスタのタイムラインが埋め込まれます。
ちなみにDisplay your Feedの下の方を見ると、もっと細かくカスタマイズできるようになっていますが、ここまでの設定をしておくだけでも全然綺麗にインスタを埋め込み出来ます。
ですので、興味のある人がやってみる、くらいで良いかと個人的には思っています。
今回の内容は以上です。
初めまして。
ワードプレスにインスタ埋め込みの記事を読ませて頂きました。
記事の通りに設定したのですが、ワードプレスに表示されたのがユーザー名と[load more]ボタンと[follow on instagram]のボタンのみで、投稿画像が表示されない状態になってしまいました。
なにか原因がわかるようでしたら、教えて頂きたいと思いコメントしました。
よろしくお願いします。
こんにちは＾＾
画像が表示されないという事でしたら、おそらく読み込みが遅れている状態なのではないかなーと思います。
ブラウザのキャッシュを削除したり、PCを再起動したりすると上手く行く事も多いので、ぜひ試してみてください！