BiNDクラウドの新機能Instagram連携を使ってみた｜いまどきWEB08

2015年01月30日 15時30分更新

Instagramの写真で伝えよう

　こんにちは。ライターの松下です。会社のホームページをリニューアルしていくWeb企画もついに8回目となりました。会社のサイトもショップサイトも完成し、あとはページに連携したFacebookやツイッターで日々の近況報告をしていけばよいわけです。

　しかし、これがなかなか。プライベートでは饒舌にツイートできてでも、公式アカウントとなれば話は別。ライターの私ですら無口になってしまいます。

　顧客に親しみをもってもらえて、ブランドイメージもアップするような、おもしろくて実のある話をするのは、とても難しいことです。第一、こまめに最新情報を更新しても、ウェブサイトへの訪問者のほとんどは、小さな文字を読んではくれないでしょう。

　そこで、写真共有SNSを使ってみてはいかがでしょうか。写真を撮ってアップするだけなら更新も簡単。ポートフォリオや取扱商品の使用イメージはもちろん、なんでもない日常の写真を投稿すれば、親しみを感じてもらえるかもしれません。

　昨年末にBiNDクラウドの新機能として、Instagramとの連携機能が追加されました。さっそく使ってみましょう。

トップページにウィジェットを埋め込む

　まずは、どこに何を入れるか。例えば、ポートフォリオとして使うなら、新たに専用のページを設けて、アルバムのように作品のサムネ－ルを並べたり、スライドショーにして見せられます。お店やメーカーなら、ページのサイドメニューに新商品やオススメ商品の写真を解説付きで数件並べるのもよさそうです。BiNDクラウドでは、表示サイズやレイアウト枚数を指定して、Instagramの写真をさまざまなスタイルで表示できます。

　私の会社のサイトでは、トップページの右サイドにTwitterのタイムラインを表示しています。この下にエリアを追加して、サムネールをスライドショーにして入れることにしました。



↑トップページの右側にある、Twitterのタイムラインの下にInstagramのウィジェットを追加する。

　BiNDクラウドを起動して、ページの編集画面を開きます。“サイドA”エリアをクリックして、“追加”ボタンをクリックすると、下側にエリアが追加されます。ここに、Instagramのブロックを追加します。



↑BiNDクラウドの編集画面で、“サイドA”の“追加”ボタンをクリック。



↑下側にエリアが追加されたら、“編集”ボタンをクリックして『ブロックテンプレート』画面を開く。



↑“ブロック選択”メニューから“SOCIAL”を選び、“Instagram”を選択し、“適用”ボタンをクリック。

Instagramと連携する

　Instagramウィジェットのブロックが追加されましたが、まだInstagramのアカウントと紐付されていません。続いて、『ブロックエディタ』でSYNCを使ってInstagramと連携させます。Instagramのアカウントはあらかじめ取得しておいてくださいね。



↑“Instagmram”パーツを選択して、右メニューの“Syncを起動”をクリック。



↑アカウントを設定する。すでに持っていれば“SYNCからInstagramへのアクセスを許可”をクリック。



↑ウェブブラウザーが起動し、認証画面が表示される。ユーザーネームとパスワードを入力してログインすればアクセスが許可される。

ページデザインに合わせて、スタイルがいろいろ選べる

　Instagramウィジェットの設定画面では、表示形式を設定します。スタイルは、サムネールを縦横に並べて表示する“グリッド”、コメント付きでサムネールを表示する“ボード”、自動的に画像を切り替える“スライドショー”の３とおりから選べます。



↑ここでは表示スタイルとして“スライドショー”を選択。サムネイルのサイズ、枠線の幅、画像効果などを設定できる。