シェアする

facebookページを「BiND for Fecebook」でカスタマイズしました!〜紙媒体デザイナーにオススメするポイントと注意点〜

先週届いたホームページ作成ソフト「BiND for WebLiFE* 5」を使って、facebookページをカスタマイズしてみました。アドビ製品との連携方法や、BiND for Fecebookを使ってfacebookページを作成するときの注意点をいくつか書いてみようと思います。

skitchhCa5Bx

詳細は以下に。

 

スポンサーリンク
200217_ad

「BiND for WebLiFE* 5」を使ってfacebookページのカスタマイズ

BiND5とは? | BiND for WebLiFE* 5

(via:トップページ | BiND for WebLiFE* 5

BiNDは「2」から使っていて、毎回びっくりするようなバージョンアップをしているサイト作成アプリです。 タグとか分からなくても、かっちょいいサイトを作成できるのがウリで、HTMLのタグを触らなくてココまでできちゃうのなら、私のような紙媒体メインのデザイナーさんや、外注まで予算的に回せない、もしくは自分でなんとかサイトを作ってみたいって思う人には、とてもいいソフトではないでしょうか?

公式プロモーションPV

予告PV

操作画面

BiND : サイトエディタ

「BiND for Fecebook」を使って、facebookページを作ってみる

今回、一番やってみたかったことは、facebookページのカスタマイズでした。通常にBiNDを使いながら、facebookページのカスタマイズができると聞いていたので、さっそく作ってみました。作っている中で、すばらしい点と、facebookページにアップするとき、ちょっと引っかかった点もあげてみようと思います。


Design × Lifehack × CrossOver Lab
作成したfacebookページはこちら


 

アドビ製品との連携

紙媒体のデザイナーさんが普段使っているアドビ製品。BiNDはPhotoshopとの連携もできます。「オリジナルを編集」というボタンをクリックすると、psdデータもサポートされているので、Photoshopで編集が可能になります。

BiND : ブロックエディタ

「文字組とか、ベクターデータも編集したい」という方には、最近のPhotoshopはIllustratorのベクターデータを埋め込めるようになっていますので、間接的ではありますが、Illustratorで作ったデータをBiNDで反映させることも可能です。

110903_midashi.psd 100% (ベクトルスマートオブジェクト, RGB/8)

Photoshop

↑アイコンをダブルクリックすると…

Adobe Illustrator CS5

↑埋め込まれているベクターデータがillustratorで開くので、そこで編集、保存すれば、元のpsdデータに反映されます

サイトを作ってアップしたけど、facebookページに反映されない

実際に「BiND for Fecebook」を使ってfacebookページに載せるサイトを作ってアップしたのですが…どうにも反映されませんでした。新規にfacebookページを作ってアップしてもダメで、デベロッパーページを確認してみると、どうやらfacebook上ではアプリとしては認識されているようですが、実際にfacebookページには反映されていませんでした。

データが反映されない原因は「ポップアップウィンドウ」

BiNDのfacebookページに、同じような症状のことを書かれている方がいらっしゃったので、症状を私もかいていたところ、デジタルステージの平野さんがこういった回答をされていました。

BiND for FB

(via:BiND for FB

で、私はメインにSafariを使っていて、ポップアップを開くことは基本的に禁止にしています。なのでSafariの環境設定→セキュリティ→ポップアップウィンドウを開かないのチェックを外して、再度登録したらOKでした!

セキュリティ

↑同じ内容で躓いている方がいらっしゃれば、ココをチェックしてみるといいかと思います。

facebookページに反映するまでの流れ

実際に登録〜データが反映されるまでの流れを説明します。8番の次に、9番のポップアップウィンドウが表示されない状態で、12番の画面に移った場合は、ポップアップウィンドウでの「『アプリ名』を追加する」を設定しなかったために、BiNDで作成したデータがfacebookページに反映されなかったという事になっていると思います。

1.BiND for Facebookをクリック

Bind Server/機能一覧

2.「アプリケーションを追加する」をクリック

BiND Server Control Panel

3.作成してあるfacebookページを選択

BiND Server Control Panel-6-1

5.facebookページで表示される名称とアイコンデータを選択して「登録内容を確認」をクリック

BiND Server Control Panel-7-1

6.アプリケーション登録をクリック

BiND Server Control Panel-8-1

7.facebookに登録画面が出たら「OK」をクリック

BiND Server Control Panel-9-1

8.トップ画面に表示させたいページデータを選択して「適用」をクリック

skitchIxjh5m

9.ポップアップウィンドウが表示されるので「『アプリ名』を追加する」をクリック(このページが表示されない場合、ポップアップウィンドウを表示するように設定を変えてください)

「「デラ研」とは?」を追加しますか?-1

10.サイドメニューの作成したアプリ名をクリック

Design × Lifehack × CrossOver Lab-5-1

11.データが反映されているかを確認

Design × Lifehack × CrossOver Lab-6-1

12.ブラウザのメインウィンドウに戻って「いいね」ボタンを押したら表示される画面の設定の有無を設定して終了

skitched-117-1

まとめ

通常のサイトからfacebookページまで、幅広く使えるBiND。 EvernoteやDropBoxの連携なども、共同作業をしている方にはすばらしい連携機能ですし、有料ではありますが、BiNDサーバに申し込めば、オンラインショップまでこれ1本で作ることも可能なBiND。見栄えのいいサイトを、コストを下げて自由に作ってみようと思っている方は、要チェックです!

欲を言えば…WordPressをBiNDでカスタマイズできたら嬉しいな…とか思ってみたり(^^)




トップページ | BiND for WebLiFE* 5
BiND公式サイトはこちらから


SPONSORED LINK

 

The following two tabs change content below.
1972年生まれ。東京都八王子出身・中野区在住。デジタル機器やデジタルサービスを駆使して、いつでもどこでも人生を謳歌する「デジタル寅さん」として活動中。デジタルの楽しさを知ってもらうためのデジタルサポートを行っています。 その他にはグラフィックデザイナー、料理や食を通じてコミュニケーションを楽しむ研究をしている「食と心の研究家」としても活動。料理コミュニティ「キッチン男子部」の顧問も。
スポンサーリンク
200217_ad
200217_ad

シェアする

フォローする