‘facebook page’ タグのついている投稿
2011
Jun
3
19:00
Facebookページ テンプレート
Facebookページのテンプレートセットを公開いたします。HTML/CSSは至って普通ですが個人的なクセが随所にあるのは勘弁してください。Facebookページのお約束さえ守って作れば問題ありません。
CSSは若干ですがCSS SpriteとOOCSSを使ってみたり、transitionでリンク部をフワッと変化させてみました。
デザイン時にページサイズには気を付ける必要があります。
横幅520pxとイマドキのデザインでは狭いです。
高さは800pxですがJavascriptで変更する事が出来ます。
プレビュー用にPNG画像を添付します。

| fbTemp.html | FacebookページのHTML/CSSファイル |
|---|---|
| a00h.gif a01.gif a01h.gif cmn_img.png | 画像ファイル |
| 00_facebook_page_template.psd | Facebookページデザイン用PSDファイル |
Javascriptファイルはお手数ですが配布元からダウンロードしてください。
下記の appId にはアプリケーション作成時のIDを入力してください。
<script type="text/javascript">
FB.init({
appId : 'XXXXXXXXXXXXXXX', // enter iFrame appId
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, //parse XFBML
logging : true
});
FB.Canvas.setSize({ height: 1500 }); // content height
↓ダウンロード
Facebookページテンプレート : 751KB
Facebookページよりも、このブログを見やすく使いやすくする方が先のような気がしています。
2011
May
24
22:24
Facebookページにオリジナルのページ(iFrame)を追加する
Facebookページにタブを追加してコンテンツを表示するには、コンテンツを「アプリ」として登録します。
→今回、この一連の作業が非常に厄介でしたのでメモ。
1. Facebookの開発者ページにアクセスします。
2. 右上の「Set Up New App」をクリックします。
3. アプリケーション名を入力し「アプリケーションを作成」をクリックします。アプリケーション名はあとで変更可能です。
セキュリティチェックのあと、
4. 各種情報を入力します。通常のウェブページとして表示させたいのでシンプルなアイコンとし、ロゴは社名の入った画像を登録しました。その他の情報はサイトより流用しました。

5. 次に Facebook Integration でページの詳細な設定を行います。
- 【キャンバスページ】 任意のURLを半角英数字のみで入力します。このURLがFacebookページのURLになります。
- 【Canvas URL】 iFrameのURLを入力します。
- 【iFrameサイズ】 Auto-Resizeを選択しました。ページからサイズを指定することも可能です。
- 【タブ名】 全角16文字までの任意の名称を入力できます。
- 【タブのURL】 ファイル名を指定します。
以上の設定が済んだら「変更を保存」をクリックします。
→ふぅ、もう少しです。
ここまでの作業が済んだらFacebookページにタブとして表示させることが出来るようになります。
「Application Profile Page」をクリックします。

右にあるメニューから「マイページへ追加」をクリックします。

このアプリを表示させたいFacebookページを選択します。

Facebookページを確認してみましょう。アプリがタブとして登録されています。

…っとアプリの登録フローを備忘録として紹介しましたが、実際は外部サーバとiFrameコンテンツの用意が済んでいる、という前提で進めています。
外部サーバは自前で用意してもらうとしてiFrameコンテンツのテンプレートセットをサンプルとして近日公開いたします。
それまではFacebookページ デザイン用素材を参考にして下さい。
テンプレートセットには弊社Facebookページで使っているHTML(CSS)とPSDを予定しています。
→Facebookページ テンプレート公開しました。
2011
May
23
21:22
Facebookページ デザイン用素材
自社のFacebookページを作るにあたり、デザインのお約束事項メモをテンプレートにしてみました。今後アップデートして活用していきたいと思っています。

メインバナー
メインバナーとは左のスペースに使う素材で、サムネールが180×180なのでコレを踏まえたうえでデザインすると効果的です。アプリアイコン
アプリアイコンは16×16なのでリンク画像的にデザインしても良いかな、と思います。アプリロゴは今回はiFrameで静的なページを作成しましたので会社ロゴをそのまま配置しました。ページテンプレート
ページテンプレートは520×800。コレを超えるとスクロールバーが出てしまってカッコ悪いので気をつけましょう。ちなみにJavascriptで制御できますので必須ではありません。ページ作成で注意点
- リンクにはtarget=”_top”を付ける。iFrameなので
- CSSはページ内に記述します
弊社Facebookページ
TriAx Corporation (トライアックス株式会社)
その他のお約束がまだありますが今回はここまで。
→Facebookページ テンプレート公開しました。
すくすくスクラム
アクセスログ
アジャイル
アラン・クーパー
クラウド
コメントの書き方
コンパイル
コーディング規約
スクラム
スマートフォン
ソーシャルメディア
タブレット
タブレット端末
テキストマイニング
テーマ
デザイン
デバッグ
ドン・ノーマン
ネットワーク
プログラマ
ペルソナ
マーケティング
メソッド
ユーザ行動モデリング
便利ツール
勉強会
壁紙
実行時間
教育
暑中見舞い
行動パターン分析
開発
Android
article
aside
buildbot
CSS3
daemon mode
facebook
facebook page
GAE
Getting Things Done
gnuplot
Google Analytics
Google App Engine
GTD
Hadoop
Hardy
HTML5
iframe
iOS
iOS4.2
iPad
iPhone
Jinja
Jinja2
Mahout
Mako
MapReduce
NFS
PEP
pybundle
Pylons
PyPl
Python
Pyxis
Review Board
RHEL4
section
Smartphone
Sphinx
Tablet
Toscawidgets
Trac
TrStyle
UX
Validator
virtualenv
web-kit
Widget
WSGI
