Facebook PageにGeeklogをタブで追加する方法
- 2011/11/11 16:22 JST
- 投稿者: Ivy
- 表示回数 11,393
[lightbox:/images/library/Image/ospn/logo.png width:200 height:auto]
まず最初に、GeeklogはウェブをUNIXのパーミッションの概念のままセキュアに構築できるGeekなCMSです。
[lightbox:/images/library/Image/ospn/01.png width:170 height:140] [lightbox:/images/library/Image/ospn/02.png width:170 height:140] [lightbox:/images/library/Image/ospn/03.png width:170 height:140]
PC,携帯、スマホなどで表示できます。
ちなみに携帯ハックのソースはConcrete5に移植されて活用されています。
[lightbox:/images/library/Image/ospn/04.png width:170 height:140]
標準でFacebook, LinkedIn,TwitterのOAuthでログインも可能。最近ではYahoo OAuthもハックが紹介されています。
[lightbox:/images/library/Image/ospn/05.png width:170 height:140] [lightbox:/images/library/Image/ospn/06.png width:170 height:140]
そのGeeklogを活用して、Facebook Pageをリッチに構築する方法をご紹介します。
Facebook Pageのしくみ
Facebook Pageでは、自由にページを追加できます。(左：ログイン前、右：ログイン後)
[lightbox:/images/library/Image/ospn/07.png width:170 height:140][lightbox:/images/library/Image/ospn/08.png width:170 height:140]
Facebookでは、左のメニューからリンクされるページを「タブ」と呼び、自由に作成するページのことを、「カスタムタブ」と呼んでいます。
このカスタムタブで、Geeklogで作成したページをiFrameで表示することができます。
Facebook Pageはすでに作られているものとし、新たにカスタムタブを追加する方法をご紹介します。
作成事例 １：
Facebook Page: http://www.facebook.com/geeklog.jp?sk=app_162458890516775
作成事例 ２：
FacebookのURL: http://www.facebook.com/ivywecojp?sk=app_286437718044456
運用する方法
Facebook PageのままGeeklogにログインしてページの内容を変更できます。（左：ログイン 右：ログイン後）
[lightbox:/images/library/Image/ospn/09.png width:170 height:140][lightbox:/images/library/Image/ospn/09.png width:170 height:140]
[1] 表示されるGeeklogサイトを準備する。
[lightbox:/images/library/Image/ospn/12.png width:auto height:140]
- Geeklogをインストールする。参照：Wiki:インストール
- SSLサイト併用サイトにする。「SSLと両方で運用する」を参照。
- 日本語化プラグインをインストールして、日本語化一括実行を行う。
- カスタムタブ用に、幅520ピクセルのテーマ、facebook_tabをダウンロードしてlayout下にアップロードする。
※このテーマには、Facebook Pageにスクロールバーを表示させないJSが埋め込まれています。 - コンフィギュレーション-その他-その他「"クリックジャッキング"を防止する」を(False)にしてください。
- ナビゲーションプラグイン(navman)をインストールする。
- コンフィギュレーションナビゲーションプラグイン(navman)で、テンプレート：テーマを利用する を有効にする。
- コンテンツを調整してサイトを作成して準備してください。
[2] Facebook アプリを作成する。
- １．Facebookのディベロッパーズページ
https://developers.facebook.com/
（Facebook の下の開発者 のリンクをクリックしても、表示されます） - ページ上の「アプリ」をクリック
- アプリページの右上に表示される「新しいアプリケーションを作成する」をクリック
- アプリの名前を設定します。
App Display Name: 自由になまえを設定します。
App Namespace: 小文字の英数字に限ります。
I agree to the Facebook Platform Policies.にチェックを付けて「続行」 - セキュリティチェック
英字部分のみ、入力してください。
[3]アプリを設定する
- アプリの基本設定を表示
- ページの下に表示される「Facebook上のアプリ」と「ページタブ」を編集します。
Facebook上のアプリ
ページタブ:
[4] アプリをFacebook Pageに適用する
- アプリの編集画面で左側に表示される「アプリのプロフィールページを見る」をクリック
- プロフィールページの左側に表示される「マイページへ追加」 をクリック
作成しているFacebookページ一覧が表示されるので、アプリを適応させたいページを選んで「Add to Page」をクリック - Facebookページを表示すると、左メニューにアプリのタブが追加されていることを確認してください。
- アプリのタブをクリックしてiframeでページが読み込まれていることを確認してください。表示されない場合は、Geeklogのコンフィギュレーションの、クリックジャックを、Falseに変更して、Frame内で表示されることをGeeklogに許可させてください。