インスタグラムをサイトに表示するプラグインSmash Balloon Instagram Feed
投稿画像を表示させることができるのが、「Smash Balloon Instagram Feed」wordpressプラグインです。
Smash Balloon Instagram Feedプラグインを利用するメリット
- ホームページでSNSを宣伝ができる。
- Instagram Feedの表示レイアウトがカスタマイズできる。
- モバイルフレンドリーなので、SEO対策に適している。
もうアイコン設定だけは、やめましょう！
ワンランク上のレイアウトで見栄えを良くしましょう！
デモサイトのように、設定ができます。
すぐに読める目次を見る
Smash Balloon Instagram Feedの紹介
お持ちインスタグラムのアカウントで投稿した写真を更新ごとにホームページに表示 できるのがSmash Balloon Instagram Feedのプラグインです。
一般的だと、小さいSNSアイコンをページの下に設定して、気になる方はSNSをみると思いますが、 なかなかクリックされない方が多いと思いませんか？
SNSアイコンは、小さいし、、、
デザイン的に収まりがいいから、、、
多くのホームページがアイコンを使用しているからなどなど
インスタグラム更新してるし、フォロワー数も多いし、ホームページに表示させたいなら、「Smash Balloon Instagram Feed」プラグインを使うべきです！
「Smash Balloon Instagram Feed」は、デフォルト設定でも上手く表示ができますが、ひと手間加えることでオリジナルのレイアウトに！
デフォルト設定ではなくhtml,cssのソースコードを少しいじって、初心者の方でも設定できるように解説していきます。
インスタグラム連携方法紹介
Smash Balloon Instagram Feedのプラグインを有効化にする
Instagrame Feedのsetttingをクリックすると設定画面があります。
connect an Instagram Accountsをクリックして手順通りに認証設定をしていきます。
紐づけする前に、インスタグラムを開いておくとスムーズです。
インスタグラムのアカウント名が表示されたら、紐づけ完了です。
ここから！インスタグラム表示のカスタマイズ
パソコンの時は、10投稿表示で２列5個ずつ並べて、スマホの時は、１列で４個表示させています。
スマホの表示が切り替えられる。
モバイルフレンドリー対応でSEOにもいい！
自分好みにカスタマイズできる！！
ソースコードを張るだけでおしゃれに設定ができます！！
ソースコードを設定することでプラグイン内の管理画面（setting画面）での設定はしません！
本来なら細かい詳細設定をCustomizeからするのですが、コード張る場合は、設定不要です。
ソースコードを解説
例）footer.php又は、お好きな箇所で大丈夫です。
ショートコードの中身
①instagram-feed num=10
インスタグラムの投稿表示の数を１０に設定
②cols=5
並び順が5個ずつの設定
③imagepadding=5
表示画像の間隔を5に設定
④imagepaddingunit=px
Instagramフィード内（画像）の調整は、px=何も書かない設定
⑤imageres=full
Instagramの写真を大きさをfullサイズで設定
⑥showheader=false
アカウントのアイコン表示・非表示
⑦showbutton=false
インスタグラムのリンクボタンの表示・非表示
⑧showfollow=false
インスタグラムのフォローボタンの表示・非表示
ワードプレスに設定するソースコードを確認NO.1
表示させたい箇所に設定します。
HTMLと書いてありますが、ワードプレス内のPHPに設定します。
cssは、テーマによって異なります。基本的にstyle.cssに入れて設定します。
<div class="Insta-Inner">
<h2 class="Insta-Tit">Instagram</h2>
<p class="Insta-Text">新商品やおすすめ商品を配信しております。</p>
<p class="Insta-Btn"><a href="URLを入力してください。" target="_blank">アカウント名</a></p>
</div>
こちらのソースコードは、任意です。
ソースコードを設定したらインスタグラムが表示される
<?php if ( wp_is_mobile()) : ?>
<div class="Insta-Main"><?php echo do_shortcode
('[instagram-feed num=4 cols=5 imagepadding=1 imagepaddingunit=px
imageres=full showheader=false showbutton=false showfollow=false ]'); ?></div>
<?php else: ?>
<div class="Insta-Bg"><div class="Insta-Main"><?php echo do_shortcode
('[instagram-feed num=10 cols=5 imagepadding=5 imagepaddingunit=px
imageres=full showheader=false showbutton=false showfollow=false ]'); ?></div></div>
<?php endif; ?>
インスタグラム表示のカスタマイズNO.2
ソースコードの画面
ワードプレスに設定するソースコードを確認NO.2
表示させたい箇所に設定します。
HTMLと書いてありますが、ワードプレス内のPHPに設定します。
cssは、テーマによって異なります。基本的にstyle.cssに入れて設定します。
<div class="Insta-Inner">
<h2 class="Insta-Tit">Instagram</h2>
<p class="Insta-Text"><a href="URLを入力してください。" target="_blank">アカウント名</a></p>
</div>
こちらのソースコードは、任意です。
ソースコードを設定したらインスタグラムが表示される
<?php if ( wp_is_mobile()) : ?>
<div class="Insta-Main"><?php echo do_shortcode
('[instagram-feed num=9 cols=5 imagepadding=1 imagepaddingunit=px
imageres=full showheader=false showbutton=false showfollow=false ]'); ?></div>
<?php else: ?>
<div class="Insta-Bg"><div class="Insta-Main"><?php echo do_shortcode
('[instagram-feed num=8 cols=4 imagepadding=10 imagepaddingunit=px
imageres=full showheader=false showbutton=false showfollow=false ]'); ?></div></div>
<?php endif; ?>
