知識なしWebサイト運営

Smash Balloon Social Photo Feedでギャラリーページを作る【インスタをサイト(ブログ)連携】

2019年10月21日

簡単な更新で映えるトップページに

私自身はつい最近までインスタ(instagram)はやっておりませんでした。

基本的には平日は子供の送り迎えとコンビニ(1日に1~2回)に家から出る程度でなので子供や日常以外で写真を撮ってアップするようなものがありません。

私が記事を書いたりしているので若干妻も気になっていたのか「簡単に更新できるならやってみようかな」と言い出したので

どんなものがいいかな考えた結果、妻はインスタをしっかりやり込んでいたのでそれもブログの記事的に使えれば

たまにしっかりした記事を書いて簡単な記事はインスタを活用しようというところから調べ出しました。

プラグイン選考基準は無料で使えること、ヘッダーの非表示ができること、フォローを誘うボタンの非表示ができることでした。

最終的に『Smash Balloon Social Photo Feed』と『InstaShow』で悩みましたが下にずらずらーっと並べたいということでしたので『Smash Balloon Social Photo Feed』に軍配があがりました!

※『Smash Balloon Social Photo Feed』は以前は『instagram feed』という名前でした。検索はどちらでも出てくるので有料版などもっとカスタムしたい方は調べてみてください。

 

『Smash Balloon Social Photo Feed』のおすすめポイント

・コメントの載せず画像だけを表示することができる

・ヘッダーなど余分なものを非表示にできる

・カラム数や表示数を変更できる

・画像をクリックするとインスタグラムのページにいける

画像だけをずらっと並べたい方はコチラがおすすめ

 

『InstaShow』のおすすめポイント

・特別な設定をしなくとも綺麗でシンプルなインスタグラムっぽくなくデザイン

・見る人が操作しやすいページ送り表示(両サイドに▶があるやつ)

・カーソルを写真に乗せるとコメントが浮き上がる

・インスタグラムを感じさせないギャラリー仕様

・インスタグラムへもいけるライトボックス機能がある

下へずらっと並べたくない方はコチラがおすすめ

 

『Smash Balloon Social Photo Feed』を使う

では早速『Smash Balloon Social Photo Feed』(instagram feed)の設定してみたいと思います。

無料版で出来ることだけを簡単に解説させていただきます。

先にプラグインをインストールする前に連携させたいアカウントでインスタグラムのログインをしておきます。

ログインが完了したら別タブでダッシュボードへ行っても同じページからダッシュボードへ行っても構いません。

 

プラグイン→新規追加で検索に『Smash Balloon Social Photo Feed』を入力します。ちなみに『instagram』や『instagram feed』でも出てきます。

下の画像のプラグインが表示されたら今すぐインストール→有効化します。(画像は有効済みとなっております)

 

ダッシュボードの「Instagram Feed」から赤枠の部分をクリックします。

画像を見た感じで分かると思いますがここをクリックすることでアカウントを連携させます。

 

先にインスタグラムにログインしておきましたのでログインしてあるアカウントが赤枠の部分の名前で表示されているか確認して

問題がなければオレンジ枠の「Authorize」をクリックします。

 

赤枠でアカウント

緑枠に✔を入れることでプラグインを削除した場合でも設定した情報は残すになります。

オレンジ枠は更新頻度と方法ですが私は初期設定のままにしました。

最後に変更を保存します。

 

「Instagram Feed」のページのまま上部にある「2.Customize」タブを選択。

ここではレイアウトなどの設定ができます。有料版だとかなり色々な設定が出来るようですが今回は無料の範囲で解説します。

赤枠の上から順に表示させる投稿数カラム数画像の周りの余白のサイズスマホレイアウトを無効にする(✔を入れると無効になります)

緑枠の上から順に新着順に表示させるかランダム表示か画像の解像度の選択(自動・小・中・大が選べます)

下へスクロールして次の項目へ。

 

次にヘッダーのカスタムです。

赤枠がヘッダーの表示・非表示

緑枠がヘッダーサイズ、テキストの表示、テキストの色を選択

更に下へ進めます。

 

赤枠はLoad Moreボタンのカスタム、上から順にボタンの表示・非表示、ボタンの背景色の選択、テキストの色選択、ボタンのテキスト変更

緑枠はFollowボタンのカスタム、上から順にボタンの表示・非表示、ボタンの背景色の選択、テキストの色選択、ボタンのテキスト変更

以上が無料で出来る範囲内の変更となります。

最後に変更を保存します。

 

「Instagram Feed」のページのまま上部にある「3.Display Your Feed」タブを選択。

ここでは表示させたいタイプのショートコードが載っています。

有料でなくても選択できるものがありますので見せたいイメージに合うものを選んでみてください。

【instagram-feed】のショートコードを載せたいページに貼ります。※表示されてしまうので[]を変えています。

 

以上で完成です。

まだまだ画像が少ないのでぱっとしませんが…

既に多くの投稿をされている方はそれを載せるだけで魅力的なページにできるかと思います。

\ 完成 /

instagramのページ

 

最後に

妻用のブログを準備するにあたって今回のインスタグラムと連携するプラグインを導入してみました。

私のは見せるほどのものではありませんのでひとまずフッターメニューにページを掲載してみます…

Smash Balloon Social Photo Feedとinstagram feedでどちらにしようか悩んだ結果同じものだった(名前が変更された)という経緯があったので記事にさせていただきました。

たぶん名前にinstagramの表記がダメだったような感じっぽいです。

こんなに簡単に連携できるというのは非常にありがたいプラグインだと思います。

妻用のプログはページに最新記事とインスタの新着順で画像が並ぶようなレイアウトにしてみたいなと思います。

簡単にインスタと連携して魅せる映えるページが作れる『Smash Balloon Social Photo Feed』のご紹介でした。

 

 

-知識なしWebサイト運営

Copyright© 『誰かの役に立つ』が家族のシアワセに@兼業主夫 , 2019 All Rights Reserved.