プラグイン

【インスタの埋め込みが出来ない?】Smash Balloon Social Photo Feedを使ってみよう!

この記事の内容

ブログにインスタを埋め込むプラグインであるSmash Balloon Social Photo Feedの解説記事になります。

ブログにインスタのタイムラインが埋め込めない!と悩んでいる方は手段の一つとしてぜひ参考にしてみて下さい。

田村カツオ
田村カツオ
この記事で伝えたい事をざっと述べると↓
  • InstaWidgetが使えなくてもできる。
  • instagramAPIが使えなくてもできる。
  • Smash Balloon Social Photo Feedでインスタの埋め込みができる。
この記事によってSmash Balloon Social Photo Feedを使ったインスタのタイムライン埋め込みが可能となります。
カッパ君
カッパ君
という事で内容いくよ!

インスタのタイムライン埋め込みならSmash Balloon Social Photo Feed!

インスタのタイムライン埋め込みが出来ない?

インスタのタイムラインをブログに埋め込むプラグイン・Smash Balloon Social Photo Feedの使い方を説明してきます。

 

①まずはSmash Balloon Social Photo Feedをインストール&有効化します。

Smash Balloon Social Photo Feed

 

②ダッシュボード画面の「プラグイン」→「インストール済みプラグイン」と進み、Smash Balloon Social Photo Feedの「setttings」をクリック。

settings

 

③settingsの画面では

instagram feed
  • 1.Configure
  • 2.Customize
  • 3.Display your Feed
  • 4.Support

と4つのタブがありますが、1~3が重要なので1~3について以下説明していきます。

1.Configure

まず、インスタグラムにログインしている状態で、1.Configureの上部の青いボタンを押します。

設定画面

「personal」か「business」かを選択するようなポップアップが出てきますが、多くの人は「personal」を選択するので問題ないはず。

その後、英語の説明が出てきますが、要は「このプラグインが貴方のインスタグラムから情報をもらって良いですか?」という事なので、「Authorize」を押します。

 

この画面では他の設定は特にいじる必要はないです。

最後に「変更を保存」を押すのを忘れずに。

カッパ君
カッパ君
興味があれば色々試してみてもOKだけどねー。

2.Customize

2.Customizeというタブを選択して、インスタグラムの埋め込みフィード(埋め込みゾーン)のカスタマイズをしていきます。

 

①まずGeneralの部分ですが、ここは基本的にはデフォルトのままでOKです。

general

フィードの幅は基本的には100%を選択しましょう。

フィードの高さは、フィードの幅が100%なら特に触る必要はないです。

背景色は色々試してみると面白いですが、デフォルトのままでも無難に表示されますよ。

 

②次にLayoutの部分ですが、ここはかなり重要です。

layout

一番上のLayout Typeは有料版の機能です。

カツオ
カツオ
僕は無料版を使っており、無料版でも十分高性能。

写真の数や列の数はお好みで調整しましょう。

埋め込む箇所によって適切な設定があるはずです。

写真の周りの余白は大きすぎても狭すぎても不自然です。

デフォルトのままでもいいと思いますが3~5pxくらいがオススメ。

 

③Photosでは埋め込みフィードに表示されるインスタの写真の順番や解像度を選択出来ます。

photos

基本的にはデフォルトでOKです。

 

④続いてHeaderの設定です。

Header

 

まず、ヘッダーが何なのかを下記に画像で示しておきますね。

ヘッダー

矢印で示したのがヘッダーです。

Headerの設定では、ヘッダーを表示するかどうかやその大きさ(ちなみに上記画像ではヘッダーの大きさはLargeです)、プロフィール文や文字の色を変えられます。

お好みで設定してみましょう。

 

⑤’Follow’ Buttonの設定も結構重要です。

フォローボタン

フォローボタンはぜひ表示させておきたいですね!

背景色や文字などはお好みで調整してみて下さい。

3.Display your Feed

最後に実際にインスタのタイムラインをブログに埋め込んでいきましょう。

3.Display your Feedというタブを選択しショートコードをコピーします。

それを任意の場所に貼り付ければ、そこにインスタのタイムラインが埋め込まれます。

ショートコード
カッパ君
カッパ君
簡単!

ちなみにDisplay your Feedの下の方を見ると、もっと細かくカスタマイズできるようになっていますが、ここまでの設定をしておくだけでも全然綺麗にインスタを埋め込み出来ます。

ですので、興味のある人がやってみる、くらいで良いかと個人的には思っています。

 

今回の内容は以上です。

ABOUT ME
田村カツオ
副業お坊さんブロガー。失敗ばっかりで苦労もしたけどブログが好き!YouTubeとTwitterもよろしくお願いします!

POSTED COMMENT

  1. 後藤 より:

    初めまして。
    ワードプレスにインスタ埋め込みの記事を読ませて頂きました。
    記事の通りに設定したのですが、ワードプレスに表示されたのがユーザー名と[load more]ボタンと[follow on instagram]のボタンのみで、投稿画像が表示されない状態になってしまいました。
    なにか原因がわかるようでしたら、教えて頂きたいと思いコメントしました。
    よろしくお願いします。

    • カツオ より:

      こんにちは^^
      画像が表示されないという事でしたら、おそらく読み込みが遅れている状態なのではないかなーと思います。
      ブラウザのキャッシュを削除したり、PCを再起動したりすると上手く行く事も多いので、ぜひ試してみてください!

後藤 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

five × four =