ワードプレスとインスタを連携させるプラグイン-Smash Balloon Social Photo Feedのインストールと設定

ブログの運営

ワードプレスとインスタを連携させるプラグイン-Smash Balloon Social Photo Feedのインストールと設定

Smash Balloon Social Photo Feedはブログ上にInstagramの投稿を表示しリンクしてくれる、とても便利なプラグインです。初めての方でも解りやすいように、使えるようになるまでの工程を、順を追って説明しています。

Smash Balloon Social Photo Feedのインストール

①まずはワードプレスのダッシュボードのメニューから、『プラグイン』をクリックします。

②インストール済みのプラグイン一覧が表示されるので、一番上の『新規追加』をクリック

③キーワードの欄に検索したいワードを入力します。今回は『Smash Balloon Social Photo Feed』←のカッコ内をコピペしてください。

検索結果が表示されます。類似品もあるので気を付けましょう。

今すぐインストール』ボタンをクリック

⑤インストールが終わったら『有効化』をクリック。これをしないと、動きません。

もう一度、ワードプレスのメニューから『プラグイン』を選択してインストール済みプラグイン一覧画面を開くと、Smash Balloon Social Photo Feedがインストールされていることが確認できます。

以上でプラグインのインストールは終了です。次はInstagramアカウントの連携に移ります。

Instagramアカウントとの連携

①ワードプレスの左側メニュー画面にInstagram Feedというのが追加されています。そこにマウスポインターを合わせると、Instagram Feedのメニューが出るので、『すべてのフィード』を選択

②表示された画面の『+新規追加』をクリック

『次へ』をクリック。下にある拡張フィードは無料版では使えません。

『+ソースを追加』をクリック

『Personal』か『Buisiness』を選択します。これはブログの主旨ではなく、Instagramのアカウントがパーソナルかビジネスかという意味です。以下は『Personal』での説明です。

 ⑥『Connect with Instagram』をクリック

 ⑦Instagramのログイン画面が表示されるので、ブログに表示させたいInstagramのアカウントでログインしてください。

『許可』をクリック。Instagramにログインするのに必須。

 ⑨『許可する』をクリック。Smash Balloon Social Photo FeedがInstagramの更新をチェックするのに必須。

『Yes, it’s my domain』をクリック。表示されたドメインを確認しましょう。

これでInstagramとブログとの紐づけは完了です。次は設定に移ります。

Smash Balloon Social Photo Feedの設定

無料版での説明です。

設定は大きく分けて、2つの工程に分かれます。以下、順を追って説明します。

①埋め込み

①再びワードプレスのメニュー画面→『Instagram Feed』→『すべてのフィード』を選択

②Smash Balloon Social Photo Feedの設定画面右上にある『埋め込み』ボタンをクリック

③新たにウィンドウが開くので、『コピー』ボタンをクリックして表示されたコードをコピーします。

サイトのページ内に表示させるケースと、ウィジェットで表示させる方法がありますが、今回はページ内に表示させる方法を説明します。

※注)これ以降、コードを張り付けるまでは別のものをコピーしないようにしましょう。クリップボードが上書きされて、やり直しになります。

④コードを任意の記事(トップページなど)の好きな場所にペーストすると、ブログ内のペーストした場所にインスタグラムの投稿画面が表示されるようになります。

下の画像はブロックエディターで編集していますが、クラシックエディターを利用の場合はテキスト編集画面で貼り付けてください。

②カスタマイズ

このままではずらずらと20件表示されるので、表示件数の設定をします。

Smash Balloon Social Photo Feedの左側のメニュー画面から、『カスタマイズ』→『フィールドレイアウト』をクリック。

少し下の『投稿数』を任意の数にします。PC、モバイルの2種類の設定が可能です。

次に表示させる列の数を入力します。こちらはPC、タブレット端末、スマホの3種類が設定できます。

たくさん表示させたい場合は初期の20でも構いません。

入力が終わったら、プレビュー画面の右上にPC、タブレット端末、スマホのプレビューボタンがあるので、そこから確認できますよ。

問題なければ、右上にある『保存』ボタンを忘れずにクリックしましょう。

その他、配色や投稿の表示(新着順かランダムか)、もっと見るやフォローボタンを変更することもできますので、自分好みにカスタマイズしてみてはいかがでしょうか?

広告

-ブログの運営