TriAx Labs

トライアックスの技術関連ブログです。
Search

‘facebook page’ タグのついている投稿

2011 Jun 3 19:00
retweet

Facebookページ テンプレート

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

プレビュー用にPNG画像を添付します。


fbTemp.htmlFacebookページのHTML/CSSファイル
a00h.gif
a01.gif
a01h.gif
cmn_img.png
画像ファイル
00_facebook_page_template.psdFacebookページデザイン用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ページよりも、このブログを見やすく使いやすくする方が先のような気がしています。

カテゴリー:
  • ソーシャルメディア
  • デザイン
  • ユーザーインターフェース
Author:Shigeru MATSUDA

    タグ:
  • CSS3 , 
  • facebook , 
  • facebook page
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをGoogle bookmarkに追加
2011 May 24 22:24
retweet

Facebookページにオリジナルのページ(iFrame)を追加する

Facebookページにタブを追加してコンテンツを表示するには、コンテンツを「アプリ」として登録します。
→今回、この一連の作業が非常に厄介でしたのでメモ。

1. Facebookの開発者ページにアクセスします。

2. 右上の「Set Up New App」をクリックします。
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」をクリックします。
Application Profile Page をクリックします


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


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

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


…っとアプリの登録フローを備忘録として紹介しましたが、実際は外部サーバとiFrameコンテンツの用意が済んでいる、という前提で進めています。
外部サーバは自前で用意してもらうとしてiFrameコンテンツのテンプレートセットをサンプルとして近日公開いたします。
それまではFacebookページ デザイン用素材を参考にして下さい。

テンプレートセットには弊社Facebookページで使っているHTML(CSS)とPSDを予定しています。
→Facebookページ テンプレート公開しました。


カテゴリー:
  • ソーシャルメディア
  • デザイン
  • ユーザーインターフェース
Author:Shigeru MATSUDA

    タグ:
  • facebook , 
  • facebook page , 
  • iframe
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをGoogle bookmarkに追加
2011 May 23 21:22
retweet

Facebookページ デザイン用素材

自社のFacebookページを作るにあたり、デザインのお約束事項メモをテンプレートにしてみました。今後アップデートして活用していきたいと思っています。

Facebookテンプレート

メインバナー

メインバナーとは左のスペースに使う素材で、サムネールが180×180なのでコレを踏まえたうえでデザインすると効果的です。

アプリアイコン

アプリアイコンは16×16なのでリンク画像的にデザインしても良いかな、と思います。アプリロゴは今回はiFrameで静的なページを作成しましたので会社ロゴをそのまま配置しました。

ページテンプレート

ページテンプレートは520×800。コレを超えるとスクロールバーが出てしまってカッコ悪いので気をつけましょう。ちなみにJavascriptで制御できますので必須ではありません。

ページ作成で注意点

  • リンクにはtarget=”_top”を付ける。iFrameなので
  • CSSはページ内に記述します

弊社Facebookページ
TriAx Corporation (トライアックス株式会社)

その他のお約束がまだありますが今回はここまで。

→Facebookページ テンプレート公開しました。


カテゴリー:
  • ソーシャルメディア
  • デザイン
Author:Shigeru MATSUDA

    タグ:
  • facebook , 
  • facebook page
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをGoogle bookmarkに追加
<< 前の月のアーカイブを見る
これより後の月にはエントリーがありません。
Category
Archive
Tags
すくすくスクラム アクセスログ アジャイル アラン・クーパー クラウド コメントの書き方 コンパイル コーディング規約 スクラム スマートフォン ソーシャルメディア タブレット タブレット端末 テキストマイニング テーマ デザイン デバッグ ドン・ノーマン ネットワーク プログラマ ペルソナ マーケティング メソッド ユーザ行動モデリング 便利ツール 勉強会 壁紙 実行時間 教育 暑中見舞い 行動パターン分析 開発 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
    • トライアックス株式会社
    • LaCoon
Copyright(C) TriAx Corp. All rights reserved.