気ままにガーデニングとwebサイト

気ままにガーデニング-flower-

インスタグラムをサイトに表示するプラグインSmash Balloon Instagram Feedインスタグラムをサイトに表示するプラグインSmash Balloon Instagram Feed

wordpress

,

Smash Balloon Instagram Feed

Eight

自分のサイトにインスタグラムを連携して、
投稿画像を表示させることができるのが、「Smash Balloon Instagram Feed」wordpressプラグインです。

Smash Balloon Instagram Feedプラグインを利用するメリット

  • ホームページでSNSを宣伝ができる。
  • Instagram Feedの表示レイアウトがカスタマイズできる。
  • モバイルフレンドリーなので、SEO対策に適している。

 

もうアイコン設定だけは、やめましょう!

ワンランク上のレイアウトで見栄えを良くしましょう!

 

デモサイトのように、設定ができます。

デモサイトはこちらで確認

 

 

Smash Balloon Instagram Feedの紹介

instagram

参考サイトはこちらです。

お持ちインスタグラムのアカウントで投稿した写真を更新ごとにホームページに表示 できるのがSmash Balloon Instagram Feedのプラグインです。

 

一般的だと、小さいSNSアイコンをページの下に設定して、気になる方はSNSをみると思いますが、 なかなかクリックされない方が多いと思いませんか?

 

SNSアイコンは、小さいし、、、
デザイン的に収まりがいいから、、、
多くのホームページがアイコンを使用しているからなどなど

 

インスタグラム更新してるし、フォロワー数も多いし、ホームページに表示させたいなら、「Smash Balloon Instagram Feed」プラグインを使うべきです!

 

「Smash Balloon Instagram Feed」は、デフォルト設定でも上手く表示ができますが、ひと手間加えることでオリジナルのレイアウトに!

デフォルト設定ではなくhtml,cssのソースコードを少しいじって、初心者の方でも設定できるように解説していきます。

 

インスタグラム連携方法紹介

STEP
プラグインの有効化

インスタグラム手順1

Smash Balloon Instagram Feedのプラグインを有効化にする
Instagrame Feedのsetttingをクリックすると設定画面があります。

STEP
インスタグラムアカウント設定

インスタグラム手順2

connect an Instagram Accountsをクリックして手順通りに認証設定をしていきます。
紐づけする前に、インスタグラムを開いておくとスムーズです。

STEP
紐づけ完了

インスタグラム手順3

インスタグラムのアカウント名が表示されたら、紐づけ完了です。

 

ここから!インスタグラム表示のカスタマイズ

デモサイト

参考サイトはこちら

パソコンの時は、10投稿表示で2列5個ずつ並べて、スマホの時は、1列で4個表示させています。

ポイント

スマホの表示が切り替えられる。
モバイルフレンドリー対応でSEOにもいい!
自分好みにカスタマイズできる!!

ソースコードを張るだけでおしゃれに設定ができます!!

ソースコードを設定することでプラグイン内の管理画面(setting画面)での設定はしません!
本来なら細かい詳細設定をCustomizeからするのですが、コード張る場合は、設定不要です。

Smash Balloon Instagram Feed

ソースコードを解説


例)footer.php又は、お好きな箇所で大丈夫です。

ショートコードの中身

①instagram-feed num=10
インスタグラムの投稿表示の数を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に入れて設定します。

PHP <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 <?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に入れて設定します。


PHP <div class="Insta-Inner"> <h2 class="Insta-Tit">Instagram</h2> <p class="Insta-Text"><a href="URLを入力してください。" target="_blank">アカウント名</a></p> </div>

こちらのソースコードは、任意です。


ソースコードを設定したらインスタグラムが表示される

PHP <?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; ?>


CLOSE