Smash Balloon Social Photo Feedの使い方（Instagramの埋め込み）
※Smash Balloon Social Photo FeedはWordPressのプラグインです。
オリジナル案件では使用できませんのでご注意ください(オリジナルはSnapWidgetを使用してください)。
・Instagramのアカウント名
・Instagramのパスワード
上記2点がないと設置が始められません。必ず貰ってください。
・facebook系のプラグインで、使い方によっては、本体サイトよりもインスタが上位に検索結果で表示されるなどの副作用もあります。そのため、サイト自体を良好に保つ必要があります。
・患者さんのインスタのバージョンによっては、インスタに飛べない場合もあります。
目次
プラグインをインストール～有効化
WordPressにログイン後、管理画面のプラグイン > 新規追加 から「Smash Balloon Social Photo Feed」と検索してください。
該当のプラグインが見つかったら「今すぐインストール」をクリックし、プラグインを有効化してください。
インスタグラムのアカウントと連携する（紐付ける）
Instagramフィード > セットアップウィザードを起動 を選択します。
「+新規追加」をクリックすると下のような画面に遷移するので、「Personal」→「Connect with Instagram」と選択していきます。
※ビジネスアカウントの場合は「Business」を選択してください。だだほとんどの場合「Personal」で大丈夫です（個人アカウントなのにBusinessを選択すると先に進めなくなります）。
「Connect with Instagram」を選択するとInstagramのログイン画面に遷移します。予め控えておいたIDとパスワードを入力しログインしてください。
「Instagramが、他のアプリやウェブサイトのCookieおよび同様の技術を利用することを許可しますか？」と出てくるので、内容を確認の上「許可」をクリックします。
「Smash Balloon Social Photo FeedはXXXに関する以下の情報をリクエストしています」と出てくるので、デフォルトのまま「許可する」をクリックします。
「許可する」をクリックするとWordPressの設定画面に戻ります。設定画面に先ほど追加したアカウントが表示されていればOKなので、一旦右上の「設定を終了」をクリックして保存します。
Instagramフィードを作成
続いてInstagramフィードの作成を行っていきます。
メニューから Instagramフィード > ユーザータイムライン 次へ をクリックします。
先ほど連携したアカウントが表示されるので、該当のアカウントにチェックを入れ 次へ をクリックします。
表示させたいページにショートコードを貼る
「次へ」をクリックした後、下の画像のような画面に遷移します。左側のカスタマイズタブから余白や投稿数、列などのカスタマイズが可能です。詳しいやり方は以下のサイトを参考にしてみてください。
参考：Smash Balloon Social Photo Feedのカスタマイズ方法
デザインが決まったら、Instagramのタイムラインを表示したい箇所にコードの埋め込みを行っていきます。右上の「埋め込み」をクリックします。そうすると「埋め込みフィード」というポップアップが表示され、ショートコードが表示されるのでこちらをコピーしてください。
あとはタイムラインを表示させたいページに、コピーしたショートコードをそのまま貼るだけです。
phpファイルに直接貼り付ける場合
※固定ページや下層ページのカスタムフィールド内ではなく、phpファイルに直接貼り付ける場合は以下のように記述してください。
|
1 |
<?php echo do_shortcode('[ショートコード]'); ?> |
うまく表示されないとき
ショートコードを貼り付けてもタイムラインが表示されないときは、設定を見直すとうまくいったりします。下記参考サイトを参考に設定を見直してみてください。
参考サイト：https://bear-fruit.online/smashballoon-issue/
JSのエラーによりタイムラインの写真がうまく表示されない時は、jquery-3.4.1.min.jsの読み込みをfooterからheaderに移動すると表示される場合もあります。