ようこそ! Geeklog Japan, Anonymous 2024/03/29 00:20 JST

Facebook PageにGeeklogをタブで追加する方法

  • 2011/11/11 16:22 JST
  • 投稿者:
  • 表示回数 11,279
Geeklog

[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はすでに作られているものとし、新たにカスタムタブを追加する方法をご紹介します。

作成事例 1:

Facebook Page: http://www.facebook.com/geeklog.jp?sk=app_162458890516775

作成事例 2:

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]

  1. Geeklogをインストールする。参照:Wiki:インストール
  2. SSLサイト併用サイトにする。「SSLと両方で運用する」を参照。
  3. 日本語化プラグインをインストールして、日本語化一括実行を行う。
  4. カスタムタブ用に、幅520ピクセルのテーマ、facebook_tabをダウンロードしてlayout下にアップロードする。
    ※このテーマには、Facebook Pageにスクロールバーを表示させないJSが埋め込まれています。
  5. コンフィギュレーション-その他-その他「"クリックジャッキング"を防止する」を(False)にしてください。
  6. ナビゲーションプラグイン(navman)をインストールする。
  7. コンフィギュレーションナビゲーションプラグイン(navman)で、テンプレート:テーマを利用する を有効にする。
  8. コンテンツを調整してサイトを作成して準備してください。

[2] Facebook アプリを作成する。

  1. 1.Facebookのディベロッパーズページ
    https://developers.facebook.com/
    (Facebook の下の開発者 のリンクをクリックしても、表示されます)
  2.  ページ上の「アプリ」をクリック
  3.  アプリページの右上に表示される「新しいアプリケーションを作成する」をクリック
  4.  アプリの名前を設定します。
    App Display Name: 自由になまえを設定します。
    App Namespace: 小文字の英数字に限ります。
    I agree to the Facebook Platform Policies.にチェックを付けて「続行」
  5. セキュリティチェック
    英字部分のみ、入力してください。

[3]アプリを設定する

  1. アプリの基本設定を表示
  2. ページの下に表示される「Facebook上のアプリ」と「ページタブ」を編集します。

Facebook上のアプリ

 キャンバスURL: 
セキュリティで保護されたキャンバスのURL:
 

ページタブ:

 ページタブ名:
Page Tab URL:
Secure Page Tab URL:
Page Tab Edit URL:
 
<解説>
・キャンバスURL:
ページ内で表示するコンテンツ側のURLを入力(iframeで読み込む先)
 
・セキュリティで保護されたキャンバスのURL:
上記URLのSSLアドレス https://
 
・ページタブ名:
Facebookページのタブに表示されるメニューの名前
(「ようこそ」など)
 
・Page Tab URL:
「キャンバスURL:」とおなじ(http://~)
 
・Secure Page Tab URL:
「Secure Canvas URL:」とおなじ(https://~)
 
・Page Tab Edit URL:
ページを編集したいときに表示するURL
http://www.yourgeeksite.com/admin/ など
 
[lightbox:/images/library/Image/ospn/11.png width:300 height:auto]

[4] アプリをFacebook Pageに適用する

  1. アプリの編集画面で左側に表示される「アプリのプロフィールページを見る」をクリック
  2. プロフィールページの左側に表示される「マイページへ追加」 をクリック
    作成しているFacebookページ一覧が表示されるので、アプリを適応させたいページを選んで「Add to Page」をクリック
  3.  Facebookページを表示すると、左メニューにアプリのタブが追加されていることを確認してください。
  4.  アプリのタブをクリックしてiframeでページが読み込まれていることを確認してください。表示されない場合は、Geeklogのコンフィギュレーションの、クリックジャックを、Falseに変更して、Frame内で表示されることをGeeklogに許可させてください。