【インスタの埋め込みが出来ない?】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」をクリック。

Smash Balloon Social Photo Feedの「setttings」

 

③settingsの画面では

settingsの画面

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

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

1.Configure

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

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の設定も結構重要です。

'Follow' Button

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

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

3.Display your Feed

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

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

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

Display your Feed

カッパ君

簡単!

 

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

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

 

今回の内容は以上です。

カツオ

最後まで読んで頂きありがとうございました!

コメントはお気軽にどうぞ(承認制なので誹謗中傷は削除されます)

fourteen − 7 =