よたか2011.05.25 15:04:47
オリジナル名刺工房 フェイスブックページ版
facebookアプリを登録して、今のサイトのデータを流用して表示させているのですが、作っている途中で、facebookアプリのFBMLが登録出来なくなってしまい、ほとんどできていたのに、iframe用に書き換えたんです。
これはなかなかショックでした。
Facebookページに使うメニュー
今回の「Facebookページ」でのポイントはいくつかあるんですけど、まず一番は、メニュー。ソースそのものは、「ASH有限会社」様が配布（“スタイルシートの著作権は放棄していませんが、そのまま利用したり、カスタマイズして利用することは、自由に行って頂いて構いません”と記載されてました。）されている「スタイルシートでプルダウンメニュー」をカスタマイズさせていただきました。
ありがとうございます！
このスタイルシートを元に、facebookの左右520pxに納まるようにカスタマイズし、ある程度、色も自由に変更出来るように整理してます。
ここまでくると背景画像も使いたいのですが、いろんな原因で画像が呼べない事が数回あったので、背景画像はとりあえず見送ってます。
Facebookページのサイズ
iframeにするとここが一番頭の悩ませどころ。javascriptを使って、インフレームのサイズを変更する事が出来ます。facebookのディベロッパーで配布されているjavascriptのサイズのパラメータを下記の通りに書き換えます。
FB.Canvas.setSize({ width:520,height:2000 });
これで、天地が2000pxまで広がります。
その気になれば、ページ毎にサイズを変える事も出来ますが、あまり意味があるように思えませんので、今回は全て固定。
そのかわり、終わりの目印に、サイトマップのフッタをつけております。
Facebookの看板はひと工夫が必要
このページの右に看板をつけてますが、デザインが固定なので、看板のデザインにはひと工夫が必要なんです。まず、縦に罫線が引いてあるので、右の罫線を消してくっつけてしまいました。
サイズとしては、下にナビゲーションがあるので、このサイズが限界だと思います。
見せ方としてもいろいろあると思いますが、今回は、商品を左側の罫線に掛けるようにして奥行きを出してみました。
そして、看板で一番悩みどこは「サムネール」なんですね。
正方形のサイズならそのままサムネールになるのですが。看板用に作ったデザインとサムネール用に作ったデザインは一緒と言うわけには行かないとおもうんです。
そこで、このサイズにして、この看板の一番下の部分を「サムネール」として使うようにしました。
サムネールにして、わかりやすい画像やアイコンを作れればいいのですけど、なかなかそうもいかないので「文字が読める」事を前提に作ってみました。
コレが正解かどうかわかりませんが、少なくとも何のページなのかはわかると思います。
サーバーにはSSLが必要なんです…
ある意味これが一番高いハードルになるかもしれませんが、facebookアプリの登録には、sslが必要なんです。通常のレンタルサーバではsslの扱いがそれぞれ違いますが、今回のうちのサーバはsslがついてないので、GlobalSSLを導入する事にしました。
PLESK に 激安SSL「GlobeSSL」の設定おぼえ
あと、今回データを流用したのですが、リンク先がhttpsでない場合、ブラウザ上にアラートが出る事があります。
流用してデータfacebookページを作る場合この辺サイト全体をチェックしないと行けないので、結構重労働…。
ついでに書くとアプリ登録には、JSONが必要らしいので、phpのバージョンは5.2以上でないといけません。
もしくは、別途jsonをインストールするか…。
どちらにせよ、サーバーの縛りが出てくるので要注意。
でもね、ページを表示させるだけなら、JSONいらないとも思うんだけどユーザー情報とかが必要になるような事やるんだったらやっぱりいるんだろうね。
ちなみに、今回作ったアプリは、登録時にユーザー情報を必要としてません。
情報は切り分けました
オリジナル名刺工房で流用したい部分は「名刺デザイン」の部分なので、そこだけ流用出来ればいいと思うので、お店の紹介や、注文方法はノートに書き込みました。また、お知らせについては、RSSを自動で転送させた方が自然だと思います。
この辺の切り分けは運用上の結構大事な部分かもしれません。
